fix links
diff --git a/documents/en/api.json b/documents/en/api.json
index ef9e190..18f955d 100644
--- a/documents/en/api.json
+++ b/documents/en/api.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number\n renderer?: string\n width?: number|string\n height? number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p> Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p> ECharts 3 supports using <code>canvas</code> element as container directly, thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code>theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p> Supports <code>'canvas'</code> or <code>'svg'</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code>group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p> Map name, referring to <code>map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p> Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p> <strong>For example <a href=\"https://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('USA', usaJson, {\n // Move Alaska to the bottom left of United States\n Alaska: {\n // Upper left longitude\n left: -131,\n // Upper left latitude\n top: 25,\n // Range of longitude\n width: 15\n },\n // Hawaii\n Hawaii: {\n left: -110,\n top: 28,\n width: 5\n },\n // Puerto Rico\n 'Puerto Rico': {\n left: -76,\n top: 26,\n width: 2\n }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registed map in the following format:</p>\n<pre><code class=\"lang-js\">{\n // geoJson data of the map\n geoJson: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code>opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code>ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code>registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code>name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code>{type: name}</code>.</p>\n<p>For example:</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('myCustomShape', MyShape);\n\nvar option = {\n series: {\n type: 'custom',\n coordinateSystem: 'none',\n renderItem: function (params, api) {\n return {\n type: 'myCustomShape',\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: 'red'\n }\n };\n },\n data: [[10, 20, 30, 40]]\n }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code>'circle'</code>, <code>'sector'</code>, <code>'ring'</code>, <code>'polygon'</code>, <code>'polyline'</code>, <code>'rect'</code>, <code>'line'</code>, <code>'bezierCurve'</code>, <code>'arc'</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n x: number,\n y: number,\n width: number,\n height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code>undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n notMerge: ...,\n lazyUpdate: ...,\n silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p> Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p> Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p> Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by <code>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n title: [{...}],\n legend: [{...}],\n grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n visualMap: {\n inRange: {\n color: ...\n }\n }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p> Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code>resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'dataZoom',\n start: 20,\n end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n type: 'dataZoom',\n batch: [{\n // first dataZoom component\n start: 20,\n end: 30\n }, {\n // second dataZoom component\n dataZoomIndex: 1,\n start: 10,\n end: 20\n }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event names are all in lower-cases, for example, <code>'click'</code>, <code>'mousemove'</code>, <code>'legendselected'</code></p>\n<p> <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code>query</code></p>\n<p> Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p> If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\"> chart.on('click', 'series', function () {...});\n chart.on('click', 'series.line', function () {...});\n chart.on('click', 'dataZoom', function () {...});\n chart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p> If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\"> {\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n }\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n });\n chart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n });\n chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n });\n chart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n });\n chart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n })\n chart.on('click', {targetName: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method is called.\n });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p> Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p> Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code>handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted.\n value: Array|string\n // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n) => Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id 'bb':\nchart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);\n// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id 'g1'.\nchart.convertToPixel({gridId: 'g1'}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-js\">// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: 'k2'}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id 'k2'.\nchart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array|string\n // Conversion result\n) => Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array\n) => boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is 'z'.\nchart.containPixel({gridId: 'z'}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is 'a'.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p> Optional; type of loading animation; only <code>'default'</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">default: {\n text: 'loading',\n color: '#c23531',\n textColor: '#000',\n maskColor: 'rgba(255, 255, 255, 0.8)',\n zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n pixelRatio: 2,\n backgroundColor: '#fff'\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray,\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenario, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code>appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code>?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>'scroll'</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // index of series, which is optional when trigger of tooltip is axis\n seriesIndex?: number,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>Parameter <code>position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'selectDataRange',\n // select a value range between 20 and 40\n selected: [20, 40],\n // cancel selecting the second range\n selected: { 1: false },\n // cancel selecting `excellent` category\n selected: { 'excellent': false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area is a "coodinate system area", belonging\n // to a geo coordinate system with getIndex: 0.\n // We can also use xAxisIndex or yAxisIndex to indicate that\n // this area belongs to a catesian coodinate system.\n // If no coordinate system is specified, this area is a\n // "global area", which does not belong to any coordinate system.\n // If an area belongs to a coordinate system, this area moves\n // and scales alone with the coordinate system.\n geoIndex: 0,\n // xAxisIndex: 0,\n // yAxisIndex: 0,\n\n // Optional: 'polygon', 'rect', 'lineX', 'lineY'\n brushType: 'polygon',\n\n // Only for "global area", define the area with the pixel coordinates.\n range: [\n ...\n ],\n\n // Only for "coordinate system area", define the area with the\n // coordinates.\n coordRange: [\n // In this case, the area is in a geo coordinate system, so\n // this is [longitude, latitude].\n [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n ]\n },\n ... // Other areas.\n ]\n});\n</code></pre>\n<p>The content of <code>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is 'rect':\n <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is 'lineX' or 'lineY':\n <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is 'polygon':\n <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is "global area", we should use <code>range</code>.</li>\n<li>If the area is "coordinate system area" (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is "pixel", while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n key: 'brush',\n brushOption: {\n // See more info in the `brushType` of "brush component".\n // If set as `false`, the mouse is disabled to brush.\n brushType: string,\n // See more info in the `brushModel` of "brush component".\n // IF not set, use the `brushMode` of brush component.\n brushMode: string\n }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n console.log(params);\n});\n\nmyChart.on('legendselectchanged', function (params) {\n console.log(params);\n});\n\nchart.on('click', 'series.line', function (params) {\n console.log(params);\n});\n\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {\n console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code>percent</code>. Please refer to callback <code>params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code>legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in <code>data</code> of <code>series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalCursorTaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number\n renderer?: string\n width?: number|string\n height? number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p> Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p> ECharts 3 supports using <code>canvas</code> element as container directly, thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code>theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p> Supports <code>'canvas'</code> or <code>'svg'</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code>group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p> Map name, referring to <code>map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p> Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p> <strong>For example <a href=\"https://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('USA', usaJson, {\n // Move Alaska to the bottom left of United States\n Alaska: {\n // Upper left longitude\n left: -131,\n // Upper left latitude\n top: 25,\n // Range of longitude\n width: 15\n },\n // Hawaii\n Hawaii: {\n left: -110,\n top: 28,\n width: 5\n },\n // Puerto Rico\n 'Puerto Rico': {\n left: -76,\n top: 26,\n width: 2\n }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-js\">{\n // geoJson data of the map\n geoJson: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code>opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code>ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code>registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code>name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code>{type: name}</code>.</p>\n<p>For example:</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('myCustomShape', MyShape);\n\nvar option = {\n series: {\n type: 'custom',\n coordinateSystem: 'none',\n renderItem: function (params, api) {\n return {\n type: 'myCustomShape',\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: 'red'\n }\n };\n },\n data: [[10, 20, 30, 40]]\n }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code>'circle'</code>, <code>'sector'</code>, <code>'ring'</code>, <code>'polygon'</code>, <code>'polyline'</code>, <code>'rect'</code>, <code>'line'</code>, <code>'bezierCurve'</code>, <code>'arc'</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n x: number,\n y: number,\n width: number,\n height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code>undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n notMerge: ...,\n lazyUpdate: ...,\n silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p> Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p> Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p> Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by <code>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n title: [{...}],\n legend: [{...}],\n grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n visualMap: {\n inRange: {\n color: ...\n }\n }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p> Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code>resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'dataZoom',\n start: 20,\n end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n type: 'dataZoom',\n batch: [{\n // first dataZoom component\n start: 20,\n end: 30\n }, {\n // second dataZoom component\n dataZoomIndex: 1,\n start: 10,\n end: 20\n }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event names are all in lower-cases, for example, <code>'click'</code>, <code>'mousemove'</code>, <code>'legendselected'</code></p>\n<p> <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code>query</code></p>\n<p> Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p> If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\"> chart.on('click', 'series', function () {...});\n chart.on('click', 'series.line', function () {...});\n chart.on('click', 'dataZoom', function () {...});\n chart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p> If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\"> {\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n }\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n });\n chart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n });\n chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n });\n chart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n });\n chart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n })\n chart.on('click', {targetName: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method is called.\n });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p> Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p> Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code>handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted.\n value: Array|string\n // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n) => Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id 'bb':\nchart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);\n// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id 'g1'.\nchart.convertToPixel({gridId: 'g1'}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-js\">// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: 'k2'}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id 'k2'.\nchart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array|string\n // Conversion result\n) => Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array\n) => boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is 'z'.\nchart.containPixel({gridId: 'z'}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is 'a'.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p> Optional; type of loading animation; only <code>'default'</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">default: {\n text: 'loading',\n color: '#c23531',\n textColor: '#000',\n maskColor: 'rgba(255, 255, 255, 0.8)',\n zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n pixelRatio: 2,\n backgroundColor: '#fff'\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray,\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenario, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code>appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code>?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>'scroll'</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // index of series, which is optional when trigger of tooltip is axis\n seriesIndex?: number,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>Parameter <code>position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'selectDataRange',\n // select a value range between 20 and 40\n selected: [20, 40],\n // cancel selecting the second range\n selected: { 1: false },\n // cancel selecting `excellent` category\n selected: { 'excellent': false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area is a "coodinate system area", belonging\n // to a geo coordinate system with getIndex: 0.\n // We can also use xAxisIndex or yAxisIndex to indicate that\n // this area belongs to a catesian coodinate system.\n // If no coordinate system is specified, this area is a\n // "global area", which does not belong to any coordinate system.\n // If an area belongs to a coordinate system, this area moves\n // and scales alone with the coordinate system.\n geoIndex: 0,\n // xAxisIndex: 0,\n // yAxisIndex: 0,\n\n // Optional: 'polygon', 'rect', 'lineX', 'lineY'\n brushType: 'polygon',\n\n // Only for "global area", define the area with the pixel coordinates.\n range: [\n ...\n ],\n\n // Only for "coordinate system area", define the area with the\n // coordinates.\n coordRange: [\n // In this case, the area is in a geo coordinate system, so\n // this is [longitude, latitude].\n [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n ]\n },\n ... // Other areas.\n ]\n});\n</code></pre>\n<p>The content of <code>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is 'rect':\n <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is 'lineX' or 'lineY':\n <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is 'polygon':\n <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is "global area", we should use <code>range</code>.</li>\n<li>If the area is "coordinate system area" (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is "pixel", while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n key: 'brush',\n brushOption: {\n // See more info in the `brushType` of "brush component".\n // If set as `false`, the mouse is disabled to brush.\n brushType: string,\n // See more info in the `brushModel` of "brush component".\n // IF not set, use the `brushMode` of brush component.\n brushMode: string\n }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n console.log(params);\n});\n\nmyChart.on('legendselectchanged', function (params) {\n console.log(params);\n});\n\nchart.on('click', 'series.line', function (params) {\n console.log(params);\n});\n\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {\n console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code>percent</code>. Please refer to callback <code>params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code>legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in <code>data</code> of <code>series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalCursorTaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
diff --git a/documents/en/tutorial.json b/documents/en/tutorial.json
index 338e03d..6b1aaa2 100644
--- a/documents/en/tutorial.json
+++ b/documents/en/tutorial.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"Get Started with ECharts in 5 minutes":{"type":["*"],"description":"<h2 id=\"installing-echarts\">Installing ECharts</h2>\n<p>First, install ECharts using one of the following methods:</p>\n<ul>\n<li><p>The <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">official download page</a>, has different builds for most common use cases. If you would like to include all packages, you can download <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">the full minified version</a>.</p>\n</li>\n<li><p>From the latest <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> release, you can find the latest version of echarts in <code>dist</code> directory of the unzipped files.</p>\n</li>\n<li><p>Using npm: <code>npm install echarts --save</code>. <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Use%20ECharts%20with%20webpack\" target=\"_blank\">Using ECharts with webpack</a></p>\n</li>\n<li><p>Using the <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">online build tool</a> (Currently available in Chinese only).</p>\n</li>\n</ul>\n<h2 id=\"including-echarts\">Including ECharts</h2>\n<p>ECharts 3 no longer requires using AMD to load packages, and the AMD loader is no longer included in ECharts. Instead, ECharts should be included using a traditional <code><script></code> tag:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- including ECharts file -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"draw-a-simple-chart\">Draw a simple chart</h2>\n<p>Before drawing charts, we need to prepare a DOM container with width and height for ECharts.</p>\n<pre><code><body>\n <!-- preparing a DOM with width and height for ECharts -->\n <div id="main" style="width:600px; height:400px;"></div>\n</body>\n</code></pre><p>Then we can initialize an ECharts instance using <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a>, and create a simple bar chart with <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a>. Below is the complete code.</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- including ECharts file -->\n <script src="echarts.js"></script>\n</head>\n<body>\n <!-- prepare a DOM container with width and height -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // based on prepared DOM, initialize echarts instance\n var myChart = echarts.init(document.getElementById('main'));\n\n // specify chart configuration item and data\n var option = {\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // use configuration item and data specified to show chart\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>You've made your first chart!</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>For more examples, go to the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a></p>\n"},"Create Custom Build of ECharts":{"type":["*"],"description":"<p>In most cases, ECharts builds can be downloaded from the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">download page</a> or from the <code>echarts/dist</code> directory in our <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub project</a>, where\nthese pre-builds are provided:</p>\n<ul>\n<li>Complete verion: <code>echarts/dist/echarts.js</code>, including all charts and components (see <code>echarts/echarts.all.js</code> for detail), but has maximum file size.</li>\n<li>Common version: <code>echarts/dist/echarts.common.js</code>, including common charts and components (see <code>echarts/echarts.common.js</code> for detail), moderate file size.</li>\n<li>Simple version: <code>echarts/dist/echarts.simple.js</code>, including a smaller subset of the most common charts and components (see <code>echarts/echarts.simple.js</code> for detail), small file size.</li>\n</ul>\n<p>If it is important for your use case to reduce the size of your ECharts dependency, you can customize your ECharts build by using one of these approaches:</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">Online custom build tool</a> is relatively convenient (Currently available in Chinese only)</li>\n<li>The script <code>echarts/build/build.js</code> found in the project is flexible for module selecting, and supports multi-language builds</li>\n<li>Build ECharts and your project directly by using tools such as <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>, <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a></li>\n</ul>\n<p>Below are some examples to illustrate the latter two approaches.</p>\n<h2 id=\"prepare-create-our-project-and-install-echarts\">Prepare: create our project and install echarts</h2>\n<p>Create a sample project using the command line</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>Then in the <code>myProject</code> directory, initialize <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> environment and install echarts (assume that <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> has been installed):</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>The installed echarts is in the <code>myProject/node_modules</code> directory, which can be used in our project directly. For example:</p>\n<p>Use ES Module:</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>Use CommonJS:</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>Next, we just describe our examples in ES Module way.</p>\n<h2 id=\"create-custom-build-by-echarts-build-build-js\">Create custom build by <code>echarts/build/build.js</code></h2>\n<p>In this example, for minimizing file size, we will build a echarts bundle with only pie chart included, and create a web page to show it.</p>\n<p>echarts has provided a script <code>echarts/build/build.js</code> as a build tool (<a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> is required to execute it). Now we can use the command below in the <code>myProject</code> directory to check its help info:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>These options can be used in this example:</p>\n<ul>\n<li><code>-i</code>: Entry file of the echarts code. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>-o</code>: The bundle file path. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>--min</code>: Whether to compress file (not by default), and remove the code that is for printing error and warning info.</li>\n<li><code>--lang <language shortcut or file path></code>: Whether to use the specified language (Chinese by default). For example: <code>--lang en</code> means using English, <code>--lang my/langXX.js</code> means using <code><cwd>/my/langXX.js</code> to substitute <code>echarts/lib/lang.js</code> while buiding.</li>\n<li><code>--sourcemap</code>: Whether to output source map, which is useful in debug.</li>\n<li><code>--format</code>: The format of output. Can be <code>'umb'</code>(default), <code>'amd'</code>, <code>'iife'</code>, <code>'cjs'</code>, <code>'es'</code>.</li>\n</ul>\n<p>Now we want to create a echarts bundle that only supports pie chart, we should firstly create an entry file (say <code>myProject/echarts.custom.js</code>) to import modules we need:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts and export them.\nexport * from 'echarts/src/echarts';\n// Import pie chart.\nimport 'echarts/src/chart/pie';\n// In this case, modules in either `echarts/src` or `echarts/lib`\n// can be imported (but should not be mixed). See\n// "Use `echarts/lib/**` or `echarts/src/**`" below.\n</code></pre>\n<p>Then we can use command below in <code>myProject</code> directory to build the bundle:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>Now the bundle <code>myProject/lib/echarts.custom.min.js</code> has been created. Then we can create a web page (say <code>myProject/pie.html</code>) to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- import the bundle `lib/echarts.custom.js`. -->\n <script src="lib/echarts.custom.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // Create a pie chart:\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/pie.html</code> in a browser, we can see the pie chart:</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"modules-that-are-permitted-to-be-imported\">Modules that are permitted to be imported</h2>\n<p>All of the permitted modules are declared in <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> and <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a>. Other modules in the source code of echarts and zrender <strong>SHOULD NOT BE IMPORTED</strong>, because they are inner modules, whose interfaces and functionalities may be modified in the subsequent upgrades of echarts.</p>\n<h2 id=\"use-echarts-lib-or-echarts-src-\">Use <code>echarts/lib/**</code> or <code>echarts/src/**</code>?</h2>\n<ul>\n<li>If intending to import part of echarts modules in your project and build yourself, only <code>echarts/lib/**</code> can be used, <code>echarts/src/**</code> should not be used.</li>\n<li>If using <code>echarts/build/build.js</code> to make a bundle, either <code>echarts/lib/**</code> or <code>echarts/src/**</code> can be used (should not be mixed), where <code>echarts/src/**</code> brings smaller bundle size a little.</li>\n</ul>\n<blockquote>\n<p>Reason: currently, <code>echarts/src/**</code> is the source code that using ES Module, and they are transpiled to CommonJS code and placed in <code>echarts/lib/**</code>. (This transformation is for backward compatible with old version of NodeJS and webpack that do not support ES Module.)\nHistorically, echarts extensions and user projects have been using the package path <code>echarts/lib/**</code>. So it should not be changed, otherwise, mixed using both <code>echarts/src/**</code> and <code>echarts/lib/**</code> will generate two echarts namespace and bring some problems. But it is not an issue when using <code>echarts/build/build.js</code> to create a bundle, where ES modules in <code>echarts/src/**</code> can be analyzed statically for smaller bundle size.</p>\n</blockquote>\n<h2 id=\"build-echarts-and-our-project-directly-by-rollup\">Build echarts and our project directly by rollup</h2>\n<p>Now we have known that how to create custom build by <code>echarts/build/build.js</code>. Alternatively, we can bundle echarts and our project directly by the tool like <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> or <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>. In some project, this approach is required. Next we only go with <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, because <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> and <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> are in the similar way.</p>\n<p>Firstly install <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> in <code>myProject</code> directory:</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>Then we create a project JS file <code>myProject/line.js</code> for line chart rendering:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts.\nimport * as echarts from 'echarts/lib/echarts';\n// Import line chart.\nimport 'echarts/lib/chart/line';\n// Import components of tooltip, title and toolbox.\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// Render line chart and components.\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>The created module <code>myProject/line.js</code> can not work directly in the browsers that do not support ES Module. So we need to build them. Before we run <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, a config file <code>myProject/rollup.config.js</code> should be created:</p>\n<pre><code class=\"lang-js\">// Responsible for looking for modules in `node_module` directory. For example,\n// if there is code `import 'echarts/lib/chart/line';`, the module file\n// `node_module/echarts/lib/chart/line.js` can be find by this plugin.\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// Responsible for compress code.\nimport uglify from 'rollup-plugin-uglify';\n// Support multi-language.\nimport ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // The entry file.\n input: './line.js',\n plugins: [\n nodeResolve(),\n ecLangPlugin({lang: 'en'}), // Use english\n // Remove the snippet in `__DEV__`, which mainly prints error log.\n uglify()\n ],\n output: {\n // Output file in the format of 'umd'.\n format: 'umd',\n // Output source map.\n sourcemap: true,\n // The path of the output bundle.\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>Then execute the following command in <code>myProject</code> directory to start the build:</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p><code>-c</code> indicate <code>rollup</code> to use <code>myProject/rollup.config.js</code> as the config file.</p>\n</blockquote>\n<p>The created bundle <code>myProject/lib/line.min.js</code> includes project code and part of echarts code that we requried. Now we create a web page <code>myProject/line.html</code> to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- Import the created bundle: -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/line.html</code> in a browser, we will get:</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"multi-language\">Multi-language</h2>\n<p>In the example above, we can notice that the label of the <code>toolbox</code> component is in English. Essentially any text can be customized by <code>echarts option</code>, but if we want to show label in a certain language by default, we have to specify the language while building the code.</p>\n<p>For example:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>It means that the pre-defined English text is used. Moreover, can be <code>--lang fi</code>.</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>It means that <code>myProject/my/langXX.js</code> is used to substitute <code>myProject/node_modules/echarts/lib/lang.js</code> while performing build. So we can customize text in our language in <code>myProject/my/langXX.js</code>. Notice, <code>-o</code> or <code>--output</code> must be specified in the approach.</p>\n<p>Besides, the same lang parameter can be pass to <code>echarts/build/rollup-plugin-ec-lang</code>.</p>\n"},"Use ECharts with webpack":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.</p>\n<h2 id=\"use-npm-to-install-echarts\">Use npm to install ECharts</h2>\n<p>Before <code>3.1.1</code> version, ECharts package on npm was maintained by third-party. Since <code>3.1.1</code>, ECharts and zrender on npm are maintained officially by <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> team.</p>\n<p>You can use the following command to install ECharts with npm.</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"include-echarts\">Include ECharts</h2>\n<p>ECharts and zrender installed by npm will be placed under <code>node_modules</code>. You can obtain echarts directly in project with <code>require('echarts')</code>.</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"include-echarts-charts-and-components-on-demand\">Include ECharts charts and components on demand</h2>\n<p>By default, <code>require('echarts')</code> returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.</p>\n<p>For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.</p>\n<pre><code class=\"lang-js\">// include ECharts main module\nvar echarts = require('echarts/lib/echarts');\n// include bar chart\nrequire('echarts/lib/chart/bar');\n// include tooltip and title component\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts introductory example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>Available modules see <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>The same goes for another popular packaging tools <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>, which will not be introduced again here. Using <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> to make a custom build of echarts is introduced in <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">Create Custom Build of ECharts</a></p>\n"},"Customized Chart Styles":{"type":["*"],"description":"<p>ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"drawing-nightingale-rose-chart\">Drawing Nightingale Rose Chart</h2>\n<p><a href=\"#Get%20Started%20with%20ECharts%20in%205%20minutes\">Getting started tutorial</a> introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need <code>xAxis</code>，<code>yAxis</code> either.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: 'Reference Page',\n type: 'pie',\n radius: '55%',\n data:[\n {value:400, name:'Searching Engine'},\n {value:335, name:'Direct'},\n {value:310, name:'Email'},\n {value:274, name:'Alliance Advertisement'},\n {value:235, name:'Video Advertisement'}\n ]\n }\n ]\n})\n</code></pre>\n<p>With the above code, we can create a simple pie chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Here, the value of <code>data</code> is not a single value, as that of the example in get started. Instead, it's an object containing <code>name</code> and <code>value</code>. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> for more information.</p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">Pie charts</a> of EChart can be made into Nightingale rose charts with <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> field.</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>Nightingale rose charts use radius to represent data value.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"configuring-shadow\">Configuring Shadow</h2>\n<p>Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by <a href=\"#series-pie.itemStyle\">itemStyle</a> in series.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // shadow size\n shadowBlur: 200,\n // horizontal offset of shadow\n shadowOffsetX: 0,\n // vertical offset of shadow\n shadowOffsetY: 0,\n // shadow color\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>The effect after added shadow is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Each <code>itemStyle</code> has <code>emphasis</code> as the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"dark-background-and-light-text\">Dark Background and Light Text</h2>\n<p>Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.</p>\n<p>Background is a global configurable object, so we can set it directly with <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a> of option.</p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>Text style can also be set globally in <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>.</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>On the other hand, we can also set them in <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a> of each series.</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>We also need to set line color of pie chart to be lighter.</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>Thus, we can get the following effect.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Similar to <code>itemStyle</code>, <code>label</code> and <code>labelLine</code> also have <code>emphasis</code> children.</p>\n<h2 id=\"setting-fan-colors\">Setting Fan Colors</h2>\n<p>Fan colors can be set in <code>itemStyle</code>:</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.</p>\n<p>Each fan's color can be set under <code>data</code>:</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through <a href=\"#option.html#visualMap\">visualMap</a>.</p>\n<pre><code class=\"lang-js\">visualMap: {\n // hide visualMap component; use lightness mapping only\n show: false,\n // mapping with min value at 80\n min: 80,\n // mapping with max value at 600\n max: 600,\n inRange: {\n // mapping lightness from 0 to 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>The final effect is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n"},"Overview of Style Customization":{"type":["*"],"description":"<p>This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Pallette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<p>Other article about styling can be check in <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a> and <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Theme</strong></p>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\">Examples page</a>, "Theme" can be selected, and view the result directly.</p>\n<p>Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named '<code>'light'</code> and <code>'dark'</code>. They can be used as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">Theme Builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<pre><code class=\"lang-js\">var xhr = new XMLHttpRequest();\n// Assume the theme name is "vintage".\nxhr.open('GET', 'xxx/xxx/vintage.json', true);\nxhr.onload = function () {\n var themeJSON = this.response;\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n // ...\n});\nxhr.send();\n</code></pre>\n<p>If a them is downloaded as a JS file, it will auto register itself:</p>\n<pre><code class=\"lang-js\">// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Palette</strong></p>\n<p>Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<pre><code class=\"lang-js\">option = {\n // Global palette:\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // A palette only work for the series:\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // A palette only work for the series:\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</strong></p>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href=\"option.html\" target=\"_blank\">option</a>, style related options can be set in various place, including <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>, <a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>, <a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>, <a href=\"option.html#series.label\" target=\"_blank\">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc., although they may occur in different place according to different series or components.</p>\n<p>There is another article for style setting, <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Style of emphasis state</strong></p>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> property. The options in <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> is the same as the ones for normal state, for example:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (visualMap component)</strong></p>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n"},"Loading and Updating of Asynchronous Data":{"type":["*"],"description":"<h2 id=\"asynchronous-loading\">Asynchronous Loading</h2>\n<p>Data in <a href=\"#getting-started\">Get started</a> is directly filled in <code>setOption</code> after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in <code>ECharts</code> is very easy. After initialization, you can pass in data and configuration item through <code>setOption</code> after data obtained through jQuery and other tools at any time.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// show title. legend and empty axis\nmyChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: []\n }]\n});\n\n// Asynchronous data loading \n$.get('data.json').done(function (data) {\n // fill in data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // find series by name\n name: 'Sales',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>For example: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>In ECharts, updating data need to find the corresponding series through <code>name</code>. In the above example, updating can be performed correctly according to series order if <code>name</code> is not defined. But in most cases, it is recommended to update data with series <code>name</code> information. </p>\n<h2 id=\"loading-animation\">Loading Animation</h2>\n<p>If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading. </p>\n<p>ECharts provides a simple loading animation by default. You only need <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> to show, and then use <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> to hide loading animation after data loading.</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>Effects are as followed: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"dynamic-data-updating\">Dynamic Data Updating</h2>\n<p>ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.</p>\n<p>All data updating are through <a href=\"#api.html#echartsInstance.setOption\">setOption</a>. You only need to get data as you wish, fill in data to <a href=\"#api.html#echartsInstance.setOption\">setOption</a> without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation. </p>\n<blockquote>\n<p>In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.</p>\n</blockquote>\n<p>See details in the following example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"Dataset":{"type":["*"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>Before ECharts 4, data was only able to declared in each series, for example:</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>This approach is easy to be understand and is flexible when some series needs special data definitions. But the shortcomings are also obvious: some data extra works are usually needed to split the original data to each series, and it not supports sharing data in different series, moreover, it is not good for encode.</p>\n<p>ECharts4 starts to provide <code>dataset</code> component, which brings benefits below:</p>\n<ul>\n<li>Benefit from <code>dataset</code>, we can follow the common methodology of data visualization: based on data, specify the mapping (via the option <a href=\"option.html#series.encode\" target=\"_blank\">encode</a>) from data to visual.</li>\n<li>Data can be managed and configured separately from other configurations.</li>\n<li>Data can be reused by different series and components.</li>\n<li>Support more common data format (like 2d-array, object-array), to avoid data transform works for users.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Get started</strong></p>\n<p>This is a simplest example of <code>dataset</code>:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare X axis, which is a category axis, mapping\n // to the first column by default.\n xAxis: {type: 'category'},\n // Declare Y axis, which is a value axis.\n yAxis: {},\n // Declare several series, each of them mapped to a\n // column of the dataset by default.\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>Or the common format object-array is also supported:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Here the declared `dimensions` is mainly for providing the order of\n // the dimensions, which enables ECharts to apply the default mapping\n // from dimensions to axes.\n // Alternatively, we can declare `series.encode` to specify the mapping,\n // which will be introduced later.\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic</strong></p>\n<p>In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.</p>\n<p>Generally, this mapping can be performed:</p>\n<ul>\n<li>Configure whether columns or rows of a dataset will mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. <code>'column'</code> is the default value.</li>\n<li>Configure the mapping rule from dimensions (a dimension means a column/row) to axes in coordinate system, tooltip, labels, color, symbol size, etc. This can be specified by <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> and <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> (if visual encoding is required). The example above does not give a mapping rule, so ECharts make default mapping by common sense: because x axis is a category axis, the first column is mapped to the x axis, and each series use each subsequent column in order.</li>\n</ul>\n<p>Let's illustrate them in detail below.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping by column or row</strong></p>\n<p>Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. The optional values are:</p>\n<ul>\n<li>'column': series are positioned on each columns of the dataset. Default value.</li>\n<li>'row': series are positioned on each row of the dataset.</li>\n</ul>\n<p>See the example below:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series is in the first cartesian (grid), and each\n // is mapped to a row.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series is in the second cartesian (grid), and each\n // is mapped to a column.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Dimension</strong></p>\n<p>Before introducing <code>encode</code>, we should clarify the concept of <code>dimension</code>.</p>\n<p>Most of common charts describe data in the format of "two-dimensions table" (note that the meaning of the word "dimension" in "two-dimension table" is not the same as the dimensions in ECharts. \bIn order not to be confusing, we use "2d-table", "2d-array" below). In the examples above, we use 2d-array to carry the 2d-table. When we set <code>seriesLayoutBy</code> as <code>'column'</code>, namely, mapping columns to series, each column is called a dimension, and each row is a data item. When we set <code>seriesLayoutBy</code> as <code>'row'</code>, namely, mapping rows to series, each row is called a dimension, and each column is a data item.</p>\n<p>Dimension can have its name to displayed on charts. Dimension name can be defined on the first row/column. Take the code above as an example, <code>'score'</code>、<code>'amount'</code>、<code>'product'</code> are dimension names, and data start from the second row. By default ECharts auto detect whether the first row/column of <code>dataset.source</code> is dimension name or data. Use can also set <code>dataset.sourceHeader</code> as <code>true</code> to mandatorily specify the first row/column is dimension name, or set as <code>false</code> to indicate the data start from the first row/column.</p>\n<p>The definitions of the dimensions can also be provided separately in <code>dataset.dimensions</code> or <code>series.dimensions</code>, where not only dimension name, but also dimension type can be specified:</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n // Each item can be object or string.\n {name: 'score'},\n // A string indicates the dimension name.\n 'amount',\n // Dimension type can be specified.\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // Dimensions declared in series will be adapted with higher priority.\n dimensions: [\n null, // Set as null means we dont want to set dimension name.\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>Generally, we do not need to set dimensions types, because it can be auto detected based on data by ECharts. But in some cases, for example, the data is empty, the detection might not be accurate, where dimension type can be set manually.</p>\n<p>The optional values of dimension types can be:</p>\n<ul>\n<li><code>'number'</code>: Normal data, default value.</li>\n<li><code>'ordinal'</code>: Represents string data like category data or text data. ECharts will auto detect them by default. They can be set manually if the detection fail.</li>\n<li><code>'time'</code>: Represents time data, where it is supported that parse time string to timestamp. For example, if users need to parse '2017-05-10' to timestamp, it should be set as <code>time</code> type. If the dimension is used on a time axis (<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> is <code>'time'</code>), it will be auto set to <code>time</code> type. The supported time string is listed in <a href=\"option.html#series.data\" target=\"_blank\">data</a>.</li>\n<li><code>'float'</code>: If set as <code>'float'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n<li><code>'int'</code>: If set as <code>'int'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic (encode)</strong></p>\n<p>Having the concept of dimension clarified, we can use <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> to map data to graphic:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // Map dimension "amount" to the X axis.\n x: 'amount',\n // Map dimension "product" to the Y axis.\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>There is an other example for <code>encode</code>:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (color, symbol, etc.)</strong></p>\n<p>We can use <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its <a href=\"option.html#visualMap\" target=\"_blank\">doc</a>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Default encoding</strong></p>\n<p>For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no <code>encode</code> option is specified. (If <code>encode</code> option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:</p>\n<ul>\n<li>In coordinate system (like cartesian(grid), polar):<ul>\n<li>If category axis (i.e., axis.type is <code>'category'</code>) exists, map the first column/row to the axis, and each series use a following column/row.</li>\n<li>If no category axis exists, and the coordinate system contains two axis (like X Y in cartesian), each series use two columns/rows, one for a axis.</li>\n</ul>\n</li>\n<li>If no coordinate system (like pie chart):<ul>\n<li>Use the first column/row as item name, and the second column/row as item value.</li>\n</ul>\n</li>\n</ul>\n<p>If the default rule does not meet the requirements, configure the <code>encode</code> yourself please.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Q & A</strong></p>\n<p>Q: How to map the third column to X axis, and map the fifth column to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n // Notice that the dimension index is based on 0,\n // thus the third column is dimensions[2].\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>Q: How to map the third row th X axis, and map the fifth row to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>Q: How to use the values in the second column in label.</p>\n<p>A:\nThe <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a> supports refer value in a certain dimension. For example:</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` means use the value in the "score" dimension.\n // `'{@[4]}'` means use the value in dimensions[4].\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>Q: How to display the second column and the third column in tooltip?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>Q: If there is no dimension name in dataset.source, how to give dimension name?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>Q: How to encode the fourth column in bubble size in bubble plot?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n // Use visualMap to perform visual encoding.\n visualMap: {\n show: false,\n dimension: 2, // Encode the third column.\n min: 2, // Min value is required in visualMap component.\n max: 15, // Max value is required in visualMap component.\n inRange: {\n // The range of bubble size, from 5 pixel to 60 pixel.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>Q: We have specified <code>encode</code>, but why it does not work?</p>\n<p>A: Maybe we can try to check typo, for example, the dimension name is <code>'Life Expectancy'</code>, be we typed <code>'Life Expectency'</code> in <code>encode</code> option.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Various formats in dataset</strong></p>\n<p>In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to <code>dataset.source</code>.</p>\n<blockquote>\n<p>Some csv tools can be used to export the table data to JSON, for example, <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> or <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a>.</p>\n</blockquote>\n<p>In common used data transfer formats in JavaScript, 2d-array is a good choice to carry table data, which has been illustrated in the examples above.</p>\n<p>Besides, 2d-array, <code>dataset</code> also support key-value format as follows, which is also commonly used. But notice, the option <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> is not supported in this format.</p>\n<pre><code class=\"lang-js\">dataset: [{\n // Row based key-value format, namely, object array, is a commonly used format.\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // Column based key-value format is also supported.\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Multiple datasets and references</strong></p>\n<p>Multiple datasets can be defined, and series can refer them by <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a>.</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n source: [...],\n }, {\n source: [...]\n }, {\n source: [...]\n }],\n series: [{\n // Use the third dataset.\n datasetIndex: 2\n }, {\n // Use the second dataset.\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts3 data setting approach (series.data) can be used normally</strong></p>\n<p>The data setting approach before ECharts4 can still be used normally. If a series has declared <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>, it will be used but not <code>dataset</code>.</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>In fact, setting data via <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is not deprecated and useful in some cases. For example, for some charts, like <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>, <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, <a href=\"option.html#series-lines\" target=\"_blank\">lines</a>, that do not apply table data, <code>dataset</code> is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> is probably needed to load data incrementally. <code>dataset</code> is not supported in the case.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Others</strong></p>\n<p>Currently, not all types of series support dataset. Series that support dataset includes:</p>\n<p><code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.</p>\n<p>More types of series will support dataset in our further work.</p>\n<p>Finally, this is an example, multiple series sharing one <code>dataset</code> and having interactions:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n\n"},"Add interaction to the chart component":{"type":["*"],"description":"<p>Echarts provides many interaction components besides chart. For example:</p>\n<p><code>legend component</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>title component</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>visualmap component</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>dataline component</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>Following is an example of <code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> as an introduction of how to add this kind of component.</p>\n<p><br></p>\n<h2>Introduction of data zoom component (dataZoom)</h2>\n\n<p>Data overview by default, and detail by requirement is a basic interaction need of data visualization. <code>dataZoom</code> component can implement this function in rectangular coordinate (<a href=\"option.html#grid\" target=\"_blank\">grid</a>) and polar coordinate (<a href=\"option.html#polar\" target=\"_blank\">polar</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> component operates <em>data window zoom</em> and <em>data window translation</em> on <code>axis</code>.</li>\n</ul>\n<blockquote>\n<p>Use <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a>, <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> to specify which axis <code>dataZoom</code> controls.</p>\n</blockquote>\n<ul>\n<li><p>Multiple <code>dataZoom</code> components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.</p>\n</li>\n<li><p>Operation principle of <code>dataZoom</code> achieves <em>data window zooming</em> through <em>data filtering</em>.</p>\n<p> Different settings of data filtering modes lead to different data window zooming effects, please see: <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>.</p>\n</li>\n<li><p>Setting of <code>dataZoom</code> data window range supports two formats currently:</p>\n<ul>\n<li><p>Percentage: see <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> and <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>.</p>\n</li>\n<li><p>Absolute value: see <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> and <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom component supports several child components: </strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">Inside data zoom component (dataZoomInside)</a>: inside coordinates.</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">Slider data zoom component (dataZoomSlider)</a>: has seperate slide option.</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">Select data zoom component (dataZoomSelect)</a>: full-screen box for zoom data area. Entrance and configuration item are both in <code>toolbox</code>.</p>\n</li>\n</ul>\n<p><br></p>\n<h2>Adding dataZoom component</h2>\n\n<p>First, only add dataZoom component to x-axis. Following examples shows the code.</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // This dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n series: [\n {\n type: 'scatter', // this is scatter chart\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>which will show the following result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the <code>option.dataZoom</code> above:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // this dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n },\n { // This dataZoom component controls x-axis by dafault\n type: 'inside', // this dataZoom component is dataZoom component of inside\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n ...\n}\n</code></pre>\n<p>Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>Following result can be seen:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n\n"},"Responsive Mobile-End":{"type":["*"],"description":"<p>ECharts works in DOM nodes with user defined width and height. ECharts <em>component</em> and <em>series</em> are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.</p>\n<p>Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.</p>\n<p>To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a>.</p>\n<p><br></p>\n<h2>Location and layout of ECharts components</h2>\n\n\n<p>Most <em>component</em> and <em>series</em> follow two locating methods: </p>\n<p><br>\n<strong>left/right/top/bottom/width/height locating method:</strong></p>\n<p>Each of those six parameters can be <em>absolute value</em> or <em>percentage</em> or <em>location description</em>.</p>\n<ul>\n<li><p>Absolute value</p>\n<p> in browser pixels (px); in form of <code>number</code> (no unit); e.g.: <code>{left: 23, height: 400}</code>.</p>\n</li>\n<li><p>Percentage</p>\n<p> to the width and height of DOM container; in form of <code>string</code>; e.g.: <code>{right: '30%', bottom: '40%'}</code>.</p>\n</li>\n<li><p>Location Description</p>\n<ul>\n<li>can be set to <code>left: 'center'</code>, for horizontally centering.</li>\n<li>can be set to <code>top: 'middle'</code>, for vertically centering.</li>\n</ul>\n</li>\n</ul>\n<p>The concept of these six parameters is similar to that in CSS: </p>\n<ul>\n<li>left: distance to left border of DOM container.</li>\n<li>right: distance to right border of DOM container.</li>\n<li>top: distance to top border of DOM container.</li>\n<li>bottom: distance to bottom border of DOM container.</li>\n<li>width: width.</li>\n<li>height: height.</li>\n</ul>\n<p>Two out of the three horizontal parameters, <code>left</code>, <code>right</code>, <code>width</code>, are enough to determine the component location. For example, <code>left</code> and <code>right</code>, or <code>right</code> and <code>width</code> can both determine component location and size.\nThe same goes for vertical paramters <code>top</code>, <code>bottom</code> and <code>height</code>.</p>\n<p><br>\n<strong>Locating method of <code>center</code> / <code>radius</code>: </strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> an array in form of <code>[x, y]</code>, in which <code>x</code> and <code>y</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n</li>\n<li><p><code>radius</code></p>\n<p> an array in form of <code>[innerRadius, outerRadius]</code>, in which <code>innerRadius</code> and <code>outerRadius</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n<p> Percentage location turns out to be very useful for responsive positioning.</p>\n</li>\n</ul>\n<p><br>\n<strong>Horizontal and vertical</strong></p>\n<p>Most of ECharts's long and narrow components (such as <code>legend</code>,<code>visualMap</code>,<code>dataZoom</code>,<code>timeline</code> and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.</p>\n<p>Setting of horizontal or vertical layout is usually with component or series's <code>orient</code> or <code>layout</code> option, which can be set to <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n<p><br>\n<strong>Compatibility with ECharts2: </strong></p>\n<p>Naming of <code>x/x2/y/y2</code> in ECharts2 is still compatible, as well as the newly added <code>left/right/top/bottom</code>. But <code>left/right/top/bottom</code> is recommended.</p>\n<p>To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: <code>left: 'right'</code>, <code>left: 'left'</code>, <code>top: 'bottom'</code>, <code>top: 'top'</code>, which are equal to: <code>right: 0</code>, <code>left: 0</code>, <code>bottom: 0</code>, <code>top: 0</code>, in a more normal expression.</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> provides the ability to be responsive with container size.</p>\n<p>As shown in the following example, you may drag <strong>the circle in bottom-right corner</strong> to see the legend and series change layout position and method with container size. </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>The following format should be followed if you need to set Media Query in option:</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // here defines base option\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // each rule of media query is defined here\n {\n query: {...}, // write rule here\n option: { // write options accordingly\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // the second rule\n option: { // the second option\n legend: {...},\n ...\n }\n },\n { // default with no rules,\n option: { // when all rules fail, use this option\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>In the above example, <code>baseOption</code> and every option in <code>media</code> are all <em>simple options</em>, which are regular options containing components and series. <code>baseOption</code> is always be used, while options of every will be merged with <code>chart.mergeOption()</code> when given <code>query</code> condition is satisfied with.</p>\n<p><strong>query: </strong></p>\n<p>A <code>query</code> is in the following format: </p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>Currently there are three supported attributes:<code>width</code>, <code>height</code>, <code>aspectRatio</code> (length-to-width ratio), each of which can add <code>min</code> or <code>max</code> as prefix. E.g., <code>minWidth: 200</code> stands for when width is greater than or equal to 200px. When two attributes are written together, it means <em>and</em> in Bool logic. For example, <code>{minWidth: 200, maxHeight: 300}</code> stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.</p>\n<p><strong>option: </strong></p>\n<p>Since option in <code>media</code> is <em>simple option</em>, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // when length-to-width ratio is less than 1\n },\n option: {\n legend: { // legend is placed in middle-bottom\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // horizontal layout of legend\n },\n series: [ // left and right layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // when container width is smaller than 500\n },\n option: {\n legend: {\n right: 10, // legend is placed in middle-right\n top: '15%',\n orient: 'vertical' // vertical layout\n },\n series: [ // top and bottom layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>Priority when multiple queries are satisfied: </strong></p>\n<p>Attention: When multiple <code>query</code> are satisfied at the same time, all of them will be merged with <code>mergeOption</code> and those are defined later will be merged later, thus provides them with higher priority.</p>\n<p><strong>Query by default: </strong></p>\n<p>If an item in <code>media</code> has no not <code>query</code>, then it means <em>default value</em>, which will be used when all other rules fail.</p>\n<p><strong>Pay attention when container size changes:</strong></p>\n<p>In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.</p>\n<p>But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one <code>query option</code>, then it should also appeared in other <code>query option</code>, or it will not be able to return to the original state. (<code>left/right/top/bottom/width/height</code> are not restricted to this rule.)</p>\n<p><strong><code>media</code> in <em>composite option</em> does not support merge</strong></p>\n<p>When <code>chart.setOption(rawOption)</code> for the second, third, fourth, fifth, and etc. times, if <code>rawOption</code> is <code>composite option</code> (which means it contains <code>media</code> list), then, the new <code>rawOption.media</code> list will not merge with the old <code>media</code>. instead, it will simply replace the option. Of course, <code>rawOption.baseOption</code> will still merge with the old option normally.</p>\n<p><br>\nFinally, let's see an example combining with timeline:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n\n"},"Visual Map of Data":{"type":["*"],"description":"<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.</p>\n<p>Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into <em>lines</em>, bar charts map data into <em>length</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:<br>\n<code>symbol</code>, <code>symbolSize</code><br>\n<code>color</code>, <code>opacity</code>, <code>colorAlpha</code>, <br>\n<code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></p>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<p><br></p>\n<h2>Data and Dimension</h2>\n\n<p>Data are usually stored in <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of <code>dataItem</code>s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {...}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {...}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ]\n}\n</code></pre>\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href=\"option.html#series-scatter\" target=\"_blank\">scatter charts</a> use radius to represent the third dimension.</p>\n<p><br></p>\n<h2>visualMap Component</h2>\n\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // can define multiple visualMap components at the same time\n { // the first visualMap component\n type: 'continuous', // defined as continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined as discrete visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">visualMapContinuous</a>：</p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">visualMapPiecewise</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>Piecewise visual map component has three types:</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>Equal division of continuous data: divide equally based on <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a>;</li>\n<li>User-defined division of continuous data: divide with range in <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a>;</li>\n<li>Discrete data (data in category type): divide with <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<strong>Configuration of visualMap mapping method</strong></p>\n<p>As we have introduced above, <code>visualMap</code> maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in <a href=\"#visualMap.dimension\">visualMap.dimension</a>) to be mapped to which visual elements (see in <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>).</p>\n<p>Example A:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data, or value[3], is mapped\n seriesIndex: 4, // map with the fourth series\n inRange: { // visual configuration items in selected range\n color: ['blue', '#121122', 'red'], // defines color list of mapping\n // The largest value will be mapped to 'red',\n // and others will be interpolated\n symbolSize: [30, 100] // the smallest value will be mapped to size of 30,\n // the largest to 100,\n // and others will be interpolated\n },\n outOfRange: { // visual configuration items out of selected range\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>Example B:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // visual configuration items in selected range\n colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color\n // original color may be selected from global color palette,\n // which is not concerned by visualMap component\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>For more information, please refer to <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>.</p>\n"},"Events and Actions in ECharts":{"type":["*"],"description":"<p>User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.</p>\n<p>Binding events in ECharts 3 is though <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // printing data name in console\n console.log(params.name);\n});\n</code></pre>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> event when toggling legend (Notice here, that <code>'legendselected'</code> event will not be triggered when toggling legend), triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> event when data zooming in some area.</p>\n<h2 id=\"mouse-events-handling\">Mouse Events Handling</h2>\n<p>ECharts support regular mouse events, which includes <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. Next let's see an example of opening Baidu search page when clicks a bar chart.</p>\n<pre><code class=\"lang-js\">// initialize ECharts instance based on prepared dom\nvar myChart = echarts.init(document.getElementById('main'));\n\n// data and configuration item of specific chart\nvar option = {\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// use specified configuration item and data to show chart\nmyChart.setOption(option);\n// handle click event and redirect to corresponding Baidu search page\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>All types of mouse events have a common parameter called <code>params</code>, which is an object that contains data information of the clicked chart, whose format is as followed:</p>\n<pre><code class=\"lang-js\">{\n // component name of clicked component\n // e.g., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (useful when componentType is 'series')\n // e.g., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in option.series (useful when componentType is 'series')\n seriesIndex: number,\n // series name (useful when componentType is 'series')\n seriesName: string,\n // data name, or category name\n name: string,\n // data index in input data array\n dataIndex: number,\n // raw input data item\n data: Object,\n // Some series, such as sankey or graph, maintains both nodeData and edgeData,\n // in which case, dataType is set to be 'node' or 'edge' to identify.\n // On the other hand, most other series have only one type of data,\n // where dataType is not needed.\n dataType: string,\n // input data value\n value: number|Array\n // color of component (useful when componentType is 'series')\n color: string\n}\n</code></pre>\n<p>How to know where the mouse clicked:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // clicked on markPoint\n if (params.seriesIndex === 5) {\n // clicked on a markPoint which belongs to a series indexed with 5\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked on an edge of the graph\n }\n else {\n // clicked on a node of the graph\n }\n }\n }\n});\n</code></pre>\n<p>Use <code>query</code> to call handler only on the graphic elements of the specified components:</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n}\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('click', {element: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method called.\n});\n</code></pre>\n<p>You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // present data distribution of a single bar through pie chart\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"interaction-events-with-components\">Interaction Events with Components</h2>\n<p>Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in <a href=\"api.html#events\" target=\"_blank\">events</a>.</p>\n<p>Below is example that listens to a legend toggling:</p>\n<pre><code class=\"lang-js\">// legend toggling triggers legendselectchanged event only\nmyChart.on('legendselectchanged', function (params) {\n // obtain selecting status of clicked legend\n var isSelected = params.selected[params.name];\n // print in console\n console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);\n // print all legend status\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"triggering-component-actions-through-code-in-echarts\">Triggering Component Actions through Code in ECharts</h2>\n<p>Actions like <code>'legendselectchanged'</code> mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.</p>\n<p>ECharts 2.x triggers actions through <code>myChart.component.tooltip.showTip</code>, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through <code>myChart.dispatchAction({ type: '' })</code>, which manages all actions in a uniformed way, and may record user's event path when need.</p>\n<p>Frequently used actions and the parameters are listed in <a href=\"api.html#action\" target=\"_blank\">action</a>.</p>\n<p>Below displays how to highlight each sector of pie chart in turn through <code>dispatchAction</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"An Example: Implement Dragging":{"type":["*"],"description":"<p>This is a tiny example, introducing how to implement dragging of graphic elements in echarts. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p>\n<p><br></p>\n<h2>[ Part 1 ] Implement basic dragging</h2>\n\n<p>First of all, we create a basic <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">line chart (line series)</a>:</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n</code></pre>\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<pre><code class=\"lang-js\">// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> is used, which is the reversed process of <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>[ Part 2 ] Add tooltip component</h2>\n\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // Means disable default "show/hide rule".\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // Customize "show/hide rule", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>The API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> is used to show/hide tooltip content, where actions <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a> and <a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a> is dispatched.</p>\n<p><br></p>\n<h2>[ Part 3 ] Full code</h2>\n\n<p>Full code is shown as follow:</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n"},"Custom Series":{"type":["*"],"description":"<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is a type of series, which enable develpers to customize graphic elements rendering and generate new types of chart.</p>\n<p>Why echarts supports <code>custom series</code>? There are endless chart types in the world of data visualization, which are not enumerable. Thus only most common used chart types are built-in supported in echarts. For other chart types, it is necessary to provide an approach to make new types of chart for developers. This approach should be as simple as possible, which had better not to bothered developers with some details of implementation, such as creating and deleting graphic elements, transition animation, tooltip supporting, working with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a> or <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap\" target=\"_blank\">visualMap</a>. Having considered the factors above, a solution <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is published.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p>Let's begin the tutorial.</p>\n<p><br></p>\n<h2>(I) The method <code>renderItem</code></h2>\n\n<p>The snippet of graphic elements rendering should be written in <code>renderItem</code> method my developers. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>In the rendering phase of echarts workflow, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is called respectively for each <code>dataItem</code> in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.data\" target=\"_blank\">series.data</a>. <code>renderItem</code> is responsible for build a group of definitions of graphic elements, including graphic type, size, location, style, etc. echarts will then build graphic elements according to those definitions. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // This method will be called for each dataItem repectively.\n // Notice: it does not ensure that called according to the order\n // of `dataItem`.\n\n // Some processes, such as coordinate conversion.\n // `api.value(0)` is used to retrieve the value on the first\n // dimension in the current `dataItem`.\n var categoryIndex = api.value(0);\n // `api.coord(...)` is used to convert data values to pixel values,\n // will are necessary for graphic elements rendering.\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // `api.size(...)` is used to calculate the pixel size corresponding to\n // the a value range that the length is 1 on Y axis.\n var height = api.size([0, 1])[1] * 0.6;\n\n // The property `shape` incicates the location and size of thsi\n // element.\n // `echarts.graphic.clipRectByRect` is used for clipping the\n // rectangular when it overflow the bounding box of the current\n // coordinate system (cartesian).\n // If the rect is totally clipped, returns undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // position and location of the rectangular.\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // Bounding box of the current cooridinate system (cartesian).\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n })\n\n // Returns definitions for the current `dataItem`.\n return rectShape && {\n // 'rect' indicates that the graphic element is rectangular.\n // Can also be 'circle', 'sector', 'polygon', ...\n type: 'rect',\n shape: rectShape,\n // `api.style(...)` is used to obtain style settings, which\n // includes itemStyle settings in optino and the result of\n // visual mapping.\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // The first dataItem.\n [53, 31, 21, 56], // The second dataItem.\n [71, 33, 10, 20], // The third dataItem.\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：provides info about the current series (such as <code>seriesIndex</code>、<code>dataIndex</code>, etc.) and data (such as <code>dataIndex</code>, <code>dataIndexInside</code>, etc.) and coordinate system (such as location and size of bounding box of the current coordinate system)</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a> provides some methods to developers (such as <code>api.value()</code>, <code>api.coord()</code>).</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> method should return definitions of graphic elements for the current <code>dataItem</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p>Having <code>renderItem</code> provided, 90% of the work of creating custom series has been accomplished. The rest of this work is to refine and polish them.</p>\n<p><br></p>\n<h2>(II) Make the extent of axes fit the data</h2>\n\n<p>There is axes in some coordinate systems, such as <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#polar\" target=\"_blank\">polar</a>. The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>, developers should specify that which dimensions correspond to <code>x</code> axis and which to <code>y</code> axis use the property <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // `dim1` and `dim2` correspond to `x` axis.\n x: [1, 2],\n // `dim0` corresponds to `y` axis.\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>(III) Set tooltip content</h2>\n\n<p>Of course <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> can be used to define the content in tooltip. But it is easier to do that by setting <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a> and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // `dim2` and `dim3` will displayed in tooltip.\n tooltip: [2, 3]\n },\n // `dim2` is named as "Age" and `dim3` is named as "Satisfaction".\n dimensions: [null, null, 'Age', 'Satisfaction'],\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ],\n [ 53, 31, 21, 56 ],\n [ 71, 33, 10, 20 ],\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>Several other issues about <code>custom series</code> are introduced below.</p>\n<p><br></p>\n<h2>(IV) Shape clipping when overflow the coordinates area</h2>\n\n<p>When use <code>custom series</code> with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p>In the example above, <code>dim</code> and <code>dim2</code> corresponds to <code>x</code> axis, and the <code>dataZoom</code> component constrols the data window of <code>x</code> axis. If part of a <code>dataItem</code> is overflow the extent of <code>x</code> axis (the value on <code>dim1</code> is overflow and the value on <code>dim2</code> is not) while zooming, the <code>dataItem</code> will not be filtered if <code>dataZoom.filterMode = 'weakFilter'</code> set. Thus the <code>dataItem</code> can be still rendered (usually be partially rendered by using <code>echarts.graphic.clipRectByRect</code> to clip the exceeding part).\nSee the example mentioned above <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a>.</p>\n<p><br></p>\n<p><br></p>\n<h2>(V) About dataIndex</h2>\n\n\n<p>Developers had better notice that in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> <code>dataIndexInside</code> and <code>dataIndex</code> is different:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br></p>\n<h2>(VI) Event listener</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>(VII) Custom vector shapes</h2>\n\n\n<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> is supported, which enables to use shapes that are created in vector tool. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>, and examples: <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon\" target=\"_blank\">icons</a>, <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p><br></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More examples about custom series</a></strong></p>\n"},"Rich Text":{"type":["*"],"description":"<p>Rich text can be used in labels of series, axis or other components. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>More examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.</p>\n<p>Since v3.7, rich text has been supported:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fregments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the begining, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text Fregment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Options about Text</strong></p>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fregment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fregment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fregment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fregment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fregment in <code>rich</code> property. For example, <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this fregment}'\n '{b|Style "b" is applied to this fregment}This fregment use default style{x|use style "x"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fregments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Basic Styles of Text, Text Block and Text Fragment</strong></p>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fregment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Position</strong></p>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href=\"option.html\" target=\"_blank\">option doc</a>.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Rotation</strong></p>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p><a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> and<a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Layout and Alignment of Text Fregment</strong></p>\n<p>To understand the layout rule, every text fregment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fregment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fregment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>'\\n'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fregment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fregments. <code>lineHeight</code> of a text fregment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fregment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fregments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>'bottom'</code>: The bottom edge of the text fregment sticks to the bottom edge of the line.</li>\n<li><code>'top'</code>: The top edge of the text fregment sticks to the top edge of the line.</li>\n<li><code>'middle'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fregment can be placed in each line, where the horizontal position of text fregments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fregments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li>\n<li>Secondly, place text fregments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li>\n<li>Finally, the text fregments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fregment:</p>\n<ul>\n<li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fregment box.</li>\n<li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fregment box.</li>\n<li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fregment box.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Effects: Icon, Horizontal Rule, Title Block, Simple Table</strong></p>\n<p>See example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n</code></pre>\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<pre><code class=\"lang-js\">// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>Simple table can be implemented by specify the same width to text fregments that are in the same column of different lines. See the <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">example</a> at the mentioned above.</p>\n"},"Server-side Rendering":{"type":["*"],"description":"<p>ECharts can be rendered at server-side. For example, the thumbnails in the <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>, <a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>, <a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>, <a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>, <a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"Render by Canvas or SVG":{"type":["*"],"description":"<p>Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.</p>\n<p>ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v3.8</a> we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">renderer</a> as <code>'canvas'</code> or <code>'svg'</code> when initailizing a chart instance.</p>\n<blockquote>\n<p>That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">zender</a>, where they are implemented as a Canvas renderer and a alternative SVG renderer.</p>\n</blockquote>\n<h2 id=\"how-to-make-a-choice-\">How to make a choice?</h2>\n<p>Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=lines-bmap-effect\" target=\"_blank\">special visual effect</a>. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg-en&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.</p>\n<p>How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.</p>\n<ul>\n<li>If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.</li>\n<li>If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.<ul>\n<li>If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">liquidfill</a>, the SVG renderer probably gives a better performance.</li>\n<li>If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.</li>\n</ul>\n</li>\n</ul>\n<p>Therefore <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">feedback</a> of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.</p>\n<p>Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.</p>\n<h2 id=\"how-to-use-specify-a-renderer-\">How to use specify a renderer?</h2>\n<p>ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.</p>\n<ul>\n<li>In the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">pre-build</a> of ECharts, the SVG renderer has been included in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.common.min.js\" target=\"_blank\">common version</a> and <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.min.js\" target=\"_blank\">complete version</a>. But not in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.simple.min.js\" target=\"_blank\">simple version</a>.</li>\n<li>If <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">build ECharts online</a>, the checkbox "SVG 渲染" should be checked.</li>\n<li>If <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">build ECharts offline</a>, the module of the SVG renderer should be imported:</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>Then wen can specify renderer by <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">parameter</a>:</p>\n<pre><code class=\"lang-js\">// Use the Canvas renderer (default).\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// which is equal to:\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n\n// Use the SVG renderer.\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"Supporting ARIA in Charts":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: 'Source of user access to a site',\n x: 'center'\n },\n series: [\n {\n Name: 'access source',\n type: 'pie',\n data: [\n { value: 335, name: 'direct access' },\n { value: 310, name: 'mail marketing' },\n { value: 234, name: 'union ad' },\n { value: 135, name: 'video ad' },\n { value: 1548, name: 'search engine' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates.</p>\n<p>Please refer to <a href=\"option.html#aria\" target=\"_blank\">ARIA option</a> for more detail.</p>\n"}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"Get Started with ECharts in 5 minutes":{"type":["*"],"description":"<h2 id=\"installing-echarts\">Installing ECharts</h2>\n<p>First, install ECharts using one of the following methods:</p>\n<ul>\n<li><p>The <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">official download page</a>, has different builds for most common use cases. If you would like to include all packages, you can download <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">the full minified version</a>.</p>\n</li>\n<li><p>From the latest <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> release, you can find the latest version of echarts in <code>dist</code> directory of the unzipped files.</p>\n</li>\n<li><p>Using npm: <code>npm install echarts --save</code>. <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Use%20ECharts%20with%20webpack\" target=\"_blank\">Using ECharts with webpack</a></p>\n</li>\n<li><p>Using the <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">online build tool</a> (Currently available in Chinese only).</p>\n</li>\n</ul>\n<h2 id=\"including-echarts\">Including ECharts</h2>\n<p>ECharts 3 no longer requires using AMD to load packages, and the AMD loader is no longer included in ECharts. Instead, ECharts should be included using a traditional <code><script></code> tag:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- including ECharts file -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"draw-a-simple-chart\">Draw a simple chart</h2>\n<p>Before drawing charts, we need to prepare a DOM container with width and height for ECharts.</p>\n<pre><code><body>\n <!-- preparing a DOM with width and height for ECharts -->\n <div id="main" style="width:600px; height:400px;"></div>\n</body>\n</code></pre><p>Then we can initialize an ECharts instance using <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a>, and create a simple bar chart with <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a>. Below is the complete code.</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- including ECharts file -->\n <script src="echarts.js"></script>\n</head>\n<body>\n <!-- prepare a DOM container with width and height -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // based on prepared DOM, initialize echarts instance\n var myChart = echarts.init(document.getElementById('main'));\n\n // specify chart configuration item and data\n var option = {\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // use configuration item and data specified to show chart\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>You've made your first chart!</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>For more examples, go to the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a></p>\n"},"Create Custom Build of ECharts":{"type":["*"],"description":"<p>In most cases, ECharts builds can be downloaded from the <a href=\"/en/download.html\" target=\"_blank\">download page</a> or from the <code>echarts/dist</code> directory in our <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub project</a>, where\nthese pre-builds are provided:</p>\n<ul>\n<li>Complete verion: <code>echarts/dist/echarts.js</code>, including all charts and components (see <code>echarts/echarts.all.js</code> for detail), but has maximum file size.</li>\n<li>Common version: <code>echarts/dist/echarts.common.js</code>, including common charts and components (see <code>echarts/echarts.common.js</code> for detail), moderate file size.</li>\n<li>Simple version: <code>echarts/dist/echarts.simple.js</code>, including a smaller subset of the most common charts and components (see <code>echarts/echarts.simple.js</code> for detail), small file size.</li>\n</ul>\n<p>We can also build echarts ourselves, which enables to only include the charts and components you needed. You can customize your ECharts build by using one of these approaches:</p>\n<ul>\n<li><a href=\"/en/builder.html\" target=\"_blank\">Online custom build tool</a> is relatively convenient.</li>\n<li>The script <code>echarts/build/build.js</code> found in the project is flexible for module selecting, and supports multi-language builds</li>\n<li>Build ECharts and your project directly by using tools such as <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>, <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a></li>\n</ul>\n<p>There are some examples to illustrate the latter two approaches below.</p>\n<h2 id=\"prepare-create-our-project-and-install-echarts\">Prepare: create our project and install echarts</h2>\n<p>Create a sample project using the command line</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>Then in the <code>myProject</code> directory, initialize <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> environment and install echarts (assume that <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> has been installed):</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>The installed echarts is in the <code>myProject/node_modules</code> directory, which can be used in our project directly. For example:</p>\n<p>Use ES Module:</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>Use CommonJS:</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>Next, we just describe our examples in ES Module way.</p>\n<h2 id=\"create-custom-build-by-echarts-build-build-js\">Create custom build by <code>echarts/build/build.js</code></h2>\n<p>In this example, for minimizing file size, we will build a echarts bundle with only pie chart included, and create a web page to show it.</p>\n<p>echarts has provided a script <code>echarts/build/build.js</code> as a build tool (<a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> is required to execute it). Now we can use the command below in the <code>myProject</code> directory to check its help info:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>These options can be used in this example:</p>\n<ul>\n<li><code>-i</code>: Entry file of the echarts code. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>-o</code>: The bundle file path. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>--min</code>: Whether to compress file (not by default), and remove the code that is for printing error and warning info.</li>\n<li><code>--lang <language shortcut or file path></code>: Whether to use the specified language (Chinese by default). For example: <code>--lang en</code> means using English, <code>--lang my/langXX.js</code> means using <code><cwd>/my/langXX.js</code> to substitute <code>echarts/lib/lang.js</code> while buiding.</li>\n<li><code>--sourcemap</code>: Whether to output source map, which is useful in debug.</li>\n<li><code>--format</code>: The format of output. Can be <code>'umb'</code>(default), <code>'amd'</code>, <code>'iife'</code>, <code>'cjs'</code>, <code>'es'</code>.</li>\n</ul>\n<p>Now we want to create a echarts bundle that only supports pie chart, we should firstly create an entry file (say <code>myProject/echarts.custom.js</code>) to import modules we need:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts and export them.\nexport * from 'echarts/src/echarts';\n// Import pie chart.\nimport 'echarts/src/chart/pie';\n// In this case, modules in either `echarts/src` or `echarts/lib`\n// can be imported (but should not be mixed). See\n// "Use `echarts/lib/**` or `echarts/src/**`" below.\n</code></pre>\n<p>Then we can use command below in <code>myProject</code> directory to build the bundle:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>Now the bundle <code>myProject/lib/echarts.custom.min.js</code> has been created. Then we can create a web page (say <code>myProject/pie.html</code>) to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- import the bundle `lib/echarts.custom.js`. -->\n <script src="lib/echarts.custom.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // Create a pie chart:\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/pie.html</code> in a browser, we can see the pie chart:</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"modules-that-are-permitted-to-be-imported\">Modules that are permitted to be imported</h2>\n<p>All of the permitted modules are declared in <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> and <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a>. Other modules in the source code of echarts and zrender <strong>SHOULD NOT BE IMPORTED</strong>, because they are inner modules, whose interfaces and functionalities may be modified in the subsequent upgrades of echarts.</p>\n<h2 id=\"use-echarts-lib-or-echarts-src-\">Use <code>echarts/lib/**</code> or <code>echarts/src/**</code>?</h2>\n<ul>\n<li>If intending to import part of echarts modules in your project and build yourself, only <code>echarts/lib/**</code> can be used, <code>echarts/src/**</code> should not be used.</li>\n<li>If using <code>echarts/build/build.js</code> to make a bundle, either <code>echarts/lib/**</code> or <code>echarts/src/**</code> can be used (should not be mixed), where <code>echarts/src/**</code> brings smaller bundle size a little.</li>\n</ul>\n<blockquote>\n<p>Reason: currently, <code>echarts/src/**</code> is the source code that using ES Module, and they are transpiled to CommonJS code and placed in <code>echarts/lib/**</code>. (This transformation is for backward compatible with old version of NodeJS and webpack that do not support ES Module.)\nHistorically, echarts extensions and user projects have been using the package path <code>echarts/lib/**</code>. So it should not be changed, otherwise, mixed using both <code>echarts/src/**</code> and <code>echarts/lib/**</code> will generate two echarts namespace and bring some problems. But it is not an issue when using <code>echarts/build/build.js</code> to create a bundle, where ES modules in <code>echarts/src/**</code> can be analyzed statically for smaller bundle size.</p>\n</blockquote>\n<h2 id=\"build-echarts-and-our-project-directly-by-rollup\">Build echarts and our project directly by rollup</h2>\n<p>Now we have known that how to create custom build by <code>echarts/build/build.js</code>. Alternatively, we can bundle echarts and our project directly by the tool like <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> or <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>. In some project, this approach is required. Next we only go with <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, because <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> and <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> are in the similar way.</p>\n<p>Firstly install <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> in <code>myProject</code> directory:</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>Then we create a project JS file <code>myProject/line.js</code> for line chart rendering:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts.\nimport * as echarts from 'echarts/lib/echarts';\n// Import line chart.\nimport 'echarts/lib/chart/line';\n// Import components of tooltip, title and toolbox.\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// Render line chart and components.\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>The created module <code>myProject/line.js</code> can not work directly in the browsers that do not support ES Module. So we need to build them. Before we run <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, a config file <code>myProject/rollup.config.js</code> should be created:</p>\n<pre><code class=\"lang-js\">// Responsible for looking for modules in `node_module` directory. For example,\n// if there is code `import 'echarts/lib/chart/line';`, the module file\n// `node_module/echarts/lib/chart/line.js` can be find by this plugin.\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// Responsible for compress code.\nimport uglify from 'rollup-plugin-uglify';\n// Support multi-language.\nimport ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // The entry file.\n input: './line.js',\n plugins: [\n nodeResolve(),\n ecLangPlugin({lang: 'en'}), // Use english\n // Remove the snippet in `__DEV__`, which mainly prints error log.\n uglify()\n ],\n output: {\n // Output file in the format of 'umd'.\n format: 'umd',\n // Output source map.\n sourcemap: true,\n // The path of the output bundle.\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>Then execute the following command in <code>myProject</code> directory to start the build:</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p><code>-c</code> indicate <code>rollup</code> to use <code>myProject/rollup.config.js</code> as the config file.</p>\n</blockquote>\n<p>The created bundle <code>myProject/lib/line.min.js</code> includes project code and part of echarts code that we requried. Now we create a web page <code>myProject/line.html</code> to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- Import the created bundle: -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/line.html</code> in a browser, we will get:</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"multi-language\">Multi-language</h2>\n<p>In the example above, we can notice that the label of the <code>toolbox</code> component is in English. Essentially any text can be customized by <code>echarts option</code>, but if we want to show label in a certain language by default, we have to specify the language while building the code.</p>\n<p>For example:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>It means that the pre-defined English text is used. Moreover, can be <code>--lang fi</code>.</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>It means that <code>myProject/my/langXX.js</code> is used to substitute <code>myProject/node_modules/echarts/lib/lang.js</code> while performing build. So we can customize text in our language in <code>myProject/my/langXX.js</code>. Notice, <code>-o</code> or <code>--output</code> must be specified in the approach.</p>\n<p>Besides, the same lang parameter can be pass to <code>echarts/build/rollup-plugin-ec-lang</code>.</p>\n"},"Use ECharts with webpack":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.</p>\n<h2 id=\"use-npm-to-install-echarts\">Use npm to install ECharts</h2>\n<p>Before <code>3.1.1</code> version, ECharts package on npm was maintained by third-party. Since <code>3.1.1</code>, ECharts and zrender on npm are maintained officially by <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> team.</p>\n<p>You can use the following command to install ECharts with npm.</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"include-echarts\">Include ECharts</h2>\n<p>ECharts and zrender installed by npm will be placed under <code>node_modules</code>. You can obtain echarts directly in project with <code>require('echarts')</code>.</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"include-echarts-charts-and-components-on-demand\">Include ECharts charts and components on demand</h2>\n<p>By default, <code>require('echarts')</code> returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.</p>\n<p>For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.</p>\n<pre><code class=\"lang-js\">// include ECharts main module\nvar echarts = require('echarts/lib/echarts');\n// include bar chart\nrequire('echarts/lib/chart/bar');\n// include tooltip and title component\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts introductory example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>Available modules see <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>The same goes for another popular packaging tools <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>, which will not be introduced again here. Using <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> to make a custom build of echarts is introduced in <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">Create Custom Build of ECharts</a></p>\n"},"Customized Chart Styles":{"type":["*"],"description":"<p>ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"drawing-nightingale-rose-chart\">Drawing Nightingale Rose Chart</h2>\n<p><a href=\"#Get%20Started%20with%20ECharts%20in%205%20minutes\">Getting started tutorial</a> introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need <code>xAxis</code>，<code>yAxis</code> either.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: 'Reference Page',\n type: 'pie',\n radius: '55%',\n data:[\n {value:400, name:'Searching Engine'},\n {value:335, name:'Direct'},\n {value:310, name:'Email'},\n {value:274, name:'Alliance Advertisement'},\n {value:235, name:'Video Advertisement'}\n ]\n }\n ]\n})\n</code></pre>\n<p>With the above code, we can create a simple pie chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Here, the value of <code>data</code> is not a single value, as that of the example in get started. Instead, it's an object containing <code>name</code> and <code>value</code>. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> for more information.</p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">Pie charts</a> of EChart can be made into Nightingale rose charts with <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> field.</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>Nightingale rose charts use radius to represent data value.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"configuring-shadow\">Configuring Shadow</h2>\n<p>Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by <a href=\"#series-pie.itemStyle\">itemStyle</a> in series.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // shadow size\n shadowBlur: 200,\n // horizontal offset of shadow\n shadowOffsetX: 0,\n // vertical offset of shadow\n shadowOffsetY: 0,\n // shadow color\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>The effect after added shadow is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Each <code>itemStyle</code> has <code>emphasis</code> as the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"dark-background-and-light-text\">Dark Background and Light Text</h2>\n<p>Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.</p>\n<p>Background is a global configurable object, so we can set it directly with <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a> of option.</p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>Text style can also be set globally in <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>.</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>On the other hand, we can also set them in <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a> of each series.</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>We also need to set line color of pie chart to be lighter.</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>Thus, we can get the following effect.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Similar to <code>itemStyle</code>, <code>label</code> and <code>labelLine</code> also have <code>emphasis</code> children.</p>\n<h2 id=\"setting-fan-colors\">Setting Fan Colors</h2>\n<p>Fan colors can be set in <code>itemStyle</code>:</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.</p>\n<p>Each fan's color can be set under <code>data</code>:</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through <a href=\"#option.html#visualMap\">visualMap</a>.</p>\n<pre><code class=\"lang-js\">visualMap: {\n // hide visualMap component; use lightness mapping only\n show: false,\n // mapping with min value at 80\n min: 80,\n // mapping with max value at 600\n max: 600,\n inRange: {\n // mapping lightness from 0 to 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>The final effect is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n"},"Overview of Style Customization":{"type":["*"],"description":"<p>This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Pallette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<p>Other article about styling can be check in <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a> and <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Theme</strong></p>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\">Examples page</a>, "Theme" can be selected, and view the result directly.</p>\n<p>Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named '<code>'light'</code> and <code>'dark'</code>. They can be used as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">Theme Builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<pre><code class=\"lang-js\">var xhr = new XMLHttpRequest();\n// Assume the theme name is "vintage".\nxhr.open('GET', 'xxx/xxx/vintage.json', true);\nxhr.onload = function () {\n var themeJSON = this.response;\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n // ...\n});\nxhr.send();\n</code></pre>\n<p>If a them is downloaded as a JS file, it will auto register itself:</p>\n<pre><code class=\"lang-js\">// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Palette</strong></p>\n<p>Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<pre><code class=\"lang-js\">option = {\n // Global palette:\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // A palette only work for the series:\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // A palette only work for the series:\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</strong></p>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href=\"option.html\" target=\"_blank\">option</a>, style related options can be set in various place, including <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>, <a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>, <a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>, <a href=\"option.html#series.label\" target=\"_blank\">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc., although they may occur in different place according to different series or components.</p>\n<p>There is another article for style setting, <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Style of emphasis state</strong></p>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> property. The options in <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> is the same as the ones for normal state, for example:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (visualMap component)</strong></p>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n"},"Loading and Updating of Asynchronous Data":{"type":["*"],"description":"<h2 id=\"asynchronous-loading\">Asynchronous Loading</h2>\n<p>Data in <a href=\"#getting-started\">Get started</a> is directly filled in <code>setOption</code> after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in <code>ECharts</code> is very easy. After initialization, you can pass in data and configuration item through <code>setOption</code> after data obtained through jQuery and other tools at any time.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// show title. legend and empty axis\nmyChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: []\n }]\n});\n\n// Asynchronous data loading \n$.get('data.json').done(function (data) {\n // fill in data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // find series by name\n name: 'Sales',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>For example: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>In ECharts, updating data need to find the corresponding series through <code>name</code>. In the above example, updating can be performed correctly according to series order if <code>name</code> is not defined. But in most cases, it is recommended to update data with series <code>name</code> information. </p>\n<h2 id=\"loading-animation\">Loading Animation</h2>\n<p>If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading. </p>\n<p>ECharts provides a simple loading animation by default. You only need <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> to show, and then use <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> to hide loading animation after data loading.</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>Effects are as followed: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"dynamic-data-updating\">Dynamic Data Updating</h2>\n<p>ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.</p>\n<p>All data updating are through <a href=\"#api.html#echartsInstance.setOption\">setOption</a>. You only need to get data as you wish, fill in data to <a href=\"#api.html#echartsInstance.setOption\">setOption</a> without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation. </p>\n<blockquote>\n<p>In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.</p>\n</blockquote>\n<p>See details in the following example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"Dataset":{"type":["*"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>Before ECharts 4, data was only able to declared in each series, for example:</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>This approach is easy to be understand and is flexible when some series needs special data definitions. But the shortcomings are also obvious: some data extra works are usually needed to split the original data to each series, and it not supports sharing data in different series, moreover, it is not good for encode.</p>\n<p>ECharts4 starts to provide <code>dataset</code> component, which brings benefits below:</p>\n<ul>\n<li>Benefit from <code>dataset</code>, we can follow the common methodology of data visualization: based on data, specify the mapping (via the option <a href=\"option.html#series.encode\" target=\"_blank\">encode</a>) from data to visual.</li>\n<li>Data can be managed and configured separately from other configurations.</li>\n<li>Data can be reused by different series and components.</li>\n<li>Support more common data format (like 2d-array, object-array), to avoid data transform works for users.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Get started</strong></p>\n<p>This is a simplest example of <code>dataset</code>:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare X axis, which is a category axis, mapping\n // to the first column by default.\n xAxis: {type: 'category'},\n // Declare Y axis, which is a value axis.\n yAxis: {},\n // Declare several series, each of them mapped to a\n // column of the dataset by default.\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>Or the common format object-array is also supported:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Here the declared `dimensions` is mainly for providing the order of\n // the dimensions, which enables ECharts to apply the default mapping\n // from dimensions to axes.\n // Alternatively, we can declare `series.encode` to specify the mapping,\n // which will be introduced later.\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic</strong></p>\n<p>In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.</p>\n<p>Generally, this mapping can be performed:</p>\n<ul>\n<li>Configure whether columns or rows of a dataset will mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. <code>'column'</code> is the default value.</li>\n<li>Configure the mapping rule from dimensions (a dimension means a column/row) to axes in coordinate system, tooltip, labels, color, symbol size, etc. This can be specified by <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> and <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> (if visual encoding is required). The example above does not give a mapping rule, so ECharts make default mapping by common sense: because x axis is a category axis, the first column is mapped to the x axis, and each series use each subsequent column in order.</li>\n</ul>\n<p>Let's illustrate them in detail below.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping by column or row</strong></p>\n<p>Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. The optional values are:</p>\n<ul>\n<li>'column': series are positioned on each columns of the dataset. Default value.</li>\n<li>'row': series are positioned on each row of the dataset.</li>\n</ul>\n<p>See the example below:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series is in the first cartesian (grid), and each\n // is mapped to a row.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series is in the second cartesian (grid), and each\n // is mapped to a column.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Dimension</strong></p>\n<p>Before introducing <code>encode</code>, we should clarify the concept of <code>dimension</code>.</p>\n<p>Most of common charts describe data in the format of "two-dimensions table" (note that the meaning of the word "dimension" in "two-dimension table" is not the same as the dimensions in ECharts. \bIn order not to be confusing, we use "2d-table", "2d-array" below). In the examples above, we use 2d-array to carry the 2d-table. When we set <code>seriesLayoutBy</code> as <code>'column'</code>, namely, mapping columns to series, each column is called a dimension, and each row is a data item. When we set <code>seriesLayoutBy</code> as <code>'row'</code>, namely, mapping rows to series, each row is called a dimension, and each column is a data item.</p>\n<p>Dimension can have its name to displayed on charts. Dimension name can be defined on the first row/column. Take the code above as an example, <code>'score'</code>、<code>'amount'</code>、<code>'product'</code> are dimension names, and data start from the second row. By default ECharts auto detect whether the first row/column of <code>dataset.source</code> is dimension name or data. Use can also set <code>dataset.sourceHeader</code> as <code>true</code> to mandatorily specify the first row/column is dimension name, or set as <code>false</code> to indicate the data start from the first row/column.</p>\n<p>The definitions of the dimensions can also be provided separately in <code>dataset.dimensions</code> or <code>series.dimensions</code>, where not only dimension name, but also dimension type can be specified:</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n // Each item can be object or string.\n {name: 'score'},\n // A string indicates the dimension name.\n 'amount',\n // Dimension type can be specified.\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // Dimensions declared in series will be adapted with higher priority.\n dimensions: [\n null, // Set as null means we dont want to set dimension name.\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>Generally, we do not need to set dimensions types, because it can be auto detected based on data by ECharts. But in some cases, for example, the data is empty, the detection might not be accurate, where dimension type can be set manually.</p>\n<p>The optional values of dimension types can be:</p>\n<ul>\n<li><code>'number'</code>: Normal data, default value.</li>\n<li><code>'ordinal'</code>: Represents string data like category data or text data. ECharts will auto detect them by default. They can be set manually if the detection fail.</li>\n<li><code>'time'</code>: Represents time data, where it is supported that parse time string to timestamp. For example, if users need to parse '2017-05-10' to timestamp, it should be set as <code>time</code> type. If the dimension is used on a time axis (<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> is <code>'time'</code>), it will be auto set to <code>time</code> type. The supported time string is listed in <a href=\"option.html#series.data\" target=\"_blank\">data</a>.</li>\n<li><code>'float'</code>: If set as <code>'float'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n<li><code>'int'</code>: If set as <code>'int'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic (encode)</strong></p>\n<p>Having the concept of dimension clarified, we can use <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> to map data to graphic:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // Map dimension "amount" to the X axis.\n x: 'amount',\n // Map dimension "product" to the Y axis.\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>There is an other example for <code>encode</code>:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (color, symbol, etc.)</strong></p>\n<p>We can use <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its <a href=\"option.html#visualMap\" target=\"_blank\">doc</a>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Default encoding</strong></p>\n<p>For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no <code>encode</code> option is specified. (If <code>encode</code> option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:</p>\n<ul>\n<li>In coordinate system (like cartesian(grid), polar):<ul>\n<li>If category axis (i.e., axis.type is <code>'category'</code>) exists, map the first column/row to the axis, and each series use a following column/row.</li>\n<li>If no category axis exists, and the coordinate system contains two axis (like X Y in cartesian), each series use two columns/rows, one for a axis.</li>\n</ul>\n</li>\n<li>If no coordinate system (like pie chart):<ul>\n<li>Use the first column/row as item name, and the second column/row as item value.</li>\n</ul>\n</li>\n</ul>\n<p>If the default rule does not meet the requirements, configure the <code>encode</code> yourself please.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Q & A</strong></p>\n<p>Q: How to map the third column to X axis, and map the fifth column to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n // Notice that the dimension index is based on 0,\n // thus the third column is dimensions[2].\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>Q: How to map the third row th X axis, and map the fifth row to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>Q: How to use the values in the second column in label.</p>\n<p>A:\nThe <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a> supports refer value in a certain dimension. For example:</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` means use the value in the "score" dimension.\n // `'{@[4]}'` means use the value in dimensions[4].\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>Q: How to display the second column and the third column in tooltip?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>Q: If there is no dimension name in dataset.source, how to give dimension name?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>Q: How to encode the fourth column in bubble size in bubble plot?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n // Use visualMap to perform visual encoding.\n visualMap: {\n show: false,\n dimension: 2, // Encode the third column.\n min: 2, // Min value is required in visualMap component.\n max: 15, // Max value is required in visualMap component.\n inRange: {\n // The range of bubble size, from 5 pixel to 60 pixel.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>Q: We have specified <code>encode</code>, but why it does not work?</p>\n<p>A: Maybe we can try to check typo, for example, the dimension name is <code>'Life Expectancy'</code>, be we typed <code>'Life Expectency'</code> in <code>encode</code> option.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Various formats in dataset</strong></p>\n<p>In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to <code>dataset.source</code>.</p>\n<blockquote>\n<p>Some csv tools can be used to export the table data to JSON, for example, <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> or <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a>.</p>\n</blockquote>\n<p>In common used data transfer formats in JavaScript, 2d-array is a good choice to carry table data, which has been illustrated in the examples above.</p>\n<p>Besides, 2d-array, <code>dataset</code> also support key-value format as follows, which is also commonly used. But notice, the option <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> is not supported in this format.</p>\n<pre><code class=\"lang-js\">dataset: [{\n // Row based key-value format, namely, object array, is a commonly used format.\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // Column based key-value format is also supported.\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Multiple datasets and references</strong></p>\n<p>Multiple datasets can be defined, and series can refer them by <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a>.</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n source: [...],\n }, {\n source: [...]\n }, {\n source: [...]\n }],\n series: [{\n // Use the third dataset.\n datasetIndex: 2\n }, {\n // Use the second dataset.\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts3 data setting approach (series.data) can be used normally</strong></p>\n<p>The data setting approach before ECharts4 can still be used normally. If a series has declared <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>, it will be used but not <code>dataset</code>.</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>In fact, setting data via <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is not deprecated and useful in some cases. For example, for some charts, like <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>, <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, <a href=\"option.html#series-lines\" target=\"_blank\">lines</a>, that do not apply table data, <code>dataset</code> is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> is probably needed to load data incrementally. <code>dataset</code> is not supported in the case.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Others</strong></p>\n<p>Currently, not all types of series support dataset. Series that support dataset includes:</p>\n<p><code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.</p>\n<p>More types of series will support dataset in our further work.</p>\n<p>Finally, this is an example, multiple series sharing one <code>dataset</code> and having interactions:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n\n"},"Add interaction to the chart component":{"type":["*"],"description":"<p>Echarts provides many interaction components besides chart. For example:</p>\n<p><code>legend component</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>title component</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>visualmap component</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>dataline component</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>Following is an example of <code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> as an introduction of how to add this kind of component.</p>\n<p><br></p>\n<h2>Introduction of data zoom component (dataZoom)</h2>\n\n<p>Data overview by default, and detail by requirement is a basic interaction need of data visualization. <code>dataZoom</code> component can implement this function in rectangular coordinate (<a href=\"option.html#grid\" target=\"_blank\">grid</a>) and polar coordinate (<a href=\"option.html#polar\" target=\"_blank\">polar</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> component operates <em>data window zoom</em> and <em>data window translation</em> on <code>axis</code>.</li>\n</ul>\n<blockquote>\n<p>Use <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a>, <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> to specify which axis <code>dataZoom</code> controls.</p>\n</blockquote>\n<ul>\n<li><p>Multiple <code>dataZoom</code> components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.</p>\n</li>\n<li><p>Operation principle of <code>dataZoom</code> achieves <em>data window zooming</em> through <em>data filtering</em>.</p>\n<p> Different settings of data filtering modes lead to different data window zooming effects, please see: <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>.</p>\n</li>\n<li><p>Setting of <code>dataZoom</code> data window range supports two formats currently:</p>\n<ul>\n<li><p>Percentage: see <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> and <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>.</p>\n</li>\n<li><p>Absolute value: see <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> and <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom component supports several child components: </strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">Inside data zoom component (dataZoomInside)</a>: inside coordinates.</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">Slider data zoom component (dataZoomSlider)</a>: has seperate slide option.</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">Select data zoom component (dataZoomSelect)</a>: full-screen box for zoom data area. Entrance and configuration item are both in <code>toolbox</code>.</p>\n</li>\n</ul>\n<p><br></p>\n<h2>Adding dataZoom component</h2>\n\n<p>First, only add dataZoom component to x-axis. Following examples shows the code.</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // This dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n series: [\n {\n type: 'scatter', // this is scatter chart\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>which will show the following result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the <code>option.dataZoom</code> above:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // this dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n },\n { // This dataZoom component controls x-axis by dafault\n type: 'inside', // this dataZoom component is dataZoom component of inside\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n ...\n}\n</code></pre>\n<p>Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>Following result can be seen:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n\n"},"Responsive Mobile-End":{"type":["*"],"description":"<p>ECharts works in DOM nodes with user defined width and height. ECharts <em>component</em> and <em>series</em> are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.</p>\n<p>Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.</p>\n<p>To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a>.</p>\n<p><br></p>\n<h2>Location and layout of ECharts components</h2>\n\n\n<p>Most <em>component</em> and <em>series</em> follow two locating methods: </p>\n<p><br>\n<strong>left/right/top/bottom/width/height locating method:</strong></p>\n<p>Each of those six parameters can be <em>absolute value</em> or <em>percentage</em> or <em>location description</em>.</p>\n<ul>\n<li><p>Absolute value</p>\n<p> in browser pixels (px); in form of <code>number</code> (no unit); e.g.: <code>{left: 23, height: 400}</code>.</p>\n</li>\n<li><p>Percentage</p>\n<p> to the width and height of DOM container; in form of <code>string</code>; e.g.: <code>{right: '30%', bottom: '40%'}</code>.</p>\n</li>\n<li><p>Location Description</p>\n<ul>\n<li>can be set to <code>left: 'center'</code>, for horizontally centering.</li>\n<li>can be set to <code>top: 'middle'</code>, for vertically centering.</li>\n</ul>\n</li>\n</ul>\n<p>The concept of these six parameters is similar to that in CSS: </p>\n<ul>\n<li>left: distance to left border of DOM container.</li>\n<li>right: distance to right border of DOM container.</li>\n<li>top: distance to top border of DOM container.</li>\n<li>bottom: distance to bottom border of DOM container.</li>\n<li>width: width.</li>\n<li>height: height.</li>\n</ul>\n<p>Two out of the three horizontal parameters, <code>left</code>, <code>right</code>, <code>width</code>, are enough to determine the component location. For example, <code>left</code> and <code>right</code>, or <code>right</code> and <code>width</code> can both determine component location and size.\nThe same goes for vertical paramters <code>top</code>, <code>bottom</code> and <code>height</code>.</p>\n<p><br>\n<strong>Locating method of <code>center</code> / <code>radius</code>: </strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> an array in form of <code>[x, y]</code>, in which <code>x</code> and <code>y</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n</li>\n<li><p><code>radius</code></p>\n<p> an array in form of <code>[innerRadius, outerRadius]</code>, in which <code>innerRadius</code> and <code>outerRadius</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n<p> Percentage location turns out to be very useful for responsive positioning.</p>\n</li>\n</ul>\n<p><br>\n<strong>Horizontal and vertical</strong></p>\n<p>Most of ECharts's long and narrow components (such as <code>legend</code>,<code>visualMap</code>,<code>dataZoom</code>,<code>timeline</code> and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.</p>\n<p>Setting of horizontal or vertical layout is usually with component or series's <code>orient</code> or <code>layout</code> option, which can be set to <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n<p><br>\n<strong>Compatibility with ECharts2: </strong></p>\n<p>Naming of <code>x/x2/y/y2</code> in ECharts2 is still compatible, as well as the newly added <code>left/right/top/bottom</code>. But <code>left/right/top/bottom</code> is recommended.</p>\n<p>To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: <code>left: 'right'</code>, <code>left: 'left'</code>, <code>top: 'bottom'</code>, <code>top: 'top'</code>, which are equal to: <code>right: 0</code>, <code>left: 0</code>, <code>bottom: 0</code>, <code>top: 0</code>, in a more normal expression.</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> provides the ability to be responsive with container size.</p>\n<p>As shown in the following example, you may drag <strong>the circle in bottom-right corner</strong> to see the legend and series change layout position and method with container size. </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>The following format should be followed if you need to set Media Query in option:</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // here defines base option\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // each rule of media query is defined here\n {\n query: {...}, // write rule here\n option: { // write options accordingly\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // the second rule\n option: { // the second option\n legend: {...},\n ...\n }\n },\n { // default with no rules,\n option: { // when all rules fail, use this option\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>In the above example, <code>baseOption</code> and every option in <code>media</code> are all <em>simple options</em>, which are regular options containing components and series. <code>baseOption</code> is always be used, while options of every will be merged with <code>chart.mergeOption()</code> when given <code>query</code> condition is satisfied with.</p>\n<p><strong>query: </strong></p>\n<p>A <code>query</code> is in the following format: </p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>Currently there are three supported attributes:<code>width</code>, <code>height</code>, <code>aspectRatio</code> (length-to-width ratio), each of which can add <code>min</code> or <code>max</code> as prefix. E.g., <code>minWidth: 200</code> stands for when width is greater than or equal to 200px. When two attributes are written together, it means <em>and</em> in Bool logic. For example, <code>{minWidth: 200, maxHeight: 300}</code> stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.</p>\n<p><strong>option: </strong></p>\n<p>Since option in <code>media</code> is <em>simple option</em>, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // when length-to-width ratio is less than 1\n },\n option: {\n legend: { // legend is placed in middle-bottom\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // horizontal layout of legend\n },\n series: [ // left and right layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // when container width is smaller than 500\n },\n option: {\n legend: {\n right: 10, // legend is placed in middle-right\n top: '15%',\n orient: 'vertical' // vertical layout\n },\n series: [ // top and bottom layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>Priority when multiple queries are satisfied: </strong></p>\n<p>Attention: When multiple <code>query</code> are satisfied at the same time, all of them will be merged with <code>mergeOption</code> and those are defined later will be merged later, thus provides them with higher priority.</p>\n<p><strong>Query by default: </strong></p>\n<p>If an item in <code>media</code> has no not <code>query</code>, then it means <em>default value</em>, which will be used when all other rules fail.</p>\n<p><strong>Pay attention when container size changes:</strong></p>\n<p>In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.</p>\n<p>But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one <code>query option</code>, then it should also appeared in other <code>query option</code>, or it will not be able to return to the original state. (<code>left/right/top/bottom/width/height</code> are not restricted to this rule.)</p>\n<p><strong><code>media</code> in <em>composite option</em> does not support merge</strong></p>\n<p>When <code>chart.setOption(rawOption)</code> for the second, third, fourth, fifth, and etc. times, if <code>rawOption</code> is <code>composite option</code> (which means it contains <code>media</code> list), then, the new <code>rawOption.media</code> list will not merge with the old <code>media</code>. instead, it will simply replace the option. Of course, <code>rawOption.baseOption</code> will still merge with the old option normally.</p>\n<p><br>\nFinally, let's see an example combining with timeline:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n\n"},"Visual Map of Data":{"type":["*"],"description":"<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.</p>\n<p>Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into <em>lines</em>, bar charts map data into <em>length</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:<br>\n<code>symbol</code>, <code>symbolSize</code><br>\n<code>color</code>, <code>opacity</code>, <code>colorAlpha</code>, <br>\n<code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></p>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<p><br></p>\n<h2>Data and Dimension</h2>\n\n<p>Data are usually stored in <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of <code>dataItem</code>s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {...}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {...}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ]\n}\n</code></pre>\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href=\"option.html#series-scatter\" target=\"_blank\">scatter charts</a> use radius to represent the third dimension.</p>\n<p><br></p>\n<h2>visualMap Component</h2>\n\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // can define multiple visualMap components at the same time\n { // the first visualMap component\n type: 'continuous', // defined as continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined as discrete visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">visualMapContinuous</a>：</p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">visualMapPiecewise</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>Piecewise visual map component has three types:</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>Equal division of continuous data: divide equally based on <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a>;</li>\n<li>User-defined division of continuous data: divide with range in <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a>;</li>\n<li>Discrete data (data in category type): divide with <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<strong>Configuration of visualMap mapping method</strong></p>\n<p>As we have introduced above, <code>visualMap</code> maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in <a href=\"#visualMap.dimension\">visualMap.dimension</a>) to be mapped to which visual elements (see in <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>).</p>\n<p>Example A:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data, or value[3], is mapped\n seriesIndex: 4, // map with the fourth series\n inRange: { // visual configuration items in selected range\n color: ['blue', '#121122', 'red'], // defines color list of mapping\n // The largest value will be mapped to 'red',\n // and others will be interpolated\n symbolSize: [30, 100] // the smallest value will be mapped to size of 30,\n // the largest to 100,\n // and others will be interpolated\n },\n outOfRange: { // visual configuration items out of selected range\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>Example B:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // visual configuration items in selected range\n colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color\n // original color may be selected from global color palette,\n // which is not concerned by visualMap component\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>For more information, please refer to <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>.</p>\n"},"Events and Actions in ECharts":{"type":["*"],"description":"<p>User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.</p>\n<p>Binding events in ECharts 3 is though <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // printing data name in console\n console.log(params.name);\n});\n</code></pre>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> event when toggling legend (Notice here, that <code>'legendselected'</code> event will not be triggered when toggling legend), triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> event when data zooming in some area.</p>\n<h2 id=\"mouse-events-handling\">Mouse Events Handling</h2>\n<p>ECharts support regular mouse events, which includes <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. Next let's see an example of opening Baidu search page when clicks a bar chart.</p>\n<pre><code class=\"lang-js\">// initialize ECharts instance based on prepared dom\nvar myChart = echarts.init(document.getElementById('main'));\n\n// data and configuration item of specific chart\nvar option = {\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// use specified configuration item and data to show chart\nmyChart.setOption(option);\n// handle click event and redirect to corresponding Baidu search page\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>All types of mouse events have a common parameter called <code>params</code>, which is an object that contains data information of the clicked chart, whose format is as followed:</p>\n<pre><code class=\"lang-js\">{\n // component name of clicked component\n // e.g., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (useful when componentType is 'series')\n // e.g., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in option.series (useful when componentType is 'series')\n seriesIndex: number,\n // series name (useful when componentType is 'series')\n seriesName: string,\n // data name, or category name\n name: string,\n // data index in input data array\n dataIndex: number,\n // raw input data item\n data: Object,\n // Some series, such as sankey or graph, maintains both nodeData and edgeData,\n // in which case, dataType is set to be 'node' or 'edge' to identify.\n // On the other hand, most other series have only one type of data,\n // where dataType is not needed.\n dataType: string,\n // input data value\n value: number|Array\n // color of component (useful when componentType is 'series')\n color: string\n}\n</code></pre>\n<p>How to know where the mouse clicked:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // clicked on markPoint\n if (params.seriesIndex === 5) {\n // clicked on a markPoint which belongs to a series indexed with 5\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked on an edge of the graph\n }\n else {\n // clicked on a node of the graph\n }\n }\n }\n});\n</code></pre>\n<p>Use <code>query</code> to call handler only on the graphic elements of the specified components:</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n}\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('click', {element: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method called.\n});\n</code></pre>\n<p>You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // present data distribution of a single bar through pie chart\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"interaction-events-with-components\">Interaction Events with Components</h2>\n<p>Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in <a href=\"api.html#events\" target=\"_blank\">events</a>.</p>\n<p>Below is example that listens to a legend toggling:</p>\n<pre><code class=\"lang-js\">// legend toggling triggers legendselectchanged event only\nmyChart.on('legendselectchanged', function (params) {\n // obtain selecting status of clicked legend\n var isSelected = params.selected[params.name];\n // print in console\n console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);\n // print all legend status\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"triggering-component-actions-through-code-in-echarts\">Triggering Component Actions through Code in ECharts</h2>\n<p>Actions like <code>'legendselectchanged'</code> mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.</p>\n<p>ECharts 2.x triggers actions through <code>myChart.component.tooltip.showTip</code>, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through <code>myChart.dispatchAction({ type: '' })</code>, which manages all actions in a uniformed way, and may record user's event path when need.</p>\n<p>Frequently used actions and the parameters are listed in <a href=\"api.html#action\" target=\"_blank\">action</a>.</p>\n<p>Below displays how to highlight each sector of pie chart in turn through <code>dispatchAction</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"An Example: Implement Dragging":{"type":["*"],"description":"<p>This is a tiny example, introducing how to implement dragging of graphic elements in echarts. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p>\n<p><br></p>\n<h2>[ Part 1 ] Implement basic dragging</h2>\n\n<p>First of all, we create a basic <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">line chart (line series)</a>:</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n</code></pre>\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<pre><code class=\"lang-js\">// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> is used, which is the reversed process of <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>[ Part 2 ] Add tooltip component</h2>\n\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // Means disable default "show/hide rule".\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // Customize "show/hide rule", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>The API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> is used to show/hide tooltip content, where actions <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a> and <a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a> is dispatched.</p>\n<p><br></p>\n<h2>[ Part 3 ] Full code</h2>\n\n<p>Full code is shown as follow:</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n"},"Custom Series":{"type":["*"],"description":"<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is a type of series, which enable develpers to customize graphic elements rendering and generate new types of chart.</p>\n<p>Why echarts supports <code>custom series</code>? There are endless chart types in the world of data visualization, which are not enumerable. Thus only most common used chart types are built-in supported in echarts. For other chart types, it is necessary to provide an approach to make new types of chart for developers. This approach should be as simple as possible, which had better not to bothered developers with some details of implementation, such as creating and deleting graphic elements, transition animation, tooltip supporting, working with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a> or <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap\" target=\"_blank\">visualMap</a>. Having considered the factors above, a solution <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is published.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p>Let's begin the tutorial.</p>\n<p><br></p>\n<h2>(I) The method <code>renderItem</code></h2>\n\n<p>The snippet of graphic elements rendering should be written in <code>renderItem</code> method my developers. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>In the rendering phase of echarts workflow, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is called respectively for each <code>dataItem</code> in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.data\" target=\"_blank\">series.data</a>. <code>renderItem</code> is responsible for build a group of definitions of graphic elements, including graphic type, size, location, style, etc. echarts will then build graphic elements according to those definitions. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // This method will be called for each dataItem repectively.\n // Notice: it does not ensure that called according to the order\n // of `dataItem`.\n\n // Some processes, such as coordinate conversion.\n // `api.value(0)` is used to retrieve the value on the first\n // dimension in the current `dataItem`.\n var categoryIndex = api.value(0);\n // `api.coord(...)` is used to convert data values to pixel values,\n // will are necessary for graphic elements rendering.\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // `api.size(...)` is used to calculate the pixel size corresponding to\n // the a value range that the length is 1 on Y axis.\n var height = api.size([0, 1])[1] * 0.6;\n\n // The property `shape` incicates the location and size of thsi\n // element.\n // `echarts.graphic.clipRectByRect` is used for clipping the\n // rectangular when it overflow the bounding box of the current\n // coordinate system (cartesian).\n // If the rect is totally clipped, returns undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // position and location of the rectangular.\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // Bounding box of the current cooridinate system (cartesian).\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n })\n\n // Returns definitions for the current `dataItem`.\n return rectShape && {\n // 'rect' indicates that the graphic element is rectangular.\n // Can also be 'circle', 'sector', 'polygon', ...\n type: 'rect',\n shape: rectShape,\n // `api.style(...)` is used to obtain style settings, which\n // includes itemStyle settings in optino and the result of\n // visual mapping.\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // The first dataItem.\n [53, 31, 21, 56], // The second dataItem.\n [71, 33, 10, 20], // The third dataItem.\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：provides info about the current series (such as <code>seriesIndex</code>、<code>dataIndex</code>, etc.) and data (such as <code>dataIndex</code>, <code>dataIndexInside</code>, etc.) and coordinate system (such as location and size of bounding box of the current coordinate system)</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a> provides some methods to developers (such as <code>api.value()</code>, <code>api.coord()</code>).</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> method should return definitions of graphic elements for the current <code>dataItem</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p>Having <code>renderItem</code> provided, 90% of the work of creating custom series has been accomplished. The rest of this work is to refine and polish them.</p>\n<p><br></p>\n<h2>(II) Make the extent of axes fit the data</h2>\n\n<p>There is axes in some coordinate systems, such as <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#polar\" target=\"_blank\">polar</a>. The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>, developers should specify that which dimensions correspond to <code>x</code> axis and which to <code>y</code> axis use the property <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // `dim1` and `dim2` correspond to `x` axis.\n x: [1, 2],\n // `dim0` corresponds to `y` axis.\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>(III) Set tooltip content</h2>\n\n<p>Of course <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> can be used to define the content in tooltip. But it is easier to do that by setting <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a> and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // `dim2` and `dim3` will displayed in tooltip.\n tooltip: [2, 3]\n },\n // `dim2` is named as "Age" and `dim3` is named as "Satisfaction".\n dimensions: [null, null, 'Age', 'Satisfaction'],\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ],\n [ 53, 31, 21, 56 ],\n [ 71, 33, 10, 20 ],\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>Several other issues about <code>custom series</code> are introduced below.</p>\n<p><br></p>\n<h2>(IV) Shape clipping when overflow the coordinates area</h2>\n\n<p>When use <code>custom series</code> with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p>In the example above, <code>dim</code> and <code>dim2</code> corresponds to <code>x</code> axis, and the <code>dataZoom</code> component constrols the data window of <code>x</code> axis. If part of a <code>dataItem</code> is overflow the extent of <code>x</code> axis (the value on <code>dim1</code> is overflow and the value on <code>dim2</code> is not) while zooming, the <code>dataItem</code> will not be filtered if <code>dataZoom.filterMode = 'weakFilter'</code> set. Thus the <code>dataItem</code> can be still rendered (usually be partially rendered by using <code>echarts.graphic.clipRectByRect</code> to clip the exceeding part).\nSee the example mentioned above <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a>.</p>\n<p><br></p>\n<p><br></p>\n<h2>(V) About dataIndex</h2>\n\n\n<p>Developers had better notice that in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> <code>dataIndexInside</code> and <code>dataIndex</code> is different:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br></p>\n<h2>(VI) Event listener</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>(VII) Custom vector shapes</h2>\n\n\n<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> is supported, which enables to use shapes that are created in vector tool. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>, and examples: <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon\" target=\"_blank\">icons</a>, <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p><br></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More examples about custom series</a></strong></p>\n"},"Rich Text":{"type":["*"],"description":"<p>Rich text can be used in labels of series, axis or other components. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>More examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.</p>\n<p>Since v3.7, rich text has been supported:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fregments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the begining, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text Fregment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Options about Text</strong></p>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fregment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fregment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fregment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fregment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fregment in <code>rich</code> property. For example, <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this fregment}'\n '{b|Style "b" is applied to this fregment}This fregment use default style{x|use style "x"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fregments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Basic Styles of Text, Text Block and Text Fragment</strong></p>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fregment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Position</strong></p>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href=\"option.html\" target=\"_blank\">option doc</a>.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Rotation</strong></p>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p><a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> and<a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Layout and Alignment of Text Fregment</strong></p>\n<p>To understand the layout rule, every text fregment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fregment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fregment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>'\\n'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fregment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fregments. <code>lineHeight</code> of a text fregment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fregment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fregments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>'bottom'</code>: The bottom edge of the text fregment sticks to the bottom edge of the line.</li>\n<li><code>'top'</code>: The top edge of the text fregment sticks to the top edge of the line.</li>\n<li><code>'middle'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fregment can be placed in each line, where the horizontal position of text fregments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fregments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li>\n<li>Secondly, place text fregments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li>\n<li>Finally, the text fregments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fregment:</p>\n<ul>\n<li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fregment box.</li>\n<li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fregment box.</li>\n<li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fregment box.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Effects: Icon, Horizontal Rule, Title Block, Simple Table</strong></p>\n<p>See example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n</code></pre>\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<pre><code class=\"lang-js\">// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>Simple table can be implemented by specify the same width to text fregments that are in the same column of different lines. See the <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">example</a> at the mentioned above.</p>\n"},"Server-side Rendering":{"type":["*"],"description":"<p>ECharts can be rendered at server-side. For example, the thumbnails in the <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>, <a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>, <a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>, <a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>, <a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"Render by Canvas or SVG":{"type":["*"],"description":"<p>Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.</p>\n<p>ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v3.8</a> we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">renderer</a> as <code>'canvas'</code> or <code>'svg'</code> when initailizing a chart instance.</p>\n<blockquote>\n<p>That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">zender</a>, where they are implemented as a Canvas renderer and a alternative SVG renderer.</p>\n</blockquote>\n<h2 id=\"how-to-make-a-choice-\">How to make a choice?</h2>\n<p>Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=lines-bmap-effect\" target=\"_blank\">special visual effect</a>. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg-en&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.</p>\n<p>How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.</p>\n<ul>\n<li>If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.</li>\n<li>If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.<ul>\n<li>If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">liquidfill</a>, the SVG renderer probably gives a better performance.</li>\n<li>If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.</li>\n</ul>\n</li>\n</ul>\n<p>Therefore <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">feedback</a> of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.</p>\n<p>Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.</p>\n<h2 id=\"how-to-use-specify-a-renderer-\">How to use specify a renderer?</h2>\n<p>ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.</p>\n<ul>\n<li>In the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">pre-build</a> of ECharts, the SVG renderer has been included in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.common.min.js\" target=\"_blank\">common version</a> and <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.min.js\" target=\"_blank\">complete version</a>. But not in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.simple.min.js\" target=\"_blank\">simple version</a>.</li>\n<li>If <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">build ECharts online</a>, the checkbox "SVG 渲染" should be checked.</li>\n<li>If <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">build ECharts offline</a>, the module of the SVG renderer should be imported:</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>Then wen can specify renderer by <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">parameter</a>:</p>\n<pre><code class=\"lang-js\">// Use the Canvas renderer (default).\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// which is equal to:\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n\n// Use the SVG renderer.\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"Supporting ARIA in Charts":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: 'Source of user access to a site',\n x: 'center'\n },\n series: [\n {\n Name: 'access source',\n type: 'pie',\n data: [\n { value: 335, name: 'direct access' },\n { value: 310, name: 'mail marketing' },\n { value: 234, name: 'union ad' },\n { value: 135, name: 'video ad' },\n { value: 1548, name: 'search engine' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates.</p>\n<p>Please refer to <a href=\"option.html#aria\" target=\"_blank\">ARIA option</a> for more detail.</p>\n"}}}}
\ No newline at end of file
diff --git a/documents/zh/tutorial.json b/documents/zh/tutorial.json
index 693721c..18dc62d 100644
--- a/documents/zh/tutorial.json
+++ b/documents/zh/tutorial.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- 引入 ECharts 文件 -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code><body>\n <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- 引入 echarts.js -->\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>如果对文件体积有更严苛的要求，可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。自定义构建有几种方式：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang <language shortcut or file path></code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code><cwd>/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>'umb'</code>（默认）、<code>'amd'</code>、<code>'iife'</code>、<code>'cjs'</code>、<code>'es'</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from 'echarts/src/echarts';\n// 引入饼图。\nimport 'echarts/src/chart/pie';\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- 引入 lib/echarts.custom.min.js -->\n <script src="lib/echarts.custom.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // 绘制图表。\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from 'echarts/lib/echarts';\n// 引入折线图。\nimport 'echarts/lib/chart/line';\n// 引入提示框组件、标题组件、工具箱组件。\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// 用于压缩构建出的代码。\nimport uglify from 'rollup-plugin-uglify';\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // 入口代码文件，就是刚才所创建的文件。\n input: './line.js',\n plugins: [\n nodeResolve(),\n // ecLangPlugin({lang: 'en'}),\n // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n uglify()\n ],\n output: {\n // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n format: 'umd',\n // 输出 source map 便于调试。\n sourcemap: true,\n // 输出文件的路径。\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <!-- 为 echarts 准备一个具备大小（宽高）的Dom。 -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- 引入刚才构建好的文件。 -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require('echarts')</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>默认使用 <code>require('echarts')</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require('echarts/lib/echarts');\n// 引入柱状图\nrequire('echarts/lib/chart/bar');\n// 引入提示框和标题组件\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code>xAxis</code>，<code>yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n data:[\n {value:235, name:'视频广告'},\n {value:274, name:'联盟广告'},\n {value:310, name:'邮件营销'},\n {value:335, name:'直接访问'},\n {value:400, name:'搜索引擎'}\n ]\n }\n ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 阴影的大小\n shadowBlur: 200,\n // 阴影水平方向上的偏移\n shadowOffsetX: 0,\n // 阴影垂直方向上的偏移\n shadowOffsetY: 0,\n // 阴影颜色\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"#option.html#visualMap\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n // 不显示 visualMap 组件，只用于明暗度的映射\n show: false,\n // 映射的最小值为 80\n min: 80,\n // 映射的最大值为 600\n max: 600,\n inRange: {\n // 明暗度的范围是 0 到 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 "vintage"\n$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n // 全局调色盘。\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // 此系列自己的调色盘。\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // 此系列自己的调色盘。\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: []\n }]\n});\n\n// 异步加载数据\n$.get('data.json').done(function (data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n xAxis: {type: 'category'},\n // 声明一个 Y 轴，数值轴。\n yAxis: {},\n // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n {name: 'score'},\n // 可以简写为 string，表示维度名。\n 'amount',\n // 可以在 type 中指定维度类型。\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // 在系列中设置的 dimensions 会更优先采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>'number'</code>: 默认，表示普通数据。</li>\n<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // 将 "amount" 列映射到 X 轴。\n x: 'amount',\n // 将 "product" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code>encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>问：如何把第四列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n min: 2, // 需要给出数值范围，最小数值。\n max: 15, // 需要给出数值范围，最大数值。\n inRange: {\n // 气泡尺寸：5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // 按列的 key-value 形式。\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n // 序号为 0 的 dataset。\n source: [...],\n }, {\n // 序号为 1 的 dataset。\n source: [...]\n }, {\n // 序号为 2 的 dataset。\n source: [...]\n }],\n series: [{\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n }, {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code>dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> 组件是对 <code>数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p> 数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n series: [\n {\n type: 'scatter', // 这是个『散点图』\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code>option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n },\n { // 这个dataZoom组件，也控制x轴。\n type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p> 单位是浏览器像素（px），用 <code>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p> 表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: '30%', bottom: '40%'}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: 'center'</code>，表示水平居中。</li>\n<li>可以设置 <code>top: 'middle'</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> 是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p> 是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p> 在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>'horizontal'</code> 或者 <code>'vertical'</code>。</p>\n<p><br>\n<strong>于 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: 'right'</code>、<code>left: 'left'</code>、<code>top: 'bottom'</code>、<code>top: 'top'</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // 这里是基本的『原子option』。\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // 这里定义了 media query 的逐条规则。\n {\n query: {...}, // 这里写规则。\n option: { // 这里写此规则满足下的option。\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // 第二个规则。\n option: { // 第二个规则对应的option。\n legend: {...},\n ...\n }\n },\n { // 这条里没有写规则，表示『默认』，\n option: { // 即所有规则都不满足时，采纳这个option。\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>上面的例子中，<code>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // 当长宽比小于1时。\n },\n option: {\n legend: { // legend 放在底部中间。\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // legend 横向布局。\n },\n series: [ // 两个饼图左右布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // 当容器宽度小于 500 时。\n },\n option: {\n legend: {\n right: 10, // legend 放置在右侧中间。\n top: '15%',\n orient: 'vertical' // 纵向布局。\n },\n series: [ // 两个饼图上下布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: 2323, // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n 1212, // 也可以直接是 dataItem 的 value，这更常见。\n 2323, // 每个 value 都是『一维』的。\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，\n // 第二维度映射到y轴，\n // 第三维度映射到气泡半径（symbolSize）\n ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // 可以同时定义多个 visualMap 组件。\n { // 第一个 visualMap 组件\n type: 'continuous', // 定义为连续型 visualMap\n ...\n },\n { // 第二个 visualMap 组件\n type: 'piecewise', // 定义为分段型 visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: { // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，\n // 数据最小值映射到'blue'上，\n // 最大值映射到'red'上，\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围，\n // 数据最小值映射到30上，\n // 最大值映射到100上，\n // 其余自动线性计算。\n },\n outOfRange: { // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // 选中范围中的视觉配置\n colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"},"ECharts 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发<code>'legendselected'</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、<code>'dblclick'</code>、<code>'mousedown'</code>、<code>'mousemove'</code>、<code>'mouseup'</code>、<code>'mouseover'</code>、<code>'mouseout'</code>、<code>'globalout'</code>、<code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n // 当前点击的图形元素所属的组件名称，\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string,\n // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string,\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number,\n // 系列名称。当 componentType 为 'series' 时有意义。\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 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data，dataType 无意义。\n dataType: string,\n // 传入的数据值\n value: number|Array\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge（边）上。\n }\n else {\n // 点击到了 graph 的 node（节点）上。\n }\n }\n }\n});\n</code></pre>\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // 组件 index\n <mainType>Name: string // 组件 name\n <mainType>Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type，如关系图中的 'node', 'edge'\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: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。\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: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('mouseup', {element: 'my_el'}, function () {\n // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function (params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code>'legendselectchanged'</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富有交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data，重绘折线图。\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // 表示不使用默认的『显示』『隐藏』触发规则。\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>这里使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\n<p>总结一下，全部的代码如下：</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\"><script src="echarts.min.js"></script>\n<script>\n // ...\n</script>\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\"><div id="main" style="width=100%; height = 400px"></div>\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n visualMap: {\n show: false\n min: 0,\n max: 1000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]\n }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code>coordinateSystem: 'calendar',</code>和<code>calendar: { range: '2017' }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width:100%;height:400px;"></div>\n <script type="text/javascript">\n var myChart = echarts.init(document.getElementById('main'));\n\n // 模拟数据\n function getVirtulData(year) {\n year = year || '2017';\n var date = +echarts.number.parseDate(year + '-01-01');\n var end = +echarts.number.parseDate(year + '-12-31');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time <= end; time += dayTime) {\n data.push([\n echarts.format.formatTime('yyyy-MM-dd', time),\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n }\n var option = {\n visualMap: {\n show: false,\n min: 0,\n max: 10000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2017)\n }\n };\n myChart.setOption(option);\n </script>\n</body>\n</html>\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>'sunburst'</code> 的系列，并且以树形结构声明其 <code>data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa'\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }]\n }, {\n name: 'C',\n value: 3\n }]\n }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>'#aaa'</code>，将最内层的颜色设为蓝色 <code>'blue'</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>'red'</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa',\n itemStyle: {\n color: 'red'\n }\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }],\n itemStyle: {\n color: 'red'\n }\n }, {\n name: 'C',\n value: 3\n }],\n itemStyle: {\n color: '#aaa'\n },\n levels: [{\n // 留给数据下钻的节点属性\n }, {\n itemStyle: {\n color: 'blue'\n }\n }]\n }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code>false</code> 关闭；或者将其设为 <code>'link'</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code>'descendant'</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>'ancestor'</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>'self'</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>'none'</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p><code>highlightPolicy</code> 为 <code>'descendant'</code> 或 <code>'ancestor'</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n // （但是注意，并不一定是按照 data 的顺序调用）\n\n // 这里进行一些处理，例如，坐标转换。\n // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n var categoryIndex = api.value(0);\n // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n var height = api.size([0, 1])[1] * 0.6;\n\n // shape 属性描述了这个矩形的像素位置和大小。\n // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n // 如果矩形完全被剪掉，会返回 undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // 矩形的位置和大小。\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // 当前坐标系的包围盒。\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n // 这里返回为这个 dataItem 构建的图形元素定义。\n return rectShape && {\n // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。\n type: 'rect',\n shape: rectShape,\n // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n // option 中 itemStyle 的配置和视觉映射得到的颜色。\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // 这是第一个 dataItem\n [53, 31, 21, 56], // 这是第二个 dataItem\n [71, 33, 10, 20], // 这是第三个 dataItem\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: 'green', stroke: 'yellow'})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n // data 中『维度0』对应到 Y 轴\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // 表示『维度2』和『维度3』要显示到 tooltip 中。\n tooltip: [2, 3]\n },\n // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n dimensions: [null, null, '年龄', '满意度'],\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 'weakFilter'。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = 'weakFilter'</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // 用户指定的信息，可以在 event handler 访问到。\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>'\\n'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>'middle'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\"><script src="lib/echarts.min.js"></script>\n<script src="lib/echarts-gl.min.js"></script>\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from 'echarts';\nimport 'echarts-gl';\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n // \b需要注意的是我们不能跟 grid 一样省略 grid3D\n grid3D: {},\n // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: 'category'</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n var exponent = -(\n ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n );\n return amplitude * Math.pow(Math.E, exponent);\n }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i < 1000; i++) {\n // x, y 随机分布\n var x = Math.random() * 100 - 50;\n var y = Math.random() * 100 - 50;\n var z = gaussian(x, y);\n data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数\b\u001c据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n ...\n]\n</code></pre>\n<p>每一项都包含了<code>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 100 },\n series: [{\n type: 'scatter3D',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n["Income", "Life Expectancy", "Population", "Country", "Year"],\n[815, 34.05, 351014, "Australia", 1800],\n[1314, 39, 645526, "Canada", 1800],\n[985, 32, 321675013, "China", 1800],\n[864, 32.2, 345043, "Cuba", 1800],\n[1244, 36.5731262, 977662, "Finland", 1800],\n...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get('data/asset/data/life-expectancy-table.json', function (data) {\n myChart.setOption({\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5\n }\n ]\n })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {},\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'category'\n },\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Year',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {\n viewControl: {\n // 使用正交投影。\n projection: 'orthographic'\n }\n },\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'log'\n },\n zAxis3D: {},\n visualMap: {\n calculable: true,\n max: 100,\n // 维度的名字默认就是表头的属性名\n dimension: 'Life Expectancy',\n inRange: {\n color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n }\n },\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Population',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y <= 50; y++) {\n for (var x = -50; x <= 50; x++) {\n var z = gaussian(x, y);\n data.push([x, y, z]);\n }\n}\noption = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 60 },\n series: [{\n type: 'surface',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"},"在微信小程序中使用 ECharts":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://github.com/ecomfe/echarts-for-weixin/raw/master/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>'pages/bar/index'</code>。</p>\n<p><code>index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n "usingComponents": {\n "ec-canvas": "../../ec-canvas/ec-canvas"\n }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code>pages/bar/index.wxml</code> 中使用 <code><ec-canvas></code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code><ec-canvas></code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\"><view class="container">\n <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>\n</view>\n</code></pre>\n<p>其中 <code>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height\n });\n canvas.setChart(chart);\n\n var option = {\n ...\n };\n chart.setOption(option);\n return chart;\n}\n\nPage({\n data: {\n ec: {\n onInit: initChart\n }\n }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- 引入 ECharts 文件 -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code><body>\n <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- 引入 echarts.js -->\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"/zh/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>我们也可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。可以用这几种方式自定义构建：</p>\n<ul>\n<li><a href=\"/zh/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang <language shortcut or file path></code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code><cwd>/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>'umb'</code>（默认）、<code>'amd'</code>、<code>'iife'</code>、<code>'cjs'</code>、<code>'es'</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from 'echarts/src/echarts';\n// 引入饼图。\nimport 'echarts/src/chart/pie';\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- 引入 lib/echarts.custom.min.js -->\n <script src="lib/echarts.custom.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // 绘制图表。\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from 'echarts/lib/echarts';\n// 引入折线图。\nimport 'echarts/lib/chart/line';\n// 引入提示框组件、标题组件、工具箱组件。\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// 用于压缩构建出的代码。\nimport uglify from 'rollup-plugin-uglify';\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // 入口代码文件，就是刚才所创建的文件。\n input: './line.js',\n plugins: [\n nodeResolve(),\n // ecLangPlugin({lang: 'en'}),\n // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n uglify()\n ],\n output: {\n // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n format: 'umd',\n // 输出 source map 便于调试。\n sourcemap: true,\n // 输出文件的路径。\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <!-- 为 echarts 准备一个具备大小（宽高）的Dom。 -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- 引入刚才构建好的文件。 -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require('echarts')</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>默认使用 <code>require('echarts')</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require('echarts/lib/echarts');\n// 引入柱状图\nrequire('echarts/lib/chart/bar');\n// 引入提示框和标题组件\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code>xAxis</code>，<code>yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n data:[\n {value:235, name:'视频广告'},\n {value:274, name:'联盟广告'},\n {value:310, name:'邮件营销'},\n {value:335, name:'直接访问'},\n {value:400, name:'搜索引擎'}\n ]\n }\n ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 阴影的大小\n shadowBlur: 200,\n // 阴影水平方向上的偏移\n shadowOffsetX: 0,\n // 阴影垂直方向上的偏移\n shadowOffsetY: 0,\n // 阴影颜色\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"#option.html#visualMap\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n // 不显示 visualMap 组件，只用于明暗度的映射\n show: false,\n // 映射的最小值为 80\n min: 80,\n // 映射的最大值为 600\n max: 600,\n inRange: {\n // 明暗度的范围是 0 到 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 "vintage"\n$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n // 全局调色盘。\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // 此系列自己的调色盘。\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // 此系列自己的调色盘。\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: []\n }]\n});\n\n// 异步加载数据\n$.get('data.json').done(function (data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n xAxis: {type: 'category'},\n // 声明一个 Y 轴，数值轴。\n yAxis: {},\n // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n {name: 'score'},\n // 可以简写为 string，表示维度名。\n 'amount',\n // 可以在 type 中指定维度类型。\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // 在系列中设置的 dimensions 会更优先采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>'number'</code>: 默认，表示普通数据。</li>\n<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // 将 "amount" 列映射到 X 轴。\n x: 'amount',\n // 将 "product" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code>encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>问：如何把第四列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n min: 2, // 需要给出数值范围，最小数值。\n max: 15, // 需要给出数值范围，最大数值。\n inRange: {\n // 气泡尺寸：5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // 按列的 key-value 形式。\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n // 序号为 0 的 dataset。\n source: [...],\n }, {\n // 序号为 1 的 dataset。\n source: [...]\n }, {\n // 序号为 2 的 dataset。\n source: [...]\n }],\n series: [{\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n }, {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code>dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> 组件是对 <code>数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p> 数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n series: [\n {\n type: 'scatter', // 这是个『散点图』\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code>option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n },\n { // 这个dataZoom组件，也控制x轴。\n type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p> 单位是浏览器像素（px），用 <code>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p> 表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: '30%', bottom: '40%'}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: 'center'</code>，表示水平居中。</li>\n<li>可以设置 <code>top: 'middle'</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> 是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p> 是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p> 在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>'horizontal'</code> 或者 <code>'vertical'</code>。</p>\n<p><br>\n<strong>与 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: 'right'</code>、<code>left: 'left'</code>、<code>top: 'bottom'</code>、<code>top: 'top'</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // 这里是基本的『原子option』。\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // 这里定义了 media query 的逐条规则。\n {\n query: {...}, // 这里写规则。\n option: { // 这里写此规则满足下的option。\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // 第二个规则。\n option: { // 第二个规则对应的option。\n legend: {...},\n ...\n }\n },\n { // 这条里没有写规则，表示『默认』，\n option: { // 即所有规则都不满足时，采纳这个option。\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>上面的例子中，<code>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // 当长宽比小于1时。\n },\n option: {\n legend: { // legend 放在底部中间。\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // legend 横向布局。\n },\n series: [ // 两个饼图左右布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // 当容器宽度小于 500 时。\n },\n option: {\n legend: {\n right: 10, // legend 放置在右侧中间。\n top: '15%',\n orient: 'vertical' // 纵向布局。\n },\n series: [ // 两个饼图上下布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: 2323, // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n 1212, // 也可以直接是 dataItem 的 value，这更常见。\n 2323, // 每个 value 都是『一维』的。\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，\n // 第二维度映射到y轴，\n // 第三维度映射到气泡半径（symbolSize）\n ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // 可以同时定义多个 visualMap 组件。\n { // 第一个 visualMap 组件\n type: 'continuous', // 定义为连续型 visualMap\n ...\n },\n { // 第二个 visualMap 组件\n type: 'piecewise', // 定义为分段型 visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: { // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，\n // 数据最小值映射到'blue'上，\n // 最大值映射到'red'上，\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围，\n // 数据最小值映射到30上，\n // 最大值映射到100上，\n // 其余自动线性计算。\n },\n outOfRange: { // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // 选中范围中的视觉配置\n colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"},"ECharts 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发<code>'legendselected'</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、<code>'dblclick'</code>、<code>'mousedown'</code>、<code>'mousemove'</code>、<code>'mouseup'</code>、<code>'mouseover'</code>、<code>'mouseout'</code>、<code>'globalout'</code>、<code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n // 当前点击的图形元素所属的组件名称，\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string,\n // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string,\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number,\n // 系列名称。当 componentType 为 'series' 时有意义。\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 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data，dataType 无意义。\n dataType: string,\n // 传入的数据值\n value: number|Array\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge（边）上。\n }\n else {\n // 点击到了 graph 的 node（节点）上。\n }\n }\n }\n});\n</code></pre>\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // 组件 index\n <mainType>Name: string // 组件 name\n <mainType>Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type，如关系图中的 'node', 'edge'\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: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。\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: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('mouseup', {element: 'my_el'}, function () {\n // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function (params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code>'legendselectchanged'</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data，重绘折线图。\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // 表示不使用默认的『显示』『隐藏』触发规则。\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>这里使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\n<p>总结一下，全部的代码如下：</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\"><script src="echarts.min.js"></script>\n<script>\n // ...\n</script>\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\"><div id="main" style="width=100%; height = 400px"></div>\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n visualMap: {\n show: false\n min: 0,\n max: 1000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]\n }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code>coordinateSystem: 'calendar',</code>和<code>calendar: { range: '2017' }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width:100%;height:400px;"></div>\n <script type="text/javascript">\n var myChart = echarts.init(document.getElementById('main'));\n\n // 模拟数据\n function getVirtulData(year) {\n year = year || '2017';\n var date = +echarts.number.parseDate(year + '-01-01');\n var end = +echarts.number.parseDate(year + '-12-31');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time <= end; time += dayTime) {\n data.push([\n echarts.format.formatTime('yyyy-MM-dd', time),\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n }\n var option = {\n visualMap: {\n show: false,\n min: 0,\n max: 10000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2017)\n }\n };\n myChart.setOption(option);\n </script>\n</body>\n</html>\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>'sunburst'</code> 的系列，并且以树形结构声明其 <code>data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa'\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }]\n }, {\n name: 'C',\n value: 3\n }]\n }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>'#aaa'</code>，将最内层的颜色设为蓝色 <code>'blue'</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>'red'</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa',\n itemStyle: {\n color: 'red'\n }\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }],\n itemStyle: {\n color: 'red'\n }\n }, {\n name: 'C',\n value: 3\n }],\n itemStyle: {\n color: '#aaa'\n },\n levels: [{\n // 留给数据下钻的节点属性\n }, {\n itemStyle: {\n color: 'blue'\n }\n }]\n }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code>false</code> 关闭；或者将其设为 <code>'link'</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code>'descendant'</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>'ancestor'</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>'self'</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>'none'</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p><code>highlightPolicy</code> 为 <code>'descendant'</code> 或 <code>'ancestor'</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n // （但是注意，并不一定是按照 data 的顺序调用）\n\n // 这里进行一些处理，例如，坐标转换。\n // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n var categoryIndex = api.value(0);\n // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n var height = api.size([0, 1])[1] * 0.6;\n\n // shape 属性描述了这个矩形的像素位置和大小。\n // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n // 如果矩形完全被剪掉，会返回 undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // 矩形的位置和大小。\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // 当前坐标系的包围盒。\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n // 这里返回为这个 dataItem 构建的图形元素定义。\n return rectShape && {\n // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。\n type: 'rect',\n shape: rectShape,\n // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n // option 中 itemStyle 的配置和视觉映射得到的颜色。\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // 这是第一个 dataItem\n [53, 31, 21, 56], // 这是第二个 dataItem\n [71, 33, 10, 20], // 这是第三个 dataItem\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: 'green', stroke: 'yellow'})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n // data 中『维度0』对应到 Y 轴\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // 表示『维度2』和『维度3』要显示到 tooltip 中。\n tooltip: [2, 3]\n },\n // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n dimensions: [null, null, '年龄', '满意度'],\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 'weakFilter'。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = 'weakFilter'</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // 用户指定的信息，可以在 event handler 访问到。\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>'\\n'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>'middle'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\"><script src="lib/echarts.min.js"></script>\n<script src="lib/echarts-gl.min.js"></script>\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from 'echarts';\nimport 'echarts-gl';\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n // \b需要注意的是我们不能跟 grid 一样省略 grid3D\n grid3D: {},\n // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: 'category'</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n var exponent = -(\n ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n );\n return amplitude * Math.pow(Math.E, exponent);\n }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i < 1000; i++) {\n // x, y 随机分布\n var x = Math.random() * 100 - 50;\n var y = Math.random() * 100 - 50;\n var z = gaussian(x, y);\n data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数\b\u001c据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n ...\n]\n</code></pre>\n<p>每一项都包含了<code>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 100 },\n series: [{\n type: 'scatter3D',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n["Income", "Life Expectancy", "Population", "Country", "Year"],\n[815, 34.05, 351014, "Australia", 1800],\n[1314, 39, 645526, "Canada", 1800],\n[985, 32, 321675013, "China", 1800],\n[864, 32.2, 345043, "Cuba", 1800],\n[1244, 36.5731262, 977662, "Finland", 1800],\n...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get('data/asset/data/life-expectancy-table.json', function (data) {\n myChart.setOption({\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5\n }\n ]\n })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {},\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'category'\n },\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Year',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {\n viewControl: {\n // 使用正交投影。\n projection: 'orthographic'\n }\n },\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'log'\n },\n zAxis3D: {},\n visualMap: {\n calculable: true,\n max: 100,\n // 维度的名字默认就是表头的属性名\n dimension: 'Life Expectancy',\n inRange: {\n color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n }\n },\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Population',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y <= 50; y++) {\n for (var x = -50; x <= 50; x++) {\n var z = gaussian(x, y);\n data.push([x, y, z]);\n }\n}\noption = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 60 },\n series: [{\n type: 'surface',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"},"在微信小程序中使用 ECharts":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://github.com/ecomfe/echarts-for-weixin/raw/master/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>'pages/bar/index'</code>。</p>\n<p><code>index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n "usingComponents": {\n "ec-canvas": "../../ec-canvas/ec-canvas"\n }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code>pages/bar/index.wxml</code> 中使用 <code><ec-canvas></code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code><ec-canvas></code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\"><view class="container">\n <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>\n</view>\n</code></pre>\n<p>其中 <code>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height\n });\n canvas.setChart(chart);\n\n var option = {\n ...\n };\n chart.setOption(option);\n return chart;\n}\n\nPage({\n data: {\n ec: {\n onInit: initChart\n }\n }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"}}}}
\ No newline at end of file
diff --git a/en/404.html b/en/404.html
index 4bd42fa..094272a 100644
--- a/en/404.html
+++ b/en/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/api.html b/en/api.html
index 3f6df1c..c7a596f 100644
--- a/en/api.html
+++ b/en/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'api',
initHash: 'echarts',
@@ -28,7 +28,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -55,7 +55,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/en/builder.html b/en/builder.html
index dbf28a8..c349248 100644
--- a/en/builder.html
+++ b/en/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/changelog.html b/en/changelog.html
index 608f94b..7289c9c 100644
--- a/en/changelog.html
+++ b/en/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/cheat-sheet.html b/en/cheat-sheet.html
index e332718..e305d71 100644
--- a/en/cheat-sheet.html
+++ b/en/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/coding-standard.html b/en/coding-standard.html
index 9dfdb37..d0c56e3 100644
--- a/en/coding-standard.html
+++ b/en/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/committers.html b/en/committers.html
index 4bcebdc..e8889c1 100644
--- a/en/committers.html
+++ b/en/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/dependencies.html b/en/dependencies.html
index 007b8f7..b2f9354 100644
--- a/en/dependencies.html
+++ b/en/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/documents/en/api.json b/en/documents/en/api.json
index ef9e190..18f955d 100644
--- a/en/documents/en/api.json
+++ b/en/documents/en/api.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number\n renderer?: string\n width?: number|string\n height? number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p> Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p> ECharts 3 supports using <code>canvas</code> element as container directly, thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code>theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p> Supports <code>'canvas'</code> or <code>'svg'</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code>group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p> Map name, referring to <code>map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p> Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p> <strong>For example <a href=\"https://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('USA', usaJson, {\n // Move Alaska to the bottom left of United States\n Alaska: {\n // Upper left longitude\n left: -131,\n // Upper left latitude\n top: 25,\n // Range of longitude\n width: 15\n },\n // Hawaii\n Hawaii: {\n left: -110,\n top: 28,\n width: 5\n },\n // Puerto Rico\n 'Puerto Rico': {\n left: -76,\n top: 26,\n width: 2\n }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registed map in the following format:</p>\n<pre><code class=\"lang-js\">{\n // geoJson data of the map\n geoJson: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code>opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code>ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code>registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code>name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code>{type: name}</code>.</p>\n<p>For example:</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('myCustomShape', MyShape);\n\nvar option = {\n series: {\n type: 'custom',\n coordinateSystem: 'none',\n renderItem: function (params, api) {\n return {\n type: 'myCustomShape',\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: 'red'\n }\n };\n },\n data: [[10, 20, 30, 40]]\n }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code>'circle'</code>, <code>'sector'</code>, <code>'ring'</code>, <code>'polygon'</code>, <code>'polyline'</code>, <code>'rect'</code>, <code>'line'</code>, <code>'bezierCurve'</code>, <code>'arc'</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n x: number,\n y: number,\n width: number,\n height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code>undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n notMerge: ...,\n lazyUpdate: ...,\n silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p> Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p> Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p> Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by <code>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n title: [{...}],\n legend: [{...}],\n grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n visualMap: {\n inRange: {\n color: ...\n }\n }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p> Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code>resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'dataZoom',\n start: 20,\n end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n type: 'dataZoom',\n batch: [{\n // first dataZoom component\n start: 20,\n end: 30\n }, {\n // second dataZoom component\n dataZoomIndex: 1,\n start: 10,\n end: 20\n }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event names are all in lower-cases, for example, <code>'click'</code>, <code>'mousemove'</code>, <code>'legendselected'</code></p>\n<p> <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code>query</code></p>\n<p> Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p> If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\"> chart.on('click', 'series', function () {...});\n chart.on('click', 'series.line', function () {...});\n chart.on('click', 'dataZoom', function () {...});\n chart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p> If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\"> {\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n }\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n });\n chart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n });\n chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n });\n chart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n });\n chart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n })\n chart.on('click', {targetName: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method is called.\n });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p> Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p> Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code>handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted.\n value: Array|string\n // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n) => Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id 'bb':\nchart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);\n// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id 'g1'.\nchart.convertToPixel({gridId: 'g1'}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-js\">// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: 'k2'}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id 'k2'.\nchart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array|string\n // Conversion result\n) => Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array\n) => boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is 'z'.\nchart.containPixel({gridId: 'z'}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is 'a'.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p> Optional; type of loading animation; only <code>'default'</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">default: {\n text: 'loading',\n color: '#c23531',\n textColor: '#000',\n maskColor: 'rgba(255, 255, 255, 0.8)',\n zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n pixelRatio: 2,\n backgroundColor: '#fff'\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray,\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenario, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code>appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code>?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>'scroll'</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // index of series, which is optional when trigger of tooltip is axis\n seriesIndex?: number,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>Parameter <code>position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'selectDataRange',\n // select a value range between 20 and 40\n selected: [20, 40],\n // cancel selecting the second range\n selected: { 1: false },\n // cancel selecting `excellent` category\n selected: { 'excellent': false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area is a "coodinate system area", belonging\n // to a geo coordinate system with getIndex: 0.\n // We can also use xAxisIndex or yAxisIndex to indicate that\n // this area belongs to a catesian coodinate system.\n // If no coordinate system is specified, this area is a\n // "global area", which does not belong to any coordinate system.\n // If an area belongs to a coordinate system, this area moves\n // and scales alone with the coordinate system.\n geoIndex: 0,\n // xAxisIndex: 0,\n // yAxisIndex: 0,\n\n // Optional: 'polygon', 'rect', 'lineX', 'lineY'\n brushType: 'polygon',\n\n // Only for "global area", define the area with the pixel coordinates.\n range: [\n ...\n ],\n\n // Only for "coordinate system area", define the area with the\n // coordinates.\n coordRange: [\n // In this case, the area is in a geo coordinate system, so\n // this is [longitude, latitude].\n [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n ]\n },\n ... // Other areas.\n ]\n});\n</code></pre>\n<p>The content of <code>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is 'rect':\n <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is 'lineX' or 'lineY':\n <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is 'polygon':\n <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is "global area", we should use <code>range</code>.</li>\n<li>If the area is "coordinate system area" (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is "pixel", while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n key: 'brush',\n brushOption: {\n // See more info in the `brushType` of "brush component".\n // If set as `false`, the mouse is disabled to brush.\n brushType: string,\n // See more info in the `brushModel` of "brush component".\n // IF not set, use the `brushMode` of brush component.\n brushMode: string\n }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n console.log(params);\n});\n\nmyChart.on('legendselectchanged', function (params) {\n console.log(params);\n});\n\nchart.on('click', 'series.line', function (params) {\n console.log(params);\n});\n\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {\n console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code>percent</code>. Please refer to callback <code>params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code>legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in <code>data</code> of <code>series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalCursorTaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number\n renderer?: string\n width?: number|string\n height? number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p> Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p> ECharts 3 supports using <code>canvas</code> element as container directly, thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code>theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p> Supports <code>'canvas'</code> or <code>'svg'</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code>group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p> Map name, referring to <code>map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p> Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p> <strong>For example <a href=\"https://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('USA', usaJson, {\n // Move Alaska to the bottom left of United States\n Alaska: {\n // Upper left longitude\n left: -131,\n // Upper left latitude\n top: 25,\n // Range of longitude\n width: 15\n },\n // Hawaii\n Hawaii: {\n left: -110,\n top: 28,\n width: 5\n },\n // Puerto Rico\n 'Puerto Rico': {\n left: -76,\n top: 26,\n width: 2\n }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-js\">{\n // geoJson data of the map\n geoJson: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code>opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code>ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code>registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code>name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code>{type: name}</code>.</p>\n<p>For example:</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('myCustomShape', MyShape);\n\nvar option = {\n series: {\n type: 'custom',\n coordinateSystem: 'none',\n renderItem: function (params, api) {\n return {\n type: 'myCustomShape',\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: 'red'\n }\n };\n },\n data: [[10, 20, 30, 40]]\n }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code>'circle'</code>, <code>'sector'</code>, <code>'ring'</code>, <code>'polygon'</code>, <code>'polyline'</code>, <code>'rect'</code>, <code>'line'</code>, <code>'bezierCurve'</code>, <code>'arc'</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n x: number,\n y: number,\n width: number,\n height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code>undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n notMerge: ...,\n lazyUpdate: ...,\n silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p> Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p> Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p> Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by <code>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n title: [{...}],\n legend: [{...}],\n grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n visualMap: {\n inRange: {\n color: ...\n }\n }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p> Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code>resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'dataZoom',\n start: 20,\n end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n type: 'dataZoom',\n batch: [{\n // first dataZoom component\n start: 20,\n end: 30\n }, {\n // second dataZoom component\n dataZoomIndex: 1,\n start: 10,\n end: 20\n }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event names are all in lower-cases, for example, <code>'click'</code>, <code>'mousemove'</code>, <code>'legendselected'</code></p>\n<p> <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code>query</code></p>\n<p> Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p> If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\"> chart.on('click', 'series', function () {...});\n chart.on('click', 'series.line', function () {...});\n chart.on('click', 'dataZoom', function () {...});\n chart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p> If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\"> {\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n }\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n });\n chart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n });\n chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n });\n chart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n });\n chart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n })\n chart.on('click', {targetName: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method is called.\n });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p> Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p> Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code>handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted.\n value: Array|string\n // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n) => Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id 'bb':\nchart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);\n// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id 'g1'.\nchart.convertToPixel({gridId: 'g1'}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-js\">// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: 'k2'}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id 'k2'.\nchart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array|string\n // Conversion result\n) => Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array\n) => boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is 'z'.\nchart.containPixel({gridId: 'z'}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is 'a'.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p> Optional; type of loading animation; only <code>'default'</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">default: {\n text: 'loading',\n color: '#c23531',\n textColor: '#000',\n maskColor: 'rgba(255, 255, 255, 0.8)',\n zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n pixelRatio: 2,\n backgroundColor: '#fff'\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray,\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenario, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code>appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code>?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>'scroll'</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // index of series, which is optional when trigger of tooltip is axis\n seriesIndex?: number,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>Parameter <code>position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'selectDataRange',\n // select a value range between 20 and 40\n selected: [20, 40],\n // cancel selecting the second range\n selected: { 1: false },\n // cancel selecting `excellent` category\n selected: { 'excellent': false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area is a "coodinate system area", belonging\n // to a geo coordinate system with getIndex: 0.\n // We can also use xAxisIndex or yAxisIndex to indicate that\n // this area belongs to a catesian coodinate system.\n // If no coordinate system is specified, this area is a\n // "global area", which does not belong to any coordinate system.\n // If an area belongs to a coordinate system, this area moves\n // and scales alone with the coordinate system.\n geoIndex: 0,\n // xAxisIndex: 0,\n // yAxisIndex: 0,\n\n // Optional: 'polygon', 'rect', 'lineX', 'lineY'\n brushType: 'polygon',\n\n // Only for "global area", define the area with the pixel coordinates.\n range: [\n ...\n ],\n\n // Only for "coordinate system area", define the area with the\n // coordinates.\n coordRange: [\n // In this case, the area is in a geo coordinate system, so\n // this is [longitude, latitude].\n [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n ]\n },\n ... // Other areas.\n ]\n});\n</code></pre>\n<p>The content of <code>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is 'rect':\n <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is 'lineX' or 'lineY':\n <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is 'polygon':\n <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is "global area", we should use <code>range</code>.</li>\n<li>If the area is "coordinate system area" (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is "pixel", while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n key: 'brush',\n brushOption: {\n // See more info in the `brushType` of "brush component".\n // If set as `false`, the mouse is disabled to brush.\n brushType: string,\n // See more info in the `brushModel` of "brush component".\n // IF not set, use the `brushMode` of brush component.\n brushMode: string\n }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n console.log(params);\n});\n\nmyChart.on('legendselectchanged', function (params) {\n console.log(params);\n});\n\nchart.on('click', 'series.line', function (params) {\n console.log(params);\n});\n\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {\n console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code>percent</code>. Please refer to callback <code>params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code>legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in <code>data</code> of <code>series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalCursorTaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
diff --git a/en/documents/en/tutorial.json b/en/documents/en/tutorial.json
index 338e03d..6b1aaa2 100644
--- a/en/documents/en/tutorial.json
+++ b/en/documents/en/tutorial.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"Get Started with ECharts in 5 minutes":{"type":["*"],"description":"<h2 id=\"installing-echarts\">Installing ECharts</h2>\n<p>First, install ECharts using one of the following methods:</p>\n<ul>\n<li><p>The <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">official download page</a>, has different builds for most common use cases. If you would like to include all packages, you can download <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">the full minified version</a>.</p>\n</li>\n<li><p>From the latest <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> release, you can find the latest version of echarts in <code>dist</code> directory of the unzipped files.</p>\n</li>\n<li><p>Using npm: <code>npm install echarts --save</code>. <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Use%20ECharts%20with%20webpack\" target=\"_blank\">Using ECharts with webpack</a></p>\n</li>\n<li><p>Using the <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">online build tool</a> (Currently available in Chinese only).</p>\n</li>\n</ul>\n<h2 id=\"including-echarts\">Including ECharts</h2>\n<p>ECharts 3 no longer requires using AMD to load packages, and the AMD loader is no longer included in ECharts. Instead, ECharts should be included using a traditional <code><script></code> tag:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- including ECharts file -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"draw-a-simple-chart\">Draw a simple chart</h2>\n<p>Before drawing charts, we need to prepare a DOM container with width and height for ECharts.</p>\n<pre><code><body>\n <!-- preparing a DOM with width and height for ECharts -->\n <div id="main" style="width:600px; height:400px;"></div>\n</body>\n</code></pre><p>Then we can initialize an ECharts instance using <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a>, and create a simple bar chart with <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a>. Below is the complete code.</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- including ECharts file -->\n <script src="echarts.js"></script>\n</head>\n<body>\n <!-- prepare a DOM container with width and height -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // based on prepared DOM, initialize echarts instance\n var myChart = echarts.init(document.getElementById('main'));\n\n // specify chart configuration item and data\n var option = {\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // use configuration item and data specified to show chart\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>You've made your first chart!</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>For more examples, go to the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a></p>\n"},"Create Custom Build of ECharts":{"type":["*"],"description":"<p>In most cases, ECharts builds can be downloaded from the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">download page</a> or from the <code>echarts/dist</code> directory in our <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub project</a>, where\nthese pre-builds are provided:</p>\n<ul>\n<li>Complete verion: <code>echarts/dist/echarts.js</code>, including all charts and components (see <code>echarts/echarts.all.js</code> for detail), but has maximum file size.</li>\n<li>Common version: <code>echarts/dist/echarts.common.js</code>, including common charts and components (see <code>echarts/echarts.common.js</code> for detail), moderate file size.</li>\n<li>Simple version: <code>echarts/dist/echarts.simple.js</code>, including a smaller subset of the most common charts and components (see <code>echarts/echarts.simple.js</code> for detail), small file size.</li>\n</ul>\n<p>If it is important for your use case to reduce the size of your ECharts dependency, you can customize your ECharts build by using one of these approaches:</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">Online custom build tool</a> is relatively convenient (Currently available in Chinese only)</li>\n<li>The script <code>echarts/build/build.js</code> found in the project is flexible for module selecting, and supports multi-language builds</li>\n<li>Build ECharts and your project directly by using tools such as <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>, <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a></li>\n</ul>\n<p>Below are some examples to illustrate the latter two approaches.</p>\n<h2 id=\"prepare-create-our-project-and-install-echarts\">Prepare: create our project and install echarts</h2>\n<p>Create a sample project using the command line</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>Then in the <code>myProject</code> directory, initialize <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> environment and install echarts (assume that <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> has been installed):</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>The installed echarts is in the <code>myProject/node_modules</code> directory, which can be used in our project directly. For example:</p>\n<p>Use ES Module:</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>Use CommonJS:</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>Next, we just describe our examples in ES Module way.</p>\n<h2 id=\"create-custom-build-by-echarts-build-build-js\">Create custom build by <code>echarts/build/build.js</code></h2>\n<p>In this example, for minimizing file size, we will build a echarts bundle with only pie chart included, and create a web page to show it.</p>\n<p>echarts has provided a script <code>echarts/build/build.js</code> as a build tool (<a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> is required to execute it). Now we can use the command below in the <code>myProject</code> directory to check its help info:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>These options can be used in this example:</p>\n<ul>\n<li><code>-i</code>: Entry file of the echarts code. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>-o</code>: The bundle file path. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>--min</code>: Whether to compress file (not by default), and remove the code that is for printing error and warning info.</li>\n<li><code>--lang <language shortcut or file path></code>: Whether to use the specified language (Chinese by default). For example: <code>--lang en</code> means using English, <code>--lang my/langXX.js</code> means using <code><cwd>/my/langXX.js</code> to substitute <code>echarts/lib/lang.js</code> while buiding.</li>\n<li><code>--sourcemap</code>: Whether to output source map, which is useful in debug.</li>\n<li><code>--format</code>: The format of output. Can be <code>'umb'</code>(default), <code>'amd'</code>, <code>'iife'</code>, <code>'cjs'</code>, <code>'es'</code>.</li>\n</ul>\n<p>Now we want to create a echarts bundle that only supports pie chart, we should firstly create an entry file (say <code>myProject/echarts.custom.js</code>) to import modules we need:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts and export them.\nexport * from 'echarts/src/echarts';\n// Import pie chart.\nimport 'echarts/src/chart/pie';\n// In this case, modules in either `echarts/src` or `echarts/lib`\n// can be imported (but should not be mixed). See\n// "Use `echarts/lib/**` or `echarts/src/**`" below.\n</code></pre>\n<p>Then we can use command below in <code>myProject</code> directory to build the bundle:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>Now the bundle <code>myProject/lib/echarts.custom.min.js</code> has been created. Then we can create a web page (say <code>myProject/pie.html</code>) to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- import the bundle `lib/echarts.custom.js`. -->\n <script src="lib/echarts.custom.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // Create a pie chart:\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/pie.html</code> in a browser, we can see the pie chart:</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"modules-that-are-permitted-to-be-imported\">Modules that are permitted to be imported</h2>\n<p>All of the permitted modules are declared in <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> and <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a>. Other modules in the source code of echarts and zrender <strong>SHOULD NOT BE IMPORTED</strong>, because they are inner modules, whose interfaces and functionalities may be modified in the subsequent upgrades of echarts.</p>\n<h2 id=\"use-echarts-lib-or-echarts-src-\">Use <code>echarts/lib/**</code> or <code>echarts/src/**</code>?</h2>\n<ul>\n<li>If intending to import part of echarts modules in your project and build yourself, only <code>echarts/lib/**</code> can be used, <code>echarts/src/**</code> should not be used.</li>\n<li>If using <code>echarts/build/build.js</code> to make a bundle, either <code>echarts/lib/**</code> or <code>echarts/src/**</code> can be used (should not be mixed), where <code>echarts/src/**</code> brings smaller bundle size a little.</li>\n</ul>\n<blockquote>\n<p>Reason: currently, <code>echarts/src/**</code> is the source code that using ES Module, and they are transpiled to CommonJS code and placed in <code>echarts/lib/**</code>. (This transformation is for backward compatible with old version of NodeJS and webpack that do not support ES Module.)\nHistorically, echarts extensions and user projects have been using the package path <code>echarts/lib/**</code>. So it should not be changed, otherwise, mixed using both <code>echarts/src/**</code> and <code>echarts/lib/**</code> will generate two echarts namespace and bring some problems. But it is not an issue when using <code>echarts/build/build.js</code> to create a bundle, where ES modules in <code>echarts/src/**</code> can be analyzed statically for smaller bundle size.</p>\n</blockquote>\n<h2 id=\"build-echarts-and-our-project-directly-by-rollup\">Build echarts and our project directly by rollup</h2>\n<p>Now we have known that how to create custom build by <code>echarts/build/build.js</code>. Alternatively, we can bundle echarts and our project directly by the tool like <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> or <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>. In some project, this approach is required. Next we only go with <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, because <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> and <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> are in the similar way.</p>\n<p>Firstly install <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> in <code>myProject</code> directory:</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>Then we create a project JS file <code>myProject/line.js</code> for line chart rendering:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts.\nimport * as echarts from 'echarts/lib/echarts';\n// Import line chart.\nimport 'echarts/lib/chart/line';\n// Import components of tooltip, title and toolbox.\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// Render line chart and components.\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>The created module <code>myProject/line.js</code> can not work directly in the browsers that do not support ES Module. So we need to build them. Before we run <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, a config file <code>myProject/rollup.config.js</code> should be created:</p>\n<pre><code class=\"lang-js\">// Responsible for looking for modules in `node_module` directory. For example,\n// if there is code `import 'echarts/lib/chart/line';`, the module file\n// `node_module/echarts/lib/chart/line.js` can be find by this plugin.\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// Responsible for compress code.\nimport uglify from 'rollup-plugin-uglify';\n// Support multi-language.\nimport ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // The entry file.\n input: './line.js',\n plugins: [\n nodeResolve(),\n ecLangPlugin({lang: 'en'}), // Use english\n // Remove the snippet in `__DEV__`, which mainly prints error log.\n uglify()\n ],\n output: {\n // Output file in the format of 'umd'.\n format: 'umd',\n // Output source map.\n sourcemap: true,\n // The path of the output bundle.\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>Then execute the following command in <code>myProject</code> directory to start the build:</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p><code>-c</code> indicate <code>rollup</code> to use <code>myProject/rollup.config.js</code> as the config file.</p>\n</blockquote>\n<p>The created bundle <code>myProject/lib/line.min.js</code> includes project code and part of echarts code that we requried. Now we create a web page <code>myProject/line.html</code> to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- Import the created bundle: -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/line.html</code> in a browser, we will get:</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"multi-language\">Multi-language</h2>\n<p>In the example above, we can notice that the label of the <code>toolbox</code> component is in English. Essentially any text can be customized by <code>echarts option</code>, but if we want to show label in a certain language by default, we have to specify the language while building the code.</p>\n<p>For example:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>It means that the pre-defined English text is used. Moreover, can be <code>--lang fi</code>.</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>It means that <code>myProject/my/langXX.js</code> is used to substitute <code>myProject/node_modules/echarts/lib/lang.js</code> while performing build. So we can customize text in our language in <code>myProject/my/langXX.js</code>. Notice, <code>-o</code> or <code>--output</code> must be specified in the approach.</p>\n<p>Besides, the same lang parameter can be pass to <code>echarts/build/rollup-plugin-ec-lang</code>.</p>\n"},"Use ECharts with webpack":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.</p>\n<h2 id=\"use-npm-to-install-echarts\">Use npm to install ECharts</h2>\n<p>Before <code>3.1.1</code> version, ECharts package on npm was maintained by third-party. Since <code>3.1.1</code>, ECharts and zrender on npm are maintained officially by <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> team.</p>\n<p>You can use the following command to install ECharts with npm.</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"include-echarts\">Include ECharts</h2>\n<p>ECharts and zrender installed by npm will be placed under <code>node_modules</code>. You can obtain echarts directly in project with <code>require('echarts')</code>.</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"include-echarts-charts-and-components-on-demand\">Include ECharts charts and components on demand</h2>\n<p>By default, <code>require('echarts')</code> returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.</p>\n<p>For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.</p>\n<pre><code class=\"lang-js\">// include ECharts main module\nvar echarts = require('echarts/lib/echarts');\n// include bar chart\nrequire('echarts/lib/chart/bar');\n// include tooltip and title component\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts introductory example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>Available modules see <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>The same goes for another popular packaging tools <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>, which will not be introduced again here. Using <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> to make a custom build of echarts is introduced in <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">Create Custom Build of ECharts</a></p>\n"},"Customized Chart Styles":{"type":["*"],"description":"<p>ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"drawing-nightingale-rose-chart\">Drawing Nightingale Rose Chart</h2>\n<p><a href=\"#Get%20Started%20with%20ECharts%20in%205%20minutes\">Getting started tutorial</a> introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need <code>xAxis</code>，<code>yAxis</code> either.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: 'Reference Page',\n type: 'pie',\n radius: '55%',\n data:[\n {value:400, name:'Searching Engine'},\n {value:335, name:'Direct'},\n {value:310, name:'Email'},\n {value:274, name:'Alliance Advertisement'},\n {value:235, name:'Video Advertisement'}\n ]\n }\n ]\n})\n</code></pre>\n<p>With the above code, we can create a simple pie chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Here, the value of <code>data</code> is not a single value, as that of the example in get started. Instead, it's an object containing <code>name</code> and <code>value</code>. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> for more information.</p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">Pie charts</a> of EChart can be made into Nightingale rose charts with <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> field.</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>Nightingale rose charts use radius to represent data value.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"configuring-shadow\">Configuring Shadow</h2>\n<p>Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by <a href=\"#series-pie.itemStyle\">itemStyle</a> in series.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // shadow size\n shadowBlur: 200,\n // horizontal offset of shadow\n shadowOffsetX: 0,\n // vertical offset of shadow\n shadowOffsetY: 0,\n // shadow color\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>The effect after added shadow is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Each <code>itemStyle</code> has <code>emphasis</code> as the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"dark-background-and-light-text\">Dark Background and Light Text</h2>\n<p>Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.</p>\n<p>Background is a global configurable object, so we can set it directly with <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a> of option.</p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>Text style can also be set globally in <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>.</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>On the other hand, we can also set them in <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a> of each series.</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>We also need to set line color of pie chart to be lighter.</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>Thus, we can get the following effect.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Similar to <code>itemStyle</code>, <code>label</code> and <code>labelLine</code> also have <code>emphasis</code> children.</p>\n<h2 id=\"setting-fan-colors\">Setting Fan Colors</h2>\n<p>Fan colors can be set in <code>itemStyle</code>:</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.</p>\n<p>Each fan's color can be set under <code>data</code>:</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through <a href=\"#option.html#visualMap\">visualMap</a>.</p>\n<pre><code class=\"lang-js\">visualMap: {\n // hide visualMap component; use lightness mapping only\n show: false,\n // mapping with min value at 80\n min: 80,\n // mapping with max value at 600\n max: 600,\n inRange: {\n // mapping lightness from 0 to 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>The final effect is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n"},"Overview of Style Customization":{"type":["*"],"description":"<p>This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Pallette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<p>Other article about styling can be check in <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a> and <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Theme</strong></p>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\">Examples page</a>, "Theme" can be selected, and view the result directly.</p>\n<p>Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named '<code>'light'</code> and <code>'dark'</code>. They can be used as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">Theme Builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<pre><code class=\"lang-js\">var xhr = new XMLHttpRequest();\n// Assume the theme name is "vintage".\nxhr.open('GET', 'xxx/xxx/vintage.json', true);\nxhr.onload = function () {\n var themeJSON = this.response;\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n // ...\n});\nxhr.send();\n</code></pre>\n<p>If a them is downloaded as a JS file, it will auto register itself:</p>\n<pre><code class=\"lang-js\">// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Palette</strong></p>\n<p>Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<pre><code class=\"lang-js\">option = {\n // Global palette:\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // A palette only work for the series:\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // A palette only work for the series:\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</strong></p>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href=\"option.html\" target=\"_blank\">option</a>, style related options can be set in various place, including <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>, <a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>, <a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>, <a href=\"option.html#series.label\" target=\"_blank\">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc., although they may occur in different place according to different series or components.</p>\n<p>There is another article for style setting, <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Style of emphasis state</strong></p>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> property. The options in <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> is the same as the ones for normal state, for example:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (visualMap component)</strong></p>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n"},"Loading and Updating of Asynchronous Data":{"type":["*"],"description":"<h2 id=\"asynchronous-loading\">Asynchronous Loading</h2>\n<p>Data in <a href=\"#getting-started\">Get started</a> is directly filled in <code>setOption</code> after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in <code>ECharts</code> is very easy. After initialization, you can pass in data and configuration item through <code>setOption</code> after data obtained through jQuery and other tools at any time.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// show title. legend and empty axis\nmyChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: []\n }]\n});\n\n// Asynchronous data loading \n$.get('data.json').done(function (data) {\n // fill in data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // find series by name\n name: 'Sales',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>For example: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>In ECharts, updating data need to find the corresponding series through <code>name</code>. In the above example, updating can be performed correctly according to series order if <code>name</code> is not defined. But in most cases, it is recommended to update data with series <code>name</code> information. </p>\n<h2 id=\"loading-animation\">Loading Animation</h2>\n<p>If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading. </p>\n<p>ECharts provides a simple loading animation by default. You only need <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> to show, and then use <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> to hide loading animation after data loading.</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>Effects are as followed: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"dynamic-data-updating\">Dynamic Data Updating</h2>\n<p>ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.</p>\n<p>All data updating are through <a href=\"#api.html#echartsInstance.setOption\">setOption</a>. You only need to get data as you wish, fill in data to <a href=\"#api.html#echartsInstance.setOption\">setOption</a> without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation. </p>\n<blockquote>\n<p>In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.</p>\n</blockquote>\n<p>See details in the following example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"Dataset":{"type":["*"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>Before ECharts 4, data was only able to declared in each series, for example:</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>This approach is easy to be understand and is flexible when some series needs special data definitions. But the shortcomings are also obvious: some data extra works are usually needed to split the original data to each series, and it not supports sharing data in different series, moreover, it is not good for encode.</p>\n<p>ECharts4 starts to provide <code>dataset</code> component, which brings benefits below:</p>\n<ul>\n<li>Benefit from <code>dataset</code>, we can follow the common methodology of data visualization: based on data, specify the mapping (via the option <a href=\"option.html#series.encode\" target=\"_blank\">encode</a>) from data to visual.</li>\n<li>Data can be managed and configured separately from other configurations.</li>\n<li>Data can be reused by different series and components.</li>\n<li>Support more common data format (like 2d-array, object-array), to avoid data transform works for users.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Get started</strong></p>\n<p>This is a simplest example of <code>dataset</code>:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare X axis, which is a category axis, mapping\n // to the first column by default.\n xAxis: {type: 'category'},\n // Declare Y axis, which is a value axis.\n yAxis: {},\n // Declare several series, each of them mapped to a\n // column of the dataset by default.\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>Or the common format object-array is also supported:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Here the declared `dimensions` is mainly for providing the order of\n // the dimensions, which enables ECharts to apply the default mapping\n // from dimensions to axes.\n // Alternatively, we can declare `series.encode` to specify the mapping,\n // which will be introduced later.\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic</strong></p>\n<p>In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.</p>\n<p>Generally, this mapping can be performed:</p>\n<ul>\n<li>Configure whether columns or rows of a dataset will mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. <code>'column'</code> is the default value.</li>\n<li>Configure the mapping rule from dimensions (a dimension means a column/row) to axes in coordinate system, tooltip, labels, color, symbol size, etc. This can be specified by <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> and <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> (if visual encoding is required). The example above does not give a mapping rule, so ECharts make default mapping by common sense: because x axis is a category axis, the first column is mapped to the x axis, and each series use each subsequent column in order.</li>\n</ul>\n<p>Let's illustrate them in detail below.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping by column or row</strong></p>\n<p>Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. The optional values are:</p>\n<ul>\n<li>'column': series are positioned on each columns of the dataset. Default value.</li>\n<li>'row': series are positioned on each row of the dataset.</li>\n</ul>\n<p>See the example below:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series is in the first cartesian (grid), and each\n // is mapped to a row.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series is in the second cartesian (grid), and each\n // is mapped to a column.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Dimension</strong></p>\n<p>Before introducing <code>encode</code>, we should clarify the concept of <code>dimension</code>.</p>\n<p>Most of common charts describe data in the format of "two-dimensions table" (note that the meaning of the word "dimension" in "two-dimension table" is not the same as the dimensions in ECharts. \bIn order not to be confusing, we use "2d-table", "2d-array" below). In the examples above, we use 2d-array to carry the 2d-table. When we set <code>seriesLayoutBy</code> as <code>'column'</code>, namely, mapping columns to series, each column is called a dimension, and each row is a data item. When we set <code>seriesLayoutBy</code> as <code>'row'</code>, namely, mapping rows to series, each row is called a dimension, and each column is a data item.</p>\n<p>Dimension can have its name to displayed on charts. Dimension name can be defined on the first row/column. Take the code above as an example, <code>'score'</code>、<code>'amount'</code>、<code>'product'</code> are dimension names, and data start from the second row. By default ECharts auto detect whether the first row/column of <code>dataset.source</code> is dimension name or data. Use can also set <code>dataset.sourceHeader</code> as <code>true</code> to mandatorily specify the first row/column is dimension name, or set as <code>false</code> to indicate the data start from the first row/column.</p>\n<p>The definitions of the dimensions can also be provided separately in <code>dataset.dimensions</code> or <code>series.dimensions</code>, where not only dimension name, but also dimension type can be specified:</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n // Each item can be object or string.\n {name: 'score'},\n // A string indicates the dimension name.\n 'amount',\n // Dimension type can be specified.\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // Dimensions declared in series will be adapted with higher priority.\n dimensions: [\n null, // Set as null means we dont want to set dimension name.\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>Generally, we do not need to set dimensions types, because it can be auto detected based on data by ECharts. But in some cases, for example, the data is empty, the detection might not be accurate, where dimension type can be set manually.</p>\n<p>The optional values of dimension types can be:</p>\n<ul>\n<li><code>'number'</code>: Normal data, default value.</li>\n<li><code>'ordinal'</code>: Represents string data like category data or text data. ECharts will auto detect them by default. They can be set manually if the detection fail.</li>\n<li><code>'time'</code>: Represents time data, where it is supported that parse time string to timestamp. For example, if users need to parse '2017-05-10' to timestamp, it should be set as <code>time</code> type. If the dimension is used on a time axis (<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> is <code>'time'</code>), it will be auto set to <code>time</code> type. The supported time string is listed in <a href=\"option.html#series.data\" target=\"_blank\">data</a>.</li>\n<li><code>'float'</code>: If set as <code>'float'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n<li><code>'int'</code>: If set as <code>'int'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic (encode)</strong></p>\n<p>Having the concept of dimension clarified, we can use <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> to map data to graphic:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // Map dimension "amount" to the X axis.\n x: 'amount',\n // Map dimension "product" to the Y axis.\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>There is an other example for <code>encode</code>:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (color, symbol, etc.)</strong></p>\n<p>We can use <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its <a href=\"option.html#visualMap\" target=\"_blank\">doc</a>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Default encoding</strong></p>\n<p>For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no <code>encode</code> option is specified. (If <code>encode</code> option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:</p>\n<ul>\n<li>In coordinate system (like cartesian(grid), polar):<ul>\n<li>If category axis (i.e., axis.type is <code>'category'</code>) exists, map the first column/row to the axis, and each series use a following column/row.</li>\n<li>If no category axis exists, and the coordinate system contains two axis (like X Y in cartesian), each series use two columns/rows, one for a axis.</li>\n</ul>\n</li>\n<li>If no coordinate system (like pie chart):<ul>\n<li>Use the first column/row as item name, and the second column/row as item value.</li>\n</ul>\n</li>\n</ul>\n<p>If the default rule does not meet the requirements, configure the <code>encode</code> yourself please.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Q & A</strong></p>\n<p>Q: How to map the third column to X axis, and map the fifth column to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n // Notice that the dimension index is based on 0,\n // thus the third column is dimensions[2].\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>Q: How to map the third row th X axis, and map the fifth row to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>Q: How to use the values in the second column in label.</p>\n<p>A:\nThe <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a> supports refer value in a certain dimension. For example:</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` means use the value in the "score" dimension.\n // `'{@[4]}'` means use the value in dimensions[4].\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>Q: How to display the second column and the third column in tooltip?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>Q: If there is no dimension name in dataset.source, how to give dimension name?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>Q: How to encode the fourth column in bubble size in bubble plot?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n // Use visualMap to perform visual encoding.\n visualMap: {\n show: false,\n dimension: 2, // Encode the third column.\n min: 2, // Min value is required in visualMap component.\n max: 15, // Max value is required in visualMap component.\n inRange: {\n // The range of bubble size, from 5 pixel to 60 pixel.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>Q: We have specified <code>encode</code>, but why it does not work?</p>\n<p>A: Maybe we can try to check typo, for example, the dimension name is <code>'Life Expectancy'</code>, be we typed <code>'Life Expectency'</code> in <code>encode</code> option.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Various formats in dataset</strong></p>\n<p>In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to <code>dataset.source</code>.</p>\n<blockquote>\n<p>Some csv tools can be used to export the table data to JSON, for example, <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> or <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a>.</p>\n</blockquote>\n<p>In common used data transfer formats in JavaScript, 2d-array is a good choice to carry table data, which has been illustrated in the examples above.</p>\n<p>Besides, 2d-array, <code>dataset</code> also support key-value format as follows, which is also commonly used. But notice, the option <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> is not supported in this format.</p>\n<pre><code class=\"lang-js\">dataset: [{\n // Row based key-value format, namely, object array, is a commonly used format.\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // Column based key-value format is also supported.\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Multiple datasets and references</strong></p>\n<p>Multiple datasets can be defined, and series can refer them by <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a>.</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n source: [...],\n }, {\n source: [...]\n }, {\n source: [...]\n }],\n series: [{\n // Use the third dataset.\n datasetIndex: 2\n }, {\n // Use the second dataset.\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts3 data setting approach (series.data) can be used normally</strong></p>\n<p>The data setting approach before ECharts4 can still be used normally. If a series has declared <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>, it will be used but not <code>dataset</code>.</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>In fact, setting data via <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is not deprecated and useful in some cases. For example, for some charts, like <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>, <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, <a href=\"option.html#series-lines\" target=\"_blank\">lines</a>, that do not apply table data, <code>dataset</code> is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> is probably needed to load data incrementally. <code>dataset</code> is not supported in the case.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Others</strong></p>\n<p>Currently, not all types of series support dataset. Series that support dataset includes:</p>\n<p><code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.</p>\n<p>More types of series will support dataset in our further work.</p>\n<p>Finally, this is an example, multiple series sharing one <code>dataset</code> and having interactions:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n\n"},"Add interaction to the chart component":{"type":["*"],"description":"<p>Echarts provides many interaction components besides chart. For example:</p>\n<p><code>legend component</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>title component</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>visualmap component</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>dataline component</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>Following is an example of <code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> as an introduction of how to add this kind of component.</p>\n<p><br></p>\n<h2>Introduction of data zoom component (dataZoom)</h2>\n\n<p>Data overview by default, and detail by requirement is a basic interaction need of data visualization. <code>dataZoom</code> component can implement this function in rectangular coordinate (<a href=\"option.html#grid\" target=\"_blank\">grid</a>) and polar coordinate (<a href=\"option.html#polar\" target=\"_blank\">polar</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> component operates <em>data window zoom</em> and <em>data window translation</em> on <code>axis</code>.</li>\n</ul>\n<blockquote>\n<p>Use <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a>, <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> to specify which axis <code>dataZoom</code> controls.</p>\n</blockquote>\n<ul>\n<li><p>Multiple <code>dataZoom</code> components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.</p>\n</li>\n<li><p>Operation principle of <code>dataZoom</code> achieves <em>data window zooming</em> through <em>data filtering</em>.</p>\n<p> Different settings of data filtering modes lead to different data window zooming effects, please see: <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>.</p>\n</li>\n<li><p>Setting of <code>dataZoom</code> data window range supports two formats currently:</p>\n<ul>\n<li><p>Percentage: see <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> and <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>.</p>\n</li>\n<li><p>Absolute value: see <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> and <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom component supports several child components: </strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">Inside data zoom component (dataZoomInside)</a>: inside coordinates.</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">Slider data zoom component (dataZoomSlider)</a>: has seperate slide option.</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">Select data zoom component (dataZoomSelect)</a>: full-screen box for zoom data area. Entrance and configuration item are both in <code>toolbox</code>.</p>\n</li>\n</ul>\n<p><br></p>\n<h2>Adding dataZoom component</h2>\n\n<p>First, only add dataZoom component to x-axis. Following examples shows the code.</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // This dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n series: [\n {\n type: 'scatter', // this is scatter chart\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>which will show the following result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the <code>option.dataZoom</code> above:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // this dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n },\n { // This dataZoom component controls x-axis by dafault\n type: 'inside', // this dataZoom component is dataZoom component of inside\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n ...\n}\n</code></pre>\n<p>Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>Following result can be seen:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n\n"},"Responsive Mobile-End":{"type":["*"],"description":"<p>ECharts works in DOM nodes with user defined width and height. ECharts <em>component</em> and <em>series</em> are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.</p>\n<p>Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.</p>\n<p>To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a>.</p>\n<p><br></p>\n<h2>Location and layout of ECharts components</h2>\n\n\n<p>Most <em>component</em> and <em>series</em> follow two locating methods: </p>\n<p><br>\n<strong>left/right/top/bottom/width/height locating method:</strong></p>\n<p>Each of those six parameters can be <em>absolute value</em> or <em>percentage</em> or <em>location description</em>.</p>\n<ul>\n<li><p>Absolute value</p>\n<p> in browser pixels (px); in form of <code>number</code> (no unit); e.g.: <code>{left: 23, height: 400}</code>.</p>\n</li>\n<li><p>Percentage</p>\n<p> to the width and height of DOM container; in form of <code>string</code>; e.g.: <code>{right: '30%', bottom: '40%'}</code>.</p>\n</li>\n<li><p>Location Description</p>\n<ul>\n<li>can be set to <code>left: 'center'</code>, for horizontally centering.</li>\n<li>can be set to <code>top: 'middle'</code>, for vertically centering.</li>\n</ul>\n</li>\n</ul>\n<p>The concept of these six parameters is similar to that in CSS: </p>\n<ul>\n<li>left: distance to left border of DOM container.</li>\n<li>right: distance to right border of DOM container.</li>\n<li>top: distance to top border of DOM container.</li>\n<li>bottom: distance to bottom border of DOM container.</li>\n<li>width: width.</li>\n<li>height: height.</li>\n</ul>\n<p>Two out of the three horizontal parameters, <code>left</code>, <code>right</code>, <code>width</code>, are enough to determine the component location. For example, <code>left</code> and <code>right</code>, or <code>right</code> and <code>width</code> can both determine component location and size.\nThe same goes for vertical paramters <code>top</code>, <code>bottom</code> and <code>height</code>.</p>\n<p><br>\n<strong>Locating method of <code>center</code> / <code>radius</code>: </strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> an array in form of <code>[x, y]</code>, in which <code>x</code> and <code>y</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n</li>\n<li><p><code>radius</code></p>\n<p> an array in form of <code>[innerRadius, outerRadius]</code>, in which <code>innerRadius</code> and <code>outerRadius</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n<p> Percentage location turns out to be very useful for responsive positioning.</p>\n</li>\n</ul>\n<p><br>\n<strong>Horizontal and vertical</strong></p>\n<p>Most of ECharts's long and narrow components (such as <code>legend</code>,<code>visualMap</code>,<code>dataZoom</code>,<code>timeline</code> and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.</p>\n<p>Setting of horizontal or vertical layout is usually with component or series's <code>orient</code> or <code>layout</code> option, which can be set to <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n<p><br>\n<strong>Compatibility with ECharts2: </strong></p>\n<p>Naming of <code>x/x2/y/y2</code> in ECharts2 is still compatible, as well as the newly added <code>left/right/top/bottom</code>. But <code>left/right/top/bottom</code> is recommended.</p>\n<p>To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: <code>left: 'right'</code>, <code>left: 'left'</code>, <code>top: 'bottom'</code>, <code>top: 'top'</code>, which are equal to: <code>right: 0</code>, <code>left: 0</code>, <code>bottom: 0</code>, <code>top: 0</code>, in a more normal expression.</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> provides the ability to be responsive with container size.</p>\n<p>As shown in the following example, you may drag <strong>the circle in bottom-right corner</strong> to see the legend and series change layout position and method with container size. </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>The following format should be followed if you need to set Media Query in option:</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // here defines base option\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // each rule of media query is defined here\n {\n query: {...}, // write rule here\n option: { // write options accordingly\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // the second rule\n option: { // the second option\n legend: {...},\n ...\n }\n },\n { // default with no rules,\n option: { // when all rules fail, use this option\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>In the above example, <code>baseOption</code> and every option in <code>media</code> are all <em>simple options</em>, which are regular options containing components and series. <code>baseOption</code> is always be used, while options of every will be merged with <code>chart.mergeOption()</code> when given <code>query</code> condition is satisfied with.</p>\n<p><strong>query: </strong></p>\n<p>A <code>query</code> is in the following format: </p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>Currently there are three supported attributes:<code>width</code>, <code>height</code>, <code>aspectRatio</code> (length-to-width ratio), each of which can add <code>min</code> or <code>max</code> as prefix. E.g., <code>minWidth: 200</code> stands for when width is greater than or equal to 200px. When two attributes are written together, it means <em>and</em> in Bool logic. For example, <code>{minWidth: 200, maxHeight: 300}</code> stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.</p>\n<p><strong>option: </strong></p>\n<p>Since option in <code>media</code> is <em>simple option</em>, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // when length-to-width ratio is less than 1\n },\n option: {\n legend: { // legend is placed in middle-bottom\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // horizontal layout of legend\n },\n series: [ // left and right layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // when container width is smaller than 500\n },\n option: {\n legend: {\n right: 10, // legend is placed in middle-right\n top: '15%',\n orient: 'vertical' // vertical layout\n },\n series: [ // top and bottom layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>Priority when multiple queries are satisfied: </strong></p>\n<p>Attention: When multiple <code>query</code> are satisfied at the same time, all of them will be merged with <code>mergeOption</code> and those are defined later will be merged later, thus provides them with higher priority.</p>\n<p><strong>Query by default: </strong></p>\n<p>If an item in <code>media</code> has no not <code>query</code>, then it means <em>default value</em>, which will be used when all other rules fail.</p>\n<p><strong>Pay attention when container size changes:</strong></p>\n<p>In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.</p>\n<p>But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one <code>query option</code>, then it should also appeared in other <code>query option</code>, or it will not be able to return to the original state. (<code>left/right/top/bottom/width/height</code> are not restricted to this rule.)</p>\n<p><strong><code>media</code> in <em>composite option</em> does not support merge</strong></p>\n<p>When <code>chart.setOption(rawOption)</code> for the second, third, fourth, fifth, and etc. times, if <code>rawOption</code> is <code>composite option</code> (which means it contains <code>media</code> list), then, the new <code>rawOption.media</code> list will not merge with the old <code>media</code>. instead, it will simply replace the option. Of course, <code>rawOption.baseOption</code> will still merge with the old option normally.</p>\n<p><br>\nFinally, let's see an example combining with timeline:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n\n"},"Visual Map of Data":{"type":["*"],"description":"<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.</p>\n<p>Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into <em>lines</em>, bar charts map data into <em>length</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:<br>\n<code>symbol</code>, <code>symbolSize</code><br>\n<code>color</code>, <code>opacity</code>, <code>colorAlpha</code>, <br>\n<code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></p>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<p><br></p>\n<h2>Data and Dimension</h2>\n\n<p>Data are usually stored in <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of <code>dataItem</code>s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {...}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {...}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ]\n}\n</code></pre>\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href=\"option.html#series-scatter\" target=\"_blank\">scatter charts</a> use radius to represent the third dimension.</p>\n<p><br></p>\n<h2>visualMap Component</h2>\n\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // can define multiple visualMap components at the same time\n { // the first visualMap component\n type: 'continuous', // defined as continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined as discrete visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">visualMapContinuous</a>：</p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">visualMapPiecewise</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>Piecewise visual map component has three types:</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>Equal division of continuous data: divide equally based on <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a>;</li>\n<li>User-defined division of continuous data: divide with range in <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a>;</li>\n<li>Discrete data (data in category type): divide with <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<strong>Configuration of visualMap mapping method</strong></p>\n<p>As we have introduced above, <code>visualMap</code> maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in <a href=\"#visualMap.dimension\">visualMap.dimension</a>) to be mapped to which visual elements (see in <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>).</p>\n<p>Example A:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data, or value[3], is mapped\n seriesIndex: 4, // map with the fourth series\n inRange: { // visual configuration items in selected range\n color: ['blue', '#121122', 'red'], // defines color list of mapping\n // The largest value will be mapped to 'red',\n // and others will be interpolated\n symbolSize: [30, 100] // the smallest value will be mapped to size of 30,\n // the largest to 100,\n // and others will be interpolated\n },\n outOfRange: { // visual configuration items out of selected range\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>Example B:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // visual configuration items in selected range\n colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color\n // original color may be selected from global color palette,\n // which is not concerned by visualMap component\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>For more information, please refer to <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>.</p>\n"},"Events and Actions in ECharts":{"type":["*"],"description":"<p>User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.</p>\n<p>Binding events in ECharts 3 is though <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // printing data name in console\n console.log(params.name);\n});\n</code></pre>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> event when toggling legend (Notice here, that <code>'legendselected'</code> event will not be triggered when toggling legend), triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> event when data zooming in some area.</p>\n<h2 id=\"mouse-events-handling\">Mouse Events Handling</h2>\n<p>ECharts support regular mouse events, which includes <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. Next let's see an example of opening Baidu search page when clicks a bar chart.</p>\n<pre><code class=\"lang-js\">// initialize ECharts instance based on prepared dom\nvar myChart = echarts.init(document.getElementById('main'));\n\n// data and configuration item of specific chart\nvar option = {\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// use specified configuration item and data to show chart\nmyChart.setOption(option);\n// handle click event and redirect to corresponding Baidu search page\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>All types of mouse events have a common parameter called <code>params</code>, which is an object that contains data information of the clicked chart, whose format is as followed:</p>\n<pre><code class=\"lang-js\">{\n // component name of clicked component\n // e.g., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (useful when componentType is 'series')\n // e.g., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in option.series (useful when componentType is 'series')\n seriesIndex: number,\n // series name (useful when componentType is 'series')\n seriesName: string,\n // data name, or category name\n name: string,\n // data index in input data array\n dataIndex: number,\n // raw input data item\n data: Object,\n // Some series, such as sankey or graph, maintains both nodeData and edgeData,\n // in which case, dataType is set to be 'node' or 'edge' to identify.\n // On the other hand, most other series have only one type of data,\n // where dataType is not needed.\n dataType: string,\n // input data value\n value: number|Array\n // color of component (useful when componentType is 'series')\n color: string\n}\n</code></pre>\n<p>How to know where the mouse clicked:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // clicked on markPoint\n if (params.seriesIndex === 5) {\n // clicked on a markPoint which belongs to a series indexed with 5\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked on an edge of the graph\n }\n else {\n // clicked on a node of the graph\n }\n }\n }\n});\n</code></pre>\n<p>Use <code>query</code> to call handler only on the graphic elements of the specified components:</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n}\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('click', {element: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method called.\n});\n</code></pre>\n<p>You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // present data distribution of a single bar through pie chart\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"interaction-events-with-components\">Interaction Events with Components</h2>\n<p>Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in <a href=\"api.html#events\" target=\"_blank\">events</a>.</p>\n<p>Below is example that listens to a legend toggling:</p>\n<pre><code class=\"lang-js\">// legend toggling triggers legendselectchanged event only\nmyChart.on('legendselectchanged', function (params) {\n // obtain selecting status of clicked legend\n var isSelected = params.selected[params.name];\n // print in console\n console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);\n // print all legend status\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"triggering-component-actions-through-code-in-echarts\">Triggering Component Actions through Code in ECharts</h2>\n<p>Actions like <code>'legendselectchanged'</code> mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.</p>\n<p>ECharts 2.x triggers actions through <code>myChart.component.tooltip.showTip</code>, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through <code>myChart.dispatchAction({ type: '' })</code>, which manages all actions in a uniformed way, and may record user's event path when need.</p>\n<p>Frequently used actions and the parameters are listed in <a href=\"api.html#action\" target=\"_blank\">action</a>.</p>\n<p>Below displays how to highlight each sector of pie chart in turn through <code>dispatchAction</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"An Example: Implement Dragging":{"type":["*"],"description":"<p>This is a tiny example, introducing how to implement dragging of graphic elements in echarts. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p>\n<p><br></p>\n<h2>[ Part 1 ] Implement basic dragging</h2>\n\n<p>First of all, we create a basic <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">line chart (line series)</a>:</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n</code></pre>\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<pre><code class=\"lang-js\">// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> is used, which is the reversed process of <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>[ Part 2 ] Add tooltip component</h2>\n\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // Means disable default "show/hide rule".\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // Customize "show/hide rule", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>The API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> is used to show/hide tooltip content, where actions <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a> and <a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a> is dispatched.</p>\n<p><br></p>\n<h2>[ Part 3 ] Full code</h2>\n\n<p>Full code is shown as follow:</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n"},"Custom Series":{"type":["*"],"description":"<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is a type of series, which enable develpers to customize graphic elements rendering and generate new types of chart.</p>\n<p>Why echarts supports <code>custom series</code>? There are endless chart types in the world of data visualization, which are not enumerable. Thus only most common used chart types are built-in supported in echarts. For other chart types, it is necessary to provide an approach to make new types of chart for developers. This approach should be as simple as possible, which had better not to bothered developers with some details of implementation, such as creating and deleting graphic elements, transition animation, tooltip supporting, working with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a> or <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap\" target=\"_blank\">visualMap</a>. Having considered the factors above, a solution <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is published.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p>Let's begin the tutorial.</p>\n<p><br></p>\n<h2>(I) The method <code>renderItem</code></h2>\n\n<p>The snippet of graphic elements rendering should be written in <code>renderItem</code> method my developers. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>In the rendering phase of echarts workflow, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is called respectively for each <code>dataItem</code> in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.data\" target=\"_blank\">series.data</a>. <code>renderItem</code> is responsible for build a group of definitions of graphic elements, including graphic type, size, location, style, etc. echarts will then build graphic elements according to those definitions. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // This method will be called for each dataItem repectively.\n // Notice: it does not ensure that called according to the order\n // of `dataItem`.\n\n // Some processes, such as coordinate conversion.\n // `api.value(0)` is used to retrieve the value on the first\n // dimension in the current `dataItem`.\n var categoryIndex = api.value(0);\n // `api.coord(...)` is used to convert data values to pixel values,\n // will are necessary for graphic elements rendering.\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // `api.size(...)` is used to calculate the pixel size corresponding to\n // the a value range that the length is 1 on Y axis.\n var height = api.size([0, 1])[1] * 0.6;\n\n // The property `shape` incicates the location and size of thsi\n // element.\n // `echarts.graphic.clipRectByRect` is used for clipping the\n // rectangular when it overflow the bounding box of the current\n // coordinate system (cartesian).\n // If the rect is totally clipped, returns undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // position and location of the rectangular.\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // Bounding box of the current cooridinate system (cartesian).\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n })\n\n // Returns definitions for the current `dataItem`.\n return rectShape && {\n // 'rect' indicates that the graphic element is rectangular.\n // Can also be 'circle', 'sector', 'polygon', ...\n type: 'rect',\n shape: rectShape,\n // `api.style(...)` is used to obtain style settings, which\n // includes itemStyle settings in optino and the result of\n // visual mapping.\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // The first dataItem.\n [53, 31, 21, 56], // The second dataItem.\n [71, 33, 10, 20], // The third dataItem.\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：provides info about the current series (such as <code>seriesIndex</code>、<code>dataIndex</code>, etc.) and data (such as <code>dataIndex</code>, <code>dataIndexInside</code>, etc.) and coordinate system (such as location and size of bounding box of the current coordinate system)</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a> provides some methods to developers (such as <code>api.value()</code>, <code>api.coord()</code>).</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> method should return definitions of graphic elements for the current <code>dataItem</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p>Having <code>renderItem</code> provided, 90% of the work of creating custom series has been accomplished. The rest of this work is to refine and polish them.</p>\n<p><br></p>\n<h2>(II) Make the extent of axes fit the data</h2>\n\n<p>There is axes in some coordinate systems, such as <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#polar\" target=\"_blank\">polar</a>. The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>, developers should specify that which dimensions correspond to <code>x</code> axis and which to <code>y</code> axis use the property <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // `dim1` and `dim2` correspond to `x` axis.\n x: [1, 2],\n // `dim0` corresponds to `y` axis.\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>(III) Set tooltip content</h2>\n\n<p>Of course <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> can be used to define the content in tooltip. But it is easier to do that by setting <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a> and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // `dim2` and `dim3` will displayed in tooltip.\n tooltip: [2, 3]\n },\n // `dim2` is named as "Age" and `dim3` is named as "Satisfaction".\n dimensions: [null, null, 'Age', 'Satisfaction'],\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ],\n [ 53, 31, 21, 56 ],\n [ 71, 33, 10, 20 ],\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>Several other issues about <code>custom series</code> are introduced below.</p>\n<p><br></p>\n<h2>(IV) Shape clipping when overflow the coordinates area</h2>\n\n<p>When use <code>custom series</code> with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p>In the example above, <code>dim</code> and <code>dim2</code> corresponds to <code>x</code> axis, and the <code>dataZoom</code> component constrols the data window of <code>x</code> axis. If part of a <code>dataItem</code> is overflow the extent of <code>x</code> axis (the value on <code>dim1</code> is overflow and the value on <code>dim2</code> is not) while zooming, the <code>dataItem</code> will not be filtered if <code>dataZoom.filterMode = 'weakFilter'</code> set. Thus the <code>dataItem</code> can be still rendered (usually be partially rendered by using <code>echarts.graphic.clipRectByRect</code> to clip the exceeding part).\nSee the example mentioned above <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a>.</p>\n<p><br></p>\n<p><br></p>\n<h2>(V) About dataIndex</h2>\n\n\n<p>Developers had better notice that in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> <code>dataIndexInside</code> and <code>dataIndex</code> is different:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br></p>\n<h2>(VI) Event listener</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>(VII) Custom vector shapes</h2>\n\n\n<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> is supported, which enables to use shapes that are created in vector tool. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>, and examples: <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon\" target=\"_blank\">icons</a>, <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p><br></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More examples about custom series</a></strong></p>\n"},"Rich Text":{"type":["*"],"description":"<p>Rich text can be used in labels of series, axis or other components. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>More examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.</p>\n<p>Since v3.7, rich text has been supported:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fregments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the begining, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text Fregment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Options about Text</strong></p>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fregment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fregment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fregment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fregment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fregment in <code>rich</code> property. For example, <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this fregment}'\n '{b|Style "b" is applied to this fregment}This fregment use default style{x|use style "x"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fregments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Basic Styles of Text, Text Block and Text Fragment</strong></p>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fregment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Position</strong></p>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href=\"option.html\" target=\"_blank\">option doc</a>.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Rotation</strong></p>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p><a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> and<a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Layout and Alignment of Text Fregment</strong></p>\n<p>To understand the layout rule, every text fregment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fregment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fregment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>'\\n'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fregment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fregments. <code>lineHeight</code> of a text fregment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fregment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fregments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>'bottom'</code>: The bottom edge of the text fregment sticks to the bottom edge of the line.</li>\n<li><code>'top'</code>: The top edge of the text fregment sticks to the top edge of the line.</li>\n<li><code>'middle'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fregment can be placed in each line, where the horizontal position of text fregments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fregments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li>\n<li>Secondly, place text fregments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li>\n<li>Finally, the text fregments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fregment:</p>\n<ul>\n<li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fregment box.</li>\n<li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fregment box.</li>\n<li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fregment box.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Effects: Icon, Horizontal Rule, Title Block, Simple Table</strong></p>\n<p>See example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n</code></pre>\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<pre><code class=\"lang-js\">// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>Simple table can be implemented by specify the same width to text fregments that are in the same column of different lines. See the <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">example</a> at the mentioned above.</p>\n"},"Server-side Rendering":{"type":["*"],"description":"<p>ECharts can be rendered at server-side. For example, the thumbnails in the <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>, <a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>, <a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>, <a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>, <a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"Render by Canvas or SVG":{"type":["*"],"description":"<p>Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.</p>\n<p>ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v3.8</a> we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">renderer</a> as <code>'canvas'</code> or <code>'svg'</code> when initailizing a chart instance.</p>\n<blockquote>\n<p>That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">zender</a>, where they are implemented as a Canvas renderer and a alternative SVG renderer.</p>\n</blockquote>\n<h2 id=\"how-to-make-a-choice-\">How to make a choice?</h2>\n<p>Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=lines-bmap-effect\" target=\"_blank\">special visual effect</a>. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg-en&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.</p>\n<p>How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.</p>\n<ul>\n<li>If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.</li>\n<li>If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.<ul>\n<li>If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">liquidfill</a>, the SVG renderer probably gives a better performance.</li>\n<li>If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.</li>\n</ul>\n</li>\n</ul>\n<p>Therefore <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">feedback</a> of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.</p>\n<p>Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.</p>\n<h2 id=\"how-to-use-specify-a-renderer-\">How to use specify a renderer?</h2>\n<p>ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.</p>\n<ul>\n<li>In the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">pre-build</a> of ECharts, the SVG renderer has been included in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.common.min.js\" target=\"_blank\">common version</a> and <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.min.js\" target=\"_blank\">complete version</a>. But not in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.simple.min.js\" target=\"_blank\">simple version</a>.</li>\n<li>If <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">build ECharts online</a>, the checkbox "SVG 渲染" should be checked.</li>\n<li>If <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">build ECharts offline</a>, the module of the SVG renderer should be imported:</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>Then wen can specify renderer by <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">parameter</a>:</p>\n<pre><code class=\"lang-js\">// Use the Canvas renderer (default).\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// which is equal to:\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n\n// Use the SVG renderer.\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"Supporting ARIA in Charts":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: 'Source of user access to a site',\n x: 'center'\n },\n series: [\n {\n Name: 'access source',\n type: 'pie',\n data: [\n { value: 335, name: 'direct access' },\n { value: 310, name: 'mail marketing' },\n { value: 234, name: 'union ad' },\n { value: 135, name: 'video ad' },\n { value: 1548, name: 'search engine' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates.</p>\n<p>Please refer to <a href=\"option.html#aria\" target=\"_blank\">ARIA option</a> for more detail.</p>\n"}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"Get Started with ECharts in 5 minutes":{"type":["*"],"description":"<h2 id=\"installing-echarts\">Installing ECharts</h2>\n<p>First, install ECharts using one of the following methods:</p>\n<ul>\n<li><p>The <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">official download page</a>, has different builds for most common use cases. If you would like to include all packages, you can download <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">the full minified version</a>.</p>\n</li>\n<li><p>From the latest <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> release, you can find the latest version of echarts in <code>dist</code> directory of the unzipped files.</p>\n</li>\n<li><p>Using npm: <code>npm install echarts --save</code>. <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Use%20ECharts%20with%20webpack\" target=\"_blank\">Using ECharts with webpack</a></p>\n</li>\n<li><p>Using the <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">online build tool</a> (Currently available in Chinese only).</p>\n</li>\n</ul>\n<h2 id=\"including-echarts\">Including ECharts</h2>\n<p>ECharts 3 no longer requires using AMD to load packages, and the AMD loader is no longer included in ECharts. Instead, ECharts should be included using a traditional <code><script></code> tag:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- including ECharts file -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"draw-a-simple-chart\">Draw a simple chart</h2>\n<p>Before drawing charts, we need to prepare a DOM container with width and height for ECharts.</p>\n<pre><code><body>\n <!-- preparing a DOM with width and height for ECharts -->\n <div id="main" style="width:600px; height:400px;"></div>\n</body>\n</code></pre><p>Then we can initialize an ECharts instance using <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a>, and create a simple bar chart with <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a>. Below is the complete code.</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- including ECharts file -->\n <script src="echarts.js"></script>\n</head>\n<body>\n <!-- prepare a DOM container with width and height -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // based on prepared DOM, initialize echarts instance\n var myChart = echarts.init(document.getElementById('main'));\n\n // specify chart configuration item and data\n var option = {\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // use configuration item and data specified to show chart\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>You've made your first chart!</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>For more examples, go to the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a></p>\n"},"Create Custom Build of ECharts":{"type":["*"],"description":"<p>In most cases, ECharts builds can be downloaded from the <a href=\"/en/download.html\" target=\"_blank\">download page</a> or from the <code>echarts/dist</code> directory in our <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub project</a>, where\nthese pre-builds are provided:</p>\n<ul>\n<li>Complete verion: <code>echarts/dist/echarts.js</code>, including all charts and components (see <code>echarts/echarts.all.js</code> for detail), but has maximum file size.</li>\n<li>Common version: <code>echarts/dist/echarts.common.js</code>, including common charts and components (see <code>echarts/echarts.common.js</code> for detail), moderate file size.</li>\n<li>Simple version: <code>echarts/dist/echarts.simple.js</code>, including a smaller subset of the most common charts and components (see <code>echarts/echarts.simple.js</code> for detail), small file size.</li>\n</ul>\n<p>We can also build echarts ourselves, which enables to only include the charts and components you needed. You can customize your ECharts build by using one of these approaches:</p>\n<ul>\n<li><a href=\"/en/builder.html\" target=\"_blank\">Online custom build tool</a> is relatively convenient.</li>\n<li>The script <code>echarts/build/build.js</code> found in the project is flexible for module selecting, and supports multi-language builds</li>\n<li>Build ECharts and your project directly by using tools such as <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>, <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a></li>\n</ul>\n<p>There are some examples to illustrate the latter two approaches below.</p>\n<h2 id=\"prepare-create-our-project-and-install-echarts\">Prepare: create our project and install echarts</h2>\n<p>Create a sample project using the command line</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>Then in the <code>myProject</code> directory, initialize <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> environment and install echarts (assume that <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> has been installed):</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>The installed echarts is in the <code>myProject/node_modules</code> directory, which can be used in our project directly. For example:</p>\n<p>Use ES Module:</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>Use CommonJS:</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>Next, we just describe our examples in ES Module way.</p>\n<h2 id=\"create-custom-build-by-echarts-build-build-js\">Create custom build by <code>echarts/build/build.js</code></h2>\n<p>In this example, for minimizing file size, we will build a echarts bundle with only pie chart included, and create a web page to show it.</p>\n<p>echarts has provided a script <code>echarts/build/build.js</code> as a build tool (<a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> is required to execute it). Now we can use the command below in the <code>myProject</code> directory to check its help info:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>These options can be used in this example:</p>\n<ul>\n<li><code>-i</code>: Entry file of the echarts code. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>-o</code>: The bundle file path. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>--min</code>: Whether to compress file (not by default), and remove the code that is for printing error and warning info.</li>\n<li><code>--lang <language shortcut or file path></code>: Whether to use the specified language (Chinese by default). For example: <code>--lang en</code> means using English, <code>--lang my/langXX.js</code> means using <code><cwd>/my/langXX.js</code> to substitute <code>echarts/lib/lang.js</code> while buiding.</li>\n<li><code>--sourcemap</code>: Whether to output source map, which is useful in debug.</li>\n<li><code>--format</code>: The format of output. Can be <code>'umb'</code>(default), <code>'amd'</code>, <code>'iife'</code>, <code>'cjs'</code>, <code>'es'</code>.</li>\n</ul>\n<p>Now we want to create a echarts bundle that only supports pie chart, we should firstly create an entry file (say <code>myProject/echarts.custom.js</code>) to import modules we need:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts and export them.\nexport * from 'echarts/src/echarts';\n// Import pie chart.\nimport 'echarts/src/chart/pie';\n// In this case, modules in either `echarts/src` or `echarts/lib`\n// can be imported (but should not be mixed). See\n// "Use `echarts/lib/**` or `echarts/src/**`" below.\n</code></pre>\n<p>Then we can use command below in <code>myProject</code> directory to build the bundle:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>Now the bundle <code>myProject/lib/echarts.custom.min.js</code> has been created. Then we can create a web page (say <code>myProject/pie.html</code>) to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- import the bundle `lib/echarts.custom.js`. -->\n <script src="lib/echarts.custom.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // Create a pie chart:\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/pie.html</code> in a browser, we can see the pie chart:</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"modules-that-are-permitted-to-be-imported\">Modules that are permitted to be imported</h2>\n<p>All of the permitted modules are declared in <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> and <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a>. Other modules in the source code of echarts and zrender <strong>SHOULD NOT BE IMPORTED</strong>, because they are inner modules, whose interfaces and functionalities may be modified in the subsequent upgrades of echarts.</p>\n<h2 id=\"use-echarts-lib-or-echarts-src-\">Use <code>echarts/lib/**</code> or <code>echarts/src/**</code>?</h2>\n<ul>\n<li>If intending to import part of echarts modules in your project and build yourself, only <code>echarts/lib/**</code> can be used, <code>echarts/src/**</code> should not be used.</li>\n<li>If using <code>echarts/build/build.js</code> to make a bundle, either <code>echarts/lib/**</code> or <code>echarts/src/**</code> can be used (should not be mixed), where <code>echarts/src/**</code> brings smaller bundle size a little.</li>\n</ul>\n<blockquote>\n<p>Reason: currently, <code>echarts/src/**</code> is the source code that using ES Module, and they are transpiled to CommonJS code and placed in <code>echarts/lib/**</code>. (This transformation is for backward compatible with old version of NodeJS and webpack that do not support ES Module.)\nHistorically, echarts extensions and user projects have been using the package path <code>echarts/lib/**</code>. So it should not be changed, otherwise, mixed using both <code>echarts/src/**</code> and <code>echarts/lib/**</code> will generate two echarts namespace and bring some problems. But it is not an issue when using <code>echarts/build/build.js</code> to create a bundle, where ES modules in <code>echarts/src/**</code> can be analyzed statically for smaller bundle size.</p>\n</blockquote>\n<h2 id=\"build-echarts-and-our-project-directly-by-rollup\">Build echarts and our project directly by rollup</h2>\n<p>Now we have known that how to create custom build by <code>echarts/build/build.js</code>. Alternatively, we can bundle echarts and our project directly by the tool like <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> or <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>. In some project, this approach is required. Next we only go with <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, because <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> and <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> are in the similar way.</p>\n<p>Firstly install <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> in <code>myProject</code> directory:</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>Then we create a project JS file <code>myProject/line.js</code> for line chart rendering:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts.\nimport * as echarts from 'echarts/lib/echarts';\n// Import line chart.\nimport 'echarts/lib/chart/line';\n// Import components of tooltip, title and toolbox.\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// Render line chart and components.\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>The created module <code>myProject/line.js</code> can not work directly in the browsers that do not support ES Module. So we need to build them. Before we run <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, a config file <code>myProject/rollup.config.js</code> should be created:</p>\n<pre><code class=\"lang-js\">// Responsible for looking for modules in `node_module` directory. For example,\n// if there is code `import 'echarts/lib/chart/line';`, the module file\n// `node_module/echarts/lib/chart/line.js` can be find by this plugin.\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// Responsible for compress code.\nimport uglify from 'rollup-plugin-uglify';\n// Support multi-language.\nimport ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // The entry file.\n input: './line.js',\n plugins: [\n nodeResolve(),\n ecLangPlugin({lang: 'en'}), // Use english\n // Remove the snippet in `__DEV__`, which mainly prints error log.\n uglify()\n ],\n output: {\n // Output file in the format of 'umd'.\n format: 'umd',\n // Output source map.\n sourcemap: true,\n // The path of the output bundle.\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>Then execute the following command in <code>myProject</code> directory to start the build:</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p><code>-c</code> indicate <code>rollup</code> to use <code>myProject/rollup.config.js</code> as the config file.</p>\n</blockquote>\n<p>The created bundle <code>myProject/lib/line.min.js</code> includes project code and part of echarts code that we requried. Now we create a web page <code>myProject/line.html</code> to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- Import the created bundle: -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/line.html</code> in a browser, we will get:</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"multi-language\">Multi-language</h2>\n<p>In the example above, we can notice that the label of the <code>toolbox</code> component is in English. Essentially any text can be customized by <code>echarts option</code>, but if we want to show label in a certain language by default, we have to specify the language while building the code.</p>\n<p>For example:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>It means that the pre-defined English text is used. Moreover, can be <code>--lang fi</code>.</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>It means that <code>myProject/my/langXX.js</code> is used to substitute <code>myProject/node_modules/echarts/lib/lang.js</code> while performing build. So we can customize text in our language in <code>myProject/my/langXX.js</code>. Notice, <code>-o</code> or <code>--output</code> must be specified in the approach.</p>\n<p>Besides, the same lang parameter can be pass to <code>echarts/build/rollup-plugin-ec-lang</code>.</p>\n"},"Use ECharts with webpack":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.</p>\n<h2 id=\"use-npm-to-install-echarts\">Use npm to install ECharts</h2>\n<p>Before <code>3.1.1</code> version, ECharts package on npm was maintained by third-party. Since <code>3.1.1</code>, ECharts and zrender on npm are maintained officially by <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> team.</p>\n<p>You can use the following command to install ECharts with npm.</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"include-echarts\">Include ECharts</h2>\n<p>ECharts and zrender installed by npm will be placed under <code>node_modules</code>. You can obtain echarts directly in project with <code>require('echarts')</code>.</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"include-echarts-charts-and-components-on-demand\">Include ECharts charts and components on demand</h2>\n<p>By default, <code>require('echarts')</code> returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.</p>\n<p>For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.</p>\n<pre><code class=\"lang-js\">// include ECharts main module\nvar echarts = require('echarts/lib/echarts');\n// include bar chart\nrequire('echarts/lib/chart/bar');\n// include tooltip and title component\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts introductory example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>Available modules see <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>The same goes for another popular packaging tools <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>, which will not be introduced again here. Using <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> to make a custom build of echarts is introduced in <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">Create Custom Build of ECharts</a></p>\n"},"Customized Chart Styles":{"type":["*"],"description":"<p>ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"drawing-nightingale-rose-chart\">Drawing Nightingale Rose Chart</h2>\n<p><a href=\"#Get%20Started%20with%20ECharts%20in%205%20minutes\">Getting started tutorial</a> introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need <code>xAxis</code>，<code>yAxis</code> either.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: 'Reference Page',\n type: 'pie',\n radius: '55%',\n data:[\n {value:400, name:'Searching Engine'},\n {value:335, name:'Direct'},\n {value:310, name:'Email'},\n {value:274, name:'Alliance Advertisement'},\n {value:235, name:'Video Advertisement'}\n ]\n }\n ]\n})\n</code></pre>\n<p>With the above code, we can create a simple pie chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Here, the value of <code>data</code> is not a single value, as that of the example in get started. Instead, it's an object containing <code>name</code> and <code>value</code>. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> for more information.</p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">Pie charts</a> of EChart can be made into Nightingale rose charts with <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> field.</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>Nightingale rose charts use radius to represent data value.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"configuring-shadow\">Configuring Shadow</h2>\n<p>Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by <a href=\"#series-pie.itemStyle\">itemStyle</a> in series.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // shadow size\n shadowBlur: 200,\n // horizontal offset of shadow\n shadowOffsetX: 0,\n // vertical offset of shadow\n shadowOffsetY: 0,\n // shadow color\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>The effect after added shadow is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Each <code>itemStyle</code> has <code>emphasis</code> as the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"dark-background-and-light-text\">Dark Background and Light Text</h2>\n<p>Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.</p>\n<p>Background is a global configurable object, so we can set it directly with <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a> of option.</p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>Text style can also be set globally in <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>.</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>On the other hand, we can also set them in <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a> of each series.</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>We also need to set line color of pie chart to be lighter.</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>Thus, we can get the following effect.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Similar to <code>itemStyle</code>, <code>label</code> and <code>labelLine</code> also have <code>emphasis</code> children.</p>\n<h2 id=\"setting-fan-colors\">Setting Fan Colors</h2>\n<p>Fan colors can be set in <code>itemStyle</code>:</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.</p>\n<p>Each fan's color can be set under <code>data</code>:</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through <a href=\"#option.html#visualMap\">visualMap</a>.</p>\n<pre><code class=\"lang-js\">visualMap: {\n // hide visualMap component; use lightness mapping only\n show: false,\n // mapping with min value at 80\n min: 80,\n // mapping with max value at 600\n max: 600,\n inRange: {\n // mapping lightness from 0 to 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>The final effect is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n"},"Overview of Style Customization":{"type":["*"],"description":"<p>This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Pallette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<p>Other article about styling can be check in <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a> and <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Theme</strong></p>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\">Examples page</a>, "Theme" can be selected, and view the result directly.</p>\n<p>Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named '<code>'light'</code> and <code>'dark'</code>. They can be used as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">Theme Builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<pre><code class=\"lang-js\">var xhr = new XMLHttpRequest();\n// Assume the theme name is "vintage".\nxhr.open('GET', 'xxx/xxx/vintage.json', true);\nxhr.onload = function () {\n var themeJSON = this.response;\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n // ...\n});\nxhr.send();\n</code></pre>\n<p>If a them is downloaded as a JS file, it will auto register itself:</p>\n<pre><code class=\"lang-js\">// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Palette</strong></p>\n<p>Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<pre><code class=\"lang-js\">option = {\n // Global palette:\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // A palette only work for the series:\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // A palette only work for the series:\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</strong></p>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href=\"option.html\" target=\"_blank\">option</a>, style related options can be set in various place, including <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>, <a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>, <a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>, <a href=\"option.html#series.label\" target=\"_blank\">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc., although they may occur in different place according to different series or components.</p>\n<p>There is another article for style setting, <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Style of emphasis state</strong></p>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> property. The options in <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> is the same as the ones for normal state, for example:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (visualMap component)</strong></p>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n"},"Loading and Updating of Asynchronous Data":{"type":["*"],"description":"<h2 id=\"asynchronous-loading\">Asynchronous Loading</h2>\n<p>Data in <a href=\"#getting-started\">Get started</a> is directly filled in <code>setOption</code> after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in <code>ECharts</code> is very easy. After initialization, you can pass in data and configuration item through <code>setOption</code> after data obtained through jQuery and other tools at any time.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// show title. legend and empty axis\nmyChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: []\n }]\n});\n\n// Asynchronous data loading \n$.get('data.json').done(function (data) {\n // fill in data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // find series by name\n name: 'Sales',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>For example: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>In ECharts, updating data need to find the corresponding series through <code>name</code>. In the above example, updating can be performed correctly according to series order if <code>name</code> is not defined. But in most cases, it is recommended to update data with series <code>name</code> information. </p>\n<h2 id=\"loading-animation\">Loading Animation</h2>\n<p>If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading. </p>\n<p>ECharts provides a simple loading animation by default. You only need <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> to show, and then use <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> to hide loading animation after data loading.</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>Effects are as followed: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"dynamic-data-updating\">Dynamic Data Updating</h2>\n<p>ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.</p>\n<p>All data updating are through <a href=\"#api.html#echartsInstance.setOption\">setOption</a>. You only need to get data as you wish, fill in data to <a href=\"#api.html#echartsInstance.setOption\">setOption</a> without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation. </p>\n<blockquote>\n<p>In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.</p>\n</blockquote>\n<p>See details in the following example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"Dataset":{"type":["*"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>Before ECharts 4, data was only able to declared in each series, for example:</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>This approach is easy to be understand and is flexible when some series needs special data definitions. But the shortcomings are also obvious: some data extra works are usually needed to split the original data to each series, and it not supports sharing data in different series, moreover, it is not good for encode.</p>\n<p>ECharts4 starts to provide <code>dataset</code> component, which brings benefits below:</p>\n<ul>\n<li>Benefit from <code>dataset</code>, we can follow the common methodology of data visualization: based on data, specify the mapping (via the option <a href=\"option.html#series.encode\" target=\"_blank\">encode</a>) from data to visual.</li>\n<li>Data can be managed and configured separately from other configurations.</li>\n<li>Data can be reused by different series and components.</li>\n<li>Support more common data format (like 2d-array, object-array), to avoid data transform works for users.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Get started</strong></p>\n<p>This is a simplest example of <code>dataset</code>:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare X axis, which is a category axis, mapping\n // to the first column by default.\n xAxis: {type: 'category'},\n // Declare Y axis, which is a value axis.\n yAxis: {},\n // Declare several series, each of them mapped to a\n // column of the dataset by default.\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>Or the common format object-array is also supported:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Here the declared `dimensions` is mainly for providing the order of\n // the dimensions, which enables ECharts to apply the default mapping\n // from dimensions to axes.\n // Alternatively, we can declare `series.encode` to specify the mapping,\n // which will be introduced later.\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic</strong></p>\n<p>In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.</p>\n<p>Generally, this mapping can be performed:</p>\n<ul>\n<li>Configure whether columns or rows of a dataset will mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. <code>'column'</code> is the default value.</li>\n<li>Configure the mapping rule from dimensions (a dimension means a column/row) to axes in coordinate system, tooltip, labels, color, symbol size, etc. This can be specified by <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> and <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> (if visual encoding is required). The example above does not give a mapping rule, so ECharts make default mapping by common sense: because x axis is a category axis, the first column is mapped to the x axis, and each series use each subsequent column in order.</li>\n</ul>\n<p>Let's illustrate them in detail below.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping by column or row</strong></p>\n<p>Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. The optional values are:</p>\n<ul>\n<li>'column': series are positioned on each columns of the dataset. Default value.</li>\n<li>'row': series are positioned on each row of the dataset.</li>\n</ul>\n<p>See the example below:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series is in the first cartesian (grid), and each\n // is mapped to a row.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series is in the second cartesian (grid), and each\n // is mapped to a column.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Dimension</strong></p>\n<p>Before introducing <code>encode</code>, we should clarify the concept of <code>dimension</code>.</p>\n<p>Most of common charts describe data in the format of "two-dimensions table" (note that the meaning of the word "dimension" in "two-dimension table" is not the same as the dimensions in ECharts. \bIn order not to be confusing, we use "2d-table", "2d-array" below). In the examples above, we use 2d-array to carry the 2d-table. When we set <code>seriesLayoutBy</code> as <code>'column'</code>, namely, mapping columns to series, each column is called a dimension, and each row is a data item. When we set <code>seriesLayoutBy</code> as <code>'row'</code>, namely, mapping rows to series, each row is called a dimension, and each column is a data item.</p>\n<p>Dimension can have its name to displayed on charts. Dimension name can be defined on the first row/column. Take the code above as an example, <code>'score'</code>、<code>'amount'</code>、<code>'product'</code> are dimension names, and data start from the second row. By default ECharts auto detect whether the first row/column of <code>dataset.source</code> is dimension name or data. Use can also set <code>dataset.sourceHeader</code> as <code>true</code> to mandatorily specify the first row/column is dimension name, or set as <code>false</code> to indicate the data start from the first row/column.</p>\n<p>The definitions of the dimensions can also be provided separately in <code>dataset.dimensions</code> or <code>series.dimensions</code>, where not only dimension name, but also dimension type can be specified:</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n // Each item can be object or string.\n {name: 'score'},\n // A string indicates the dimension name.\n 'amount',\n // Dimension type can be specified.\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // Dimensions declared in series will be adapted with higher priority.\n dimensions: [\n null, // Set as null means we dont want to set dimension name.\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>Generally, we do not need to set dimensions types, because it can be auto detected based on data by ECharts. But in some cases, for example, the data is empty, the detection might not be accurate, where dimension type can be set manually.</p>\n<p>The optional values of dimension types can be:</p>\n<ul>\n<li><code>'number'</code>: Normal data, default value.</li>\n<li><code>'ordinal'</code>: Represents string data like category data or text data. ECharts will auto detect them by default. They can be set manually if the detection fail.</li>\n<li><code>'time'</code>: Represents time data, where it is supported that parse time string to timestamp. For example, if users need to parse '2017-05-10' to timestamp, it should be set as <code>time</code> type. If the dimension is used on a time axis (<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> is <code>'time'</code>), it will be auto set to <code>time</code> type. The supported time string is listed in <a href=\"option.html#series.data\" target=\"_blank\">data</a>.</li>\n<li><code>'float'</code>: If set as <code>'float'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n<li><code>'int'</code>: If set as <code>'int'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic (encode)</strong></p>\n<p>Having the concept of dimension clarified, we can use <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> to map data to graphic:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // Map dimension "amount" to the X axis.\n x: 'amount',\n // Map dimension "product" to the Y axis.\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>There is an other example for <code>encode</code>:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (color, symbol, etc.)</strong></p>\n<p>We can use <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its <a href=\"option.html#visualMap\" target=\"_blank\">doc</a>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Default encoding</strong></p>\n<p>For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no <code>encode</code> option is specified. (If <code>encode</code> option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:</p>\n<ul>\n<li>In coordinate system (like cartesian(grid), polar):<ul>\n<li>If category axis (i.e., axis.type is <code>'category'</code>) exists, map the first column/row to the axis, and each series use a following column/row.</li>\n<li>If no category axis exists, and the coordinate system contains two axis (like X Y in cartesian), each series use two columns/rows, one for a axis.</li>\n</ul>\n</li>\n<li>If no coordinate system (like pie chart):<ul>\n<li>Use the first column/row as item name, and the second column/row as item value.</li>\n</ul>\n</li>\n</ul>\n<p>If the default rule does not meet the requirements, configure the <code>encode</code> yourself please.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Q & A</strong></p>\n<p>Q: How to map the third column to X axis, and map the fifth column to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n // Notice that the dimension index is based on 0,\n // thus the third column is dimensions[2].\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>Q: How to map the third row th X axis, and map the fifth row to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>Q: How to use the values in the second column in label.</p>\n<p>A:\nThe <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a> supports refer value in a certain dimension. For example:</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` means use the value in the "score" dimension.\n // `'{@[4]}'` means use the value in dimensions[4].\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>Q: How to display the second column and the third column in tooltip?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>Q: If there is no dimension name in dataset.source, how to give dimension name?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>Q: How to encode the fourth column in bubble size in bubble plot?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n // Use visualMap to perform visual encoding.\n visualMap: {\n show: false,\n dimension: 2, // Encode the third column.\n min: 2, // Min value is required in visualMap component.\n max: 15, // Max value is required in visualMap component.\n inRange: {\n // The range of bubble size, from 5 pixel to 60 pixel.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>Q: We have specified <code>encode</code>, but why it does not work?</p>\n<p>A: Maybe we can try to check typo, for example, the dimension name is <code>'Life Expectancy'</code>, be we typed <code>'Life Expectency'</code> in <code>encode</code> option.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Various formats in dataset</strong></p>\n<p>In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to <code>dataset.source</code>.</p>\n<blockquote>\n<p>Some csv tools can be used to export the table data to JSON, for example, <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> or <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a>.</p>\n</blockquote>\n<p>In common used data transfer formats in JavaScript, 2d-array is a good choice to carry table data, which has been illustrated in the examples above.</p>\n<p>Besides, 2d-array, <code>dataset</code> also support key-value format as follows, which is also commonly used. But notice, the option <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> is not supported in this format.</p>\n<pre><code class=\"lang-js\">dataset: [{\n // Row based key-value format, namely, object array, is a commonly used format.\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // Column based key-value format is also supported.\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Multiple datasets and references</strong></p>\n<p>Multiple datasets can be defined, and series can refer them by <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a>.</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n source: [...],\n }, {\n source: [...]\n }, {\n source: [...]\n }],\n series: [{\n // Use the third dataset.\n datasetIndex: 2\n }, {\n // Use the second dataset.\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts3 data setting approach (series.data) can be used normally</strong></p>\n<p>The data setting approach before ECharts4 can still be used normally. If a series has declared <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>, it will be used but not <code>dataset</code>.</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>In fact, setting data via <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is not deprecated and useful in some cases. For example, for some charts, like <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>, <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, <a href=\"option.html#series-lines\" target=\"_blank\">lines</a>, that do not apply table data, <code>dataset</code> is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> is probably needed to load data incrementally. <code>dataset</code> is not supported in the case.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Others</strong></p>\n<p>Currently, not all types of series support dataset. Series that support dataset includes:</p>\n<p><code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.</p>\n<p>More types of series will support dataset in our further work.</p>\n<p>Finally, this is an example, multiple series sharing one <code>dataset</code> and having interactions:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n\n"},"Add interaction to the chart component":{"type":["*"],"description":"<p>Echarts provides many interaction components besides chart. For example:</p>\n<p><code>legend component</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>title component</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>visualmap component</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>dataline component</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>Following is an example of <code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> as an introduction of how to add this kind of component.</p>\n<p><br></p>\n<h2>Introduction of data zoom component (dataZoom)</h2>\n\n<p>Data overview by default, and detail by requirement is a basic interaction need of data visualization. <code>dataZoom</code> component can implement this function in rectangular coordinate (<a href=\"option.html#grid\" target=\"_blank\">grid</a>) and polar coordinate (<a href=\"option.html#polar\" target=\"_blank\">polar</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> component operates <em>data window zoom</em> and <em>data window translation</em> on <code>axis</code>.</li>\n</ul>\n<blockquote>\n<p>Use <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a>, <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> to specify which axis <code>dataZoom</code> controls.</p>\n</blockquote>\n<ul>\n<li><p>Multiple <code>dataZoom</code> components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.</p>\n</li>\n<li><p>Operation principle of <code>dataZoom</code> achieves <em>data window zooming</em> through <em>data filtering</em>.</p>\n<p> Different settings of data filtering modes lead to different data window zooming effects, please see: <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>.</p>\n</li>\n<li><p>Setting of <code>dataZoom</code> data window range supports two formats currently:</p>\n<ul>\n<li><p>Percentage: see <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> and <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>.</p>\n</li>\n<li><p>Absolute value: see <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> and <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom component supports several child components: </strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">Inside data zoom component (dataZoomInside)</a>: inside coordinates.</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">Slider data zoom component (dataZoomSlider)</a>: has seperate slide option.</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">Select data zoom component (dataZoomSelect)</a>: full-screen box for zoom data area. Entrance and configuration item are both in <code>toolbox</code>.</p>\n</li>\n</ul>\n<p><br></p>\n<h2>Adding dataZoom component</h2>\n\n<p>First, only add dataZoom component to x-axis. Following examples shows the code.</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // This dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n series: [\n {\n type: 'scatter', // this is scatter chart\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>which will show the following result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the <code>option.dataZoom</code> above:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // this dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n },\n { // This dataZoom component controls x-axis by dafault\n type: 'inside', // this dataZoom component is dataZoom component of inside\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n ...\n}\n</code></pre>\n<p>Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>Following result can be seen:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n\n"},"Responsive Mobile-End":{"type":["*"],"description":"<p>ECharts works in DOM nodes with user defined width and height. ECharts <em>component</em> and <em>series</em> are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.</p>\n<p>Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.</p>\n<p>To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a>.</p>\n<p><br></p>\n<h2>Location and layout of ECharts components</h2>\n\n\n<p>Most <em>component</em> and <em>series</em> follow two locating methods: </p>\n<p><br>\n<strong>left/right/top/bottom/width/height locating method:</strong></p>\n<p>Each of those six parameters can be <em>absolute value</em> or <em>percentage</em> or <em>location description</em>.</p>\n<ul>\n<li><p>Absolute value</p>\n<p> in browser pixels (px); in form of <code>number</code> (no unit); e.g.: <code>{left: 23, height: 400}</code>.</p>\n</li>\n<li><p>Percentage</p>\n<p> to the width and height of DOM container; in form of <code>string</code>; e.g.: <code>{right: '30%', bottom: '40%'}</code>.</p>\n</li>\n<li><p>Location Description</p>\n<ul>\n<li>can be set to <code>left: 'center'</code>, for horizontally centering.</li>\n<li>can be set to <code>top: 'middle'</code>, for vertically centering.</li>\n</ul>\n</li>\n</ul>\n<p>The concept of these six parameters is similar to that in CSS: </p>\n<ul>\n<li>left: distance to left border of DOM container.</li>\n<li>right: distance to right border of DOM container.</li>\n<li>top: distance to top border of DOM container.</li>\n<li>bottom: distance to bottom border of DOM container.</li>\n<li>width: width.</li>\n<li>height: height.</li>\n</ul>\n<p>Two out of the three horizontal parameters, <code>left</code>, <code>right</code>, <code>width</code>, are enough to determine the component location. For example, <code>left</code> and <code>right</code>, or <code>right</code> and <code>width</code> can both determine component location and size.\nThe same goes for vertical paramters <code>top</code>, <code>bottom</code> and <code>height</code>.</p>\n<p><br>\n<strong>Locating method of <code>center</code> / <code>radius</code>: </strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> an array in form of <code>[x, y]</code>, in which <code>x</code> and <code>y</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n</li>\n<li><p><code>radius</code></p>\n<p> an array in form of <code>[innerRadius, outerRadius]</code>, in which <code>innerRadius</code> and <code>outerRadius</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n<p> Percentage location turns out to be very useful for responsive positioning.</p>\n</li>\n</ul>\n<p><br>\n<strong>Horizontal and vertical</strong></p>\n<p>Most of ECharts's long and narrow components (such as <code>legend</code>,<code>visualMap</code>,<code>dataZoom</code>,<code>timeline</code> and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.</p>\n<p>Setting of horizontal or vertical layout is usually with component or series's <code>orient</code> or <code>layout</code> option, which can be set to <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n<p><br>\n<strong>Compatibility with ECharts2: </strong></p>\n<p>Naming of <code>x/x2/y/y2</code> in ECharts2 is still compatible, as well as the newly added <code>left/right/top/bottom</code>. But <code>left/right/top/bottom</code> is recommended.</p>\n<p>To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: <code>left: 'right'</code>, <code>left: 'left'</code>, <code>top: 'bottom'</code>, <code>top: 'top'</code>, which are equal to: <code>right: 0</code>, <code>left: 0</code>, <code>bottom: 0</code>, <code>top: 0</code>, in a more normal expression.</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> provides the ability to be responsive with container size.</p>\n<p>As shown in the following example, you may drag <strong>the circle in bottom-right corner</strong> to see the legend and series change layout position and method with container size. </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>The following format should be followed if you need to set Media Query in option:</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // here defines base option\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // each rule of media query is defined here\n {\n query: {...}, // write rule here\n option: { // write options accordingly\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // the second rule\n option: { // the second option\n legend: {...},\n ...\n }\n },\n { // default with no rules,\n option: { // when all rules fail, use this option\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>In the above example, <code>baseOption</code> and every option in <code>media</code> are all <em>simple options</em>, which are regular options containing components and series. <code>baseOption</code> is always be used, while options of every will be merged with <code>chart.mergeOption()</code> when given <code>query</code> condition is satisfied with.</p>\n<p><strong>query: </strong></p>\n<p>A <code>query</code> is in the following format: </p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>Currently there are three supported attributes:<code>width</code>, <code>height</code>, <code>aspectRatio</code> (length-to-width ratio), each of which can add <code>min</code> or <code>max</code> as prefix. E.g., <code>minWidth: 200</code> stands for when width is greater than or equal to 200px. When two attributes are written together, it means <em>and</em> in Bool logic. For example, <code>{minWidth: 200, maxHeight: 300}</code> stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.</p>\n<p><strong>option: </strong></p>\n<p>Since option in <code>media</code> is <em>simple option</em>, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // when length-to-width ratio is less than 1\n },\n option: {\n legend: { // legend is placed in middle-bottom\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // horizontal layout of legend\n },\n series: [ // left and right layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // when container width is smaller than 500\n },\n option: {\n legend: {\n right: 10, // legend is placed in middle-right\n top: '15%',\n orient: 'vertical' // vertical layout\n },\n series: [ // top and bottom layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>Priority when multiple queries are satisfied: </strong></p>\n<p>Attention: When multiple <code>query</code> are satisfied at the same time, all of them will be merged with <code>mergeOption</code> and those are defined later will be merged later, thus provides them with higher priority.</p>\n<p><strong>Query by default: </strong></p>\n<p>If an item in <code>media</code> has no not <code>query</code>, then it means <em>default value</em>, which will be used when all other rules fail.</p>\n<p><strong>Pay attention when container size changes:</strong></p>\n<p>In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.</p>\n<p>But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one <code>query option</code>, then it should also appeared in other <code>query option</code>, or it will not be able to return to the original state. (<code>left/right/top/bottom/width/height</code> are not restricted to this rule.)</p>\n<p><strong><code>media</code> in <em>composite option</em> does not support merge</strong></p>\n<p>When <code>chart.setOption(rawOption)</code> for the second, third, fourth, fifth, and etc. times, if <code>rawOption</code> is <code>composite option</code> (which means it contains <code>media</code> list), then, the new <code>rawOption.media</code> list will not merge with the old <code>media</code>. instead, it will simply replace the option. Of course, <code>rawOption.baseOption</code> will still merge with the old option normally.</p>\n<p><br>\nFinally, let's see an example combining with timeline:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n\n"},"Visual Map of Data":{"type":["*"],"description":"<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.</p>\n<p>Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into <em>lines</em>, bar charts map data into <em>length</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:<br>\n<code>symbol</code>, <code>symbolSize</code><br>\n<code>color</code>, <code>opacity</code>, <code>colorAlpha</code>, <br>\n<code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></p>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<p><br></p>\n<h2>Data and Dimension</h2>\n\n<p>Data are usually stored in <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of <code>dataItem</code>s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {...}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {...}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ]\n}\n</code></pre>\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href=\"option.html#series-scatter\" target=\"_blank\">scatter charts</a> use radius to represent the third dimension.</p>\n<p><br></p>\n<h2>visualMap Component</h2>\n\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // can define multiple visualMap components at the same time\n { // the first visualMap component\n type: 'continuous', // defined as continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined as discrete visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">visualMapContinuous</a>：</p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">visualMapPiecewise</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>Piecewise visual map component has three types:</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>Equal division of continuous data: divide equally based on <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a>;</li>\n<li>User-defined division of continuous data: divide with range in <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a>;</li>\n<li>Discrete data (data in category type): divide with <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<strong>Configuration of visualMap mapping method</strong></p>\n<p>As we have introduced above, <code>visualMap</code> maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in <a href=\"#visualMap.dimension\">visualMap.dimension</a>) to be mapped to which visual elements (see in <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>).</p>\n<p>Example A:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data, or value[3], is mapped\n seriesIndex: 4, // map with the fourth series\n inRange: { // visual configuration items in selected range\n color: ['blue', '#121122', 'red'], // defines color list of mapping\n // The largest value will be mapped to 'red',\n // and others will be interpolated\n symbolSize: [30, 100] // the smallest value will be mapped to size of 30,\n // the largest to 100,\n // and others will be interpolated\n },\n outOfRange: { // visual configuration items out of selected range\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>Example B:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // visual configuration items in selected range\n colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color\n // original color may be selected from global color palette,\n // which is not concerned by visualMap component\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>For more information, please refer to <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>.</p>\n"},"Events and Actions in ECharts":{"type":["*"],"description":"<p>User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.</p>\n<p>Binding events in ECharts 3 is though <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // printing data name in console\n console.log(params.name);\n});\n</code></pre>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> event when toggling legend (Notice here, that <code>'legendselected'</code> event will not be triggered when toggling legend), triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> event when data zooming in some area.</p>\n<h2 id=\"mouse-events-handling\">Mouse Events Handling</h2>\n<p>ECharts support regular mouse events, which includes <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. Next let's see an example of opening Baidu search page when clicks a bar chart.</p>\n<pre><code class=\"lang-js\">// initialize ECharts instance based on prepared dom\nvar myChart = echarts.init(document.getElementById('main'));\n\n// data and configuration item of specific chart\nvar option = {\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// use specified configuration item and data to show chart\nmyChart.setOption(option);\n// handle click event and redirect to corresponding Baidu search page\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>All types of mouse events have a common parameter called <code>params</code>, which is an object that contains data information of the clicked chart, whose format is as followed:</p>\n<pre><code class=\"lang-js\">{\n // component name of clicked component\n // e.g., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (useful when componentType is 'series')\n // e.g., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in option.series (useful when componentType is 'series')\n seriesIndex: number,\n // series name (useful when componentType is 'series')\n seriesName: string,\n // data name, or category name\n name: string,\n // data index in input data array\n dataIndex: number,\n // raw input data item\n data: Object,\n // Some series, such as sankey or graph, maintains both nodeData and edgeData,\n // in which case, dataType is set to be 'node' or 'edge' to identify.\n // On the other hand, most other series have only one type of data,\n // where dataType is not needed.\n dataType: string,\n // input data value\n value: number|Array\n // color of component (useful when componentType is 'series')\n color: string\n}\n</code></pre>\n<p>How to know where the mouse clicked:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // clicked on markPoint\n if (params.seriesIndex === 5) {\n // clicked on a markPoint which belongs to a series indexed with 5\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked on an edge of the graph\n }\n else {\n // clicked on a node of the graph\n }\n }\n }\n});\n</code></pre>\n<p>Use <code>query</code> to call handler only on the graphic elements of the specified components:</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n}\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('click', {element: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method called.\n});\n</code></pre>\n<p>You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // present data distribution of a single bar through pie chart\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"interaction-events-with-components\">Interaction Events with Components</h2>\n<p>Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in <a href=\"api.html#events\" target=\"_blank\">events</a>.</p>\n<p>Below is example that listens to a legend toggling:</p>\n<pre><code class=\"lang-js\">// legend toggling triggers legendselectchanged event only\nmyChart.on('legendselectchanged', function (params) {\n // obtain selecting status of clicked legend\n var isSelected = params.selected[params.name];\n // print in console\n console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);\n // print all legend status\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"triggering-component-actions-through-code-in-echarts\">Triggering Component Actions through Code in ECharts</h2>\n<p>Actions like <code>'legendselectchanged'</code> mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.</p>\n<p>ECharts 2.x triggers actions through <code>myChart.component.tooltip.showTip</code>, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through <code>myChart.dispatchAction({ type: '' })</code>, which manages all actions in a uniformed way, and may record user's event path when need.</p>\n<p>Frequently used actions and the parameters are listed in <a href=\"api.html#action\" target=\"_blank\">action</a>.</p>\n<p>Below displays how to highlight each sector of pie chart in turn through <code>dispatchAction</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"An Example: Implement Dragging":{"type":["*"],"description":"<p>This is a tiny example, introducing how to implement dragging of graphic elements in echarts. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p>\n<p><br></p>\n<h2>[ Part 1 ] Implement basic dragging</h2>\n\n<p>First of all, we create a basic <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">line chart (line series)</a>:</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n</code></pre>\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<pre><code class=\"lang-js\">// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> is used, which is the reversed process of <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>[ Part 2 ] Add tooltip component</h2>\n\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // Means disable default "show/hide rule".\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // Customize "show/hide rule", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>The API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> is used to show/hide tooltip content, where actions <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a> and <a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a> is dispatched.</p>\n<p><br></p>\n<h2>[ Part 3 ] Full code</h2>\n\n<p>Full code is shown as follow:</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n"},"Custom Series":{"type":["*"],"description":"<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is a type of series, which enable develpers to customize graphic elements rendering and generate new types of chart.</p>\n<p>Why echarts supports <code>custom series</code>? There are endless chart types in the world of data visualization, which are not enumerable. Thus only most common used chart types are built-in supported in echarts. For other chart types, it is necessary to provide an approach to make new types of chart for developers. This approach should be as simple as possible, which had better not to bothered developers with some details of implementation, such as creating and deleting graphic elements, transition animation, tooltip supporting, working with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a> or <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap\" target=\"_blank\">visualMap</a>. Having considered the factors above, a solution <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is published.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p>Let's begin the tutorial.</p>\n<p><br></p>\n<h2>(I) The method <code>renderItem</code></h2>\n\n<p>The snippet of graphic elements rendering should be written in <code>renderItem</code> method my developers. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>In the rendering phase of echarts workflow, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is called respectively for each <code>dataItem</code> in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.data\" target=\"_blank\">series.data</a>. <code>renderItem</code> is responsible for build a group of definitions of graphic elements, including graphic type, size, location, style, etc. echarts will then build graphic elements according to those definitions. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // This method will be called for each dataItem repectively.\n // Notice: it does not ensure that called according to the order\n // of `dataItem`.\n\n // Some processes, such as coordinate conversion.\n // `api.value(0)` is used to retrieve the value on the first\n // dimension in the current `dataItem`.\n var categoryIndex = api.value(0);\n // `api.coord(...)` is used to convert data values to pixel values,\n // will are necessary for graphic elements rendering.\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // `api.size(...)` is used to calculate the pixel size corresponding to\n // the a value range that the length is 1 on Y axis.\n var height = api.size([0, 1])[1] * 0.6;\n\n // The property `shape` incicates the location and size of thsi\n // element.\n // `echarts.graphic.clipRectByRect` is used for clipping the\n // rectangular when it overflow the bounding box of the current\n // coordinate system (cartesian).\n // If the rect is totally clipped, returns undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // position and location of the rectangular.\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // Bounding box of the current cooridinate system (cartesian).\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n })\n\n // Returns definitions for the current `dataItem`.\n return rectShape && {\n // 'rect' indicates that the graphic element is rectangular.\n // Can also be 'circle', 'sector', 'polygon', ...\n type: 'rect',\n shape: rectShape,\n // `api.style(...)` is used to obtain style settings, which\n // includes itemStyle settings in optino and the result of\n // visual mapping.\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // The first dataItem.\n [53, 31, 21, 56], // The second dataItem.\n [71, 33, 10, 20], // The third dataItem.\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：provides info about the current series (such as <code>seriesIndex</code>、<code>dataIndex</code>, etc.) and data (such as <code>dataIndex</code>, <code>dataIndexInside</code>, etc.) and coordinate system (such as location and size of bounding box of the current coordinate system)</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a> provides some methods to developers (such as <code>api.value()</code>, <code>api.coord()</code>).</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> method should return definitions of graphic elements for the current <code>dataItem</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p>Having <code>renderItem</code> provided, 90% of the work of creating custom series has been accomplished. The rest of this work is to refine and polish them.</p>\n<p><br></p>\n<h2>(II) Make the extent of axes fit the data</h2>\n\n<p>There is axes in some coordinate systems, such as <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#polar\" target=\"_blank\">polar</a>. The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>, developers should specify that which dimensions correspond to <code>x</code> axis and which to <code>y</code> axis use the property <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // `dim1` and `dim2` correspond to `x` axis.\n x: [1, 2],\n // `dim0` corresponds to `y` axis.\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>(III) Set tooltip content</h2>\n\n<p>Of course <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> can be used to define the content in tooltip. But it is easier to do that by setting <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a> and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // `dim2` and `dim3` will displayed in tooltip.\n tooltip: [2, 3]\n },\n // `dim2` is named as "Age" and `dim3` is named as "Satisfaction".\n dimensions: [null, null, 'Age', 'Satisfaction'],\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ],\n [ 53, 31, 21, 56 ],\n [ 71, 33, 10, 20 ],\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>Several other issues about <code>custom series</code> are introduced below.</p>\n<p><br></p>\n<h2>(IV) Shape clipping when overflow the coordinates area</h2>\n\n<p>When use <code>custom series</code> with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p>In the example above, <code>dim</code> and <code>dim2</code> corresponds to <code>x</code> axis, and the <code>dataZoom</code> component constrols the data window of <code>x</code> axis. If part of a <code>dataItem</code> is overflow the extent of <code>x</code> axis (the value on <code>dim1</code> is overflow and the value on <code>dim2</code> is not) while zooming, the <code>dataItem</code> will not be filtered if <code>dataZoom.filterMode = 'weakFilter'</code> set. Thus the <code>dataItem</code> can be still rendered (usually be partially rendered by using <code>echarts.graphic.clipRectByRect</code> to clip the exceeding part).\nSee the example mentioned above <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a>.</p>\n<p><br></p>\n<p><br></p>\n<h2>(V) About dataIndex</h2>\n\n\n<p>Developers had better notice that in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> <code>dataIndexInside</code> and <code>dataIndex</code> is different:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br></p>\n<h2>(VI) Event listener</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>(VII) Custom vector shapes</h2>\n\n\n<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> is supported, which enables to use shapes that are created in vector tool. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>, and examples: <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon\" target=\"_blank\">icons</a>, <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p><br></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More examples about custom series</a></strong></p>\n"},"Rich Text":{"type":["*"],"description":"<p>Rich text can be used in labels of series, axis or other components. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>More examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.</p>\n<p>Since v3.7, rich text has been supported:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fregments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the begining, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text Fregment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Options about Text</strong></p>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fregment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fregment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fregment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fregment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fregment in <code>rich</code> property. For example, <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this fregment}'\n '{b|Style "b" is applied to this fregment}This fregment use default style{x|use style "x"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fregments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Basic Styles of Text, Text Block and Text Fragment</strong></p>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fregment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Position</strong></p>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href=\"option.html\" target=\"_blank\">option doc</a>.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Rotation</strong></p>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p><a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> and<a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Layout and Alignment of Text Fregment</strong></p>\n<p>To understand the layout rule, every text fregment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fregment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fregment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>'\\n'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fregment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fregments. <code>lineHeight</code> of a text fregment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fregment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fregments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>'bottom'</code>: The bottom edge of the text fregment sticks to the bottom edge of the line.</li>\n<li><code>'top'</code>: The top edge of the text fregment sticks to the top edge of the line.</li>\n<li><code>'middle'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fregment can be placed in each line, where the horizontal position of text fregments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fregments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li>\n<li>Secondly, place text fregments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li>\n<li>Finally, the text fregments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fregment:</p>\n<ul>\n<li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fregment box.</li>\n<li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fregment box.</li>\n<li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fregment box.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Effects: Icon, Horizontal Rule, Title Block, Simple Table</strong></p>\n<p>See example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n</code></pre>\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<pre><code class=\"lang-js\">// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>Simple table can be implemented by specify the same width to text fregments that are in the same column of different lines. See the <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">example</a> at the mentioned above.</p>\n"},"Server-side Rendering":{"type":["*"],"description":"<p>ECharts can be rendered at server-side. For example, the thumbnails in the <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>, <a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>, <a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>, <a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>, <a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"Render by Canvas or SVG":{"type":["*"],"description":"<p>Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.</p>\n<p>ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v3.8</a> we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">renderer</a> as <code>'canvas'</code> or <code>'svg'</code> when initailizing a chart instance.</p>\n<blockquote>\n<p>That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">zender</a>, where they are implemented as a Canvas renderer and a alternative SVG renderer.</p>\n</blockquote>\n<h2 id=\"how-to-make-a-choice-\">How to make a choice?</h2>\n<p>Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=lines-bmap-effect\" target=\"_blank\">special visual effect</a>. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg-en&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.</p>\n<p>How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.</p>\n<ul>\n<li>If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.</li>\n<li>If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.<ul>\n<li>If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">liquidfill</a>, the SVG renderer probably gives a better performance.</li>\n<li>If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.</li>\n</ul>\n</li>\n</ul>\n<p>Therefore <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">feedback</a> of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.</p>\n<p>Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.</p>\n<h2 id=\"how-to-use-specify-a-renderer-\">How to use specify a renderer?</h2>\n<p>ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.</p>\n<ul>\n<li>In the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">pre-build</a> of ECharts, the SVG renderer has been included in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.common.min.js\" target=\"_blank\">common version</a> and <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.min.js\" target=\"_blank\">complete version</a>. But not in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.simple.min.js\" target=\"_blank\">simple version</a>.</li>\n<li>If <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">build ECharts online</a>, the checkbox "SVG 渲染" should be checked.</li>\n<li>If <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">build ECharts offline</a>, the module of the SVG renderer should be imported:</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>Then wen can specify renderer by <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">parameter</a>:</p>\n<pre><code class=\"lang-js\">// Use the Canvas renderer (default).\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// which is equal to:\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n\n// Use the SVG renderer.\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"Supporting ARIA in Charts":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: 'Source of user access to a site',\n x: 'center'\n },\n series: [\n {\n Name: 'access source',\n type: 'pie',\n data: [\n { value: 335, name: 'direct access' },\n { value: 310, name: 'mail marketing' },\n { value: 234, name: 'union ad' },\n { value: 135, name: 'video ad' },\n { value: 1548, name: 'search engine' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates.</p>\n<p>Please refer to <a href=\"option.html#aria\" target=\"_blank\">ARIA option</a> for more detail.</p>\n"}}}}
\ No newline at end of file
diff --git a/en/documents/zh/tutorial.json b/en/documents/zh/tutorial.json
index 693721c..18dc62d 100644
--- a/en/documents/zh/tutorial.json
+++ b/en/documents/zh/tutorial.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- 引入 ECharts 文件 -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code><body>\n <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- 引入 echarts.js -->\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>如果对文件体积有更严苛的要求，可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。自定义构建有几种方式：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang <language shortcut or file path></code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code><cwd>/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>'umb'</code>（默认）、<code>'amd'</code>、<code>'iife'</code>、<code>'cjs'</code>、<code>'es'</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from 'echarts/src/echarts';\n// 引入饼图。\nimport 'echarts/src/chart/pie';\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- 引入 lib/echarts.custom.min.js -->\n <script src="lib/echarts.custom.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // 绘制图表。\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from 'echarts/lib/echarts';\n// 引入折线图。\nimport 'echarts/lib/chart/line';\n// 引入提示框组件、标题组件、工具箱组件。\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// 用于压缩构建出的代码。\nimport uglify from 'rollup-plugin-uglify';\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // 入口代码文件，就是刚才所创建的文件。\n input: './line.js',\n plugins: [\n nodeResolve(),\n // ecLangPlugin({lang: 'en'}),\n // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n uglify()\n ],\n output: {\n // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n format: 'umd',\n // 输出 source map 便于调试。\n sourcemap: true,\n // 输出文件的路径。\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <!-- 为 echarts 准备一个具备大小（宽高）的Dom。 -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- 引入刚才构建好的文件。 -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require('echarts')</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>默认使用 <code>require('echarts')</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require('echarts/lib/echarts');\n// 引入柱状图\nrequire('echarts/lib/chart/bar');\n// 引入提示框和标题组件\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code>xAxis</code>，<code>yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n data:[\n {value:235, name:'视频广告'},\n {value:274, name:'联盟广告'},\n {value:310, name:'邮件营销'},\n {value:335, name:'直接访问'},\n {value:400, name:'搜索引擎'}\n ]\n }\n ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 阴影的大小\n shadowBlur: 200,\n // 阴影水平方向上的偏移\n shadowOffsetX: 0,\n // 阴影垂直方向上的偏移\n shadowOffsetY: 0,\n // 阴影颜色\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"#option.html#visualMap\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n // 不显示 visualMap 组件，只用于明暗度的映射\n show: false,\n // 映射的最小值为 80\n min: 80,\n // 映射的最大值为 600\n max: 600,\n inRange: {\n // 明暗度的范围是 0 到 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 "vintage"\n$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n // 全局调色盘。\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // 此系列自己的调色盘。\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // 此系列自己的调色盘。\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: []\n }]\n});\n\n// 异步加载数据\n$.get('data.json').done(function (data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n xAxis: {type: 'category'},\n // 声明一个 Y 轴，数值轴。\n yAxis: {},\n // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n {name: 'score'},\n // 可以简写为 string，表示维度名。\n 'amount',\n // 可以在 type 中指定维度类型。\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // 在系列中设置的 dimensions 会更优先采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>'number'</code>: 默认，表示普通数据。</li>\n<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // 将 "amount" 列映射到 X 轴。\n x: 'amount',\n // 将 "product" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code>encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>问：如何把第四列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n min: 2, // 需要给出数值范围，最小数值。\n max: 15, // 需要给出数值范围，最大数值。\n inRange: {\n // 气泡尺寸：5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // 按列的 key-value 形式。\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n // 序号为 0 的 dataset。\n source: [...],\n }, {\n // 序号为 1 的 dataset。\n source: [...]\n }, {\n // 序号为 2 的 dataset。\n source: [...]\n }],\n series: [{\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n }, {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code>dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> 组件是对 <code>数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p> 数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n series: [\n {\n type: 'scatter', // 这是个『散点图』\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code>option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n },\n { // 这个dataZoom组件，也控制x轴。\n type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p> 单位是浏览器像素（px），用 <code>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p> 表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: '30%', bottom: '40%'}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: 'center'</code>，表示水平居中。</li>\n<li>可以设置 <code>top: 'middle'</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> 是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p> 是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p> 在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>'horizontal'</code> 或者 <code>'vertical'</code>。</p>\n<p><br>\n<strong>于 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: 'right'</code>、<code>left: 'left'</code>、<code>top: 'bottom'</code>、<code>top: 'top'</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // 这里是基本的『原子option』。\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // 这里定义了 media query 的逐条规则。\n {\n query: {...}, // 这里写规则。\n option: { // 这里写此规则满足下的option。\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // 第二个规则。\n option: { // 第二个规则对应的option。\n legend: {...},\n ...\n }\n },\n { // 这条里没有写规则，表示『默认』，\n option: { // 即所有规则都不满足时，采纳这个option。\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>上面的例子中，<code>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // 当长宽比小于1时。\n },\n option: {\n legend: { // legend 放在底部中间。\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // legend 横向布局。\n },\n series: [ // 两个饼图左右布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // 当容器宽度小于 500 时。\n },\n option: {\n legend: {\n right: 10, // legend 放置在右侧中间。\n top: '15%',\n orient: 'vertical' // 纵向布局。\n },\n series: [ // 两个饼图上下布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: 2323, // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n 1212, // 也可以直接是 dataItem 的 value，这更常见。\n 2323, // 每个 value 都是『一维』的。\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，\n // 第二维度映射到y轴，\n // 第三维度映射到气泡半径（symbolSize）\n ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // 可以同时定义多个 visualMap 组件。\n { // 第一个 visualMap 组件\n type: 'continuous', // 定义为连续型 visualMap\n ...\n },\n { // 第二个 visualMap 组件\n type: 'piecewise', // 定义为分段型 visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: { // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，\n // 数据最小值映射到'blue'上，\n // 最大值映射到'red'上，\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围，\n // 数据最小值映射到30上，\n // 最大值映射到100上，\n // 其余自动线性计算。\n },\n outOfRange: { // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // 选中范围中的视觉配置\n colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"},"ECharts 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发<code>'legendselected'</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、<code>'dblclick'</code>、<code>'mousedown'</code>、<code>'mousemove'</code>、<code>'mouseup'</code>、<code>'mouseover'</code>、<code>'mouseout'</code>、<code>'globalout'</code>、<code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n // 当前点击的图形元素所属的组件名称，\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string,\n // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string,\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number,\n // 系列名称。当 componentType 为 'series' 时有意义。\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 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data，dataType 无意义。\n dataType: string,\n // 传入的数据值\n value: number|Array\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge（边）上。\n }\n else {\n // 点击到了 graph 的 node（节点）上。\n }\n }\n }\n});\n</code></pre>\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // 组件 index\n <mainType>Name: string // 组件 name\n <mainType>Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type，如关系图中的 'node', 'edge'\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: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。\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: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('mouseup', {element: 'my_el'}, function () {\n // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function (params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code>'legendselectchanged'</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富有交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data，重绘折线图。\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // 表示不使用默认的『显示』『隐藏』触发规则。\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>这里使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\n<p>总结一下，全部的代码如下：</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\"><script src="echarts.min.js"></script>\n<script>\n // ...\n</script>\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\"><div id="main" style="width=100%; height = 400px"></div>\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n visualMap: {\n show: false\n min: 0,\n max: 1000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]\n }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code>coordinateSystem: 'calendar',</code>和<code>calendar: { range: '2017' }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width:100%;height:400px;"></div>\n <script type="text/javascript">\n var myChart = echarts.init(document.getElementById('main'));\n\n // 模拟数据\n function getVirtulData(year) {\n year = year || '2017';\n var date = +echarts.number.parseDate(year + '-01-01');\n var end = +echarts.number.parseDate(year + '-12-31');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time <= end; time += dayTime) {\n data.push([\n echarts.format.formatTime('yyyy-MM-dd', time),\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n }\n var option = {\n visualMap: {\n show: false,\n min: 0,\n max: 10000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2017)\n }\n };\n myChart.setOption(option);\n </script>\n</body>\n</html>\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>'sunburst'</code> 的系列，并且以树形结构声明其 <code>data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa'\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }]\n }, {\n name: 'C',\n value: 3\n }]\n }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>'#aaa'</code>，将最内层的颜色设为蓝色 <code>'blue'</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>'red'</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa',\n itemStyle: {\n color: 'red'\n }\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }],\n itemStyle: {\n color: 'red'\n }\n }, {\n name: 'C',\n value: 3\n }],\n itemStyle: {\n color: '#aaa'\n },\n levels: [{\n // 留给数据下钻的节点属性\n }, {\n itemStyle: {\n color: 'blue'\n }\n }]\n }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code>false</code> 关闭；或者将其设为 <code>'link'</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code>'descendant'</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>'ancestor'</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>'self'</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>'none'</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p><code>highlightPolicy</code> 为 <code>'descendant'</code> 或 <code>'ancestor'</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n // （但是注意，并不一定是按照 data 的顺序调用）\n\n // 这里进行一些处理，例如，坐标转换。\n // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n var categoryIndex = api.value(0);\n // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n var height = api.size([0, 1])[1] * 0.6;\n\n // shape 属性描述了这个矩形的像素位置和大小。\n // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n // 如果矩形完全被剪掉，会返回 undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // 矩形的位置和大小。\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // 当前坐标系的包围盒。\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n // 这里返回为这个 dataItem 构建的图形元素定义。\n return rectShape && {\n // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。\n type: 'rect',\n shape: rectShape,\n // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n // option 中 itemStyle 的配置和视觉映射得到的颜色。\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // 这是第一个 dataItem\n [53, 31, 21, 56], // 这是第二个 dataItem\n [71, 33, 10, 20], // 这是第三个 dataItem\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: 'green', stroke: 'yellow'})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n // data 中『维度0』对应到 Y 轴\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // 表示『维度2』和『维度3』要显示到 tooltip 中。\n tooltip: [2, 3]\n },\n // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n dimensions: [null, null, '年龄', '满意度'],\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 'weakFilter'。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = 'weakFilter'</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // 用户指定的信息，可以在 event handler 访问到。\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>'\\n'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>'middle'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\"><script src="lib/echarts.min.js"></script>\n<script src="lib/echarts-gl.min.js"></script>\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from 'echarts';\nimport 'echarts-gl';\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n // \b需要注意的是我们不能跟 grid 一样省略 grid3D\n grid3D: {},\n // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: 'category'</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n var exponent = -(\n ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n );\n return amplitude * Math.pow(Math.E, exponent);\n }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i < 1000; i++) {\n // x, y 随机分布\n var x = Math.random() * 100 - 50;\n var y = Math.random() * 100 - 50;\n var z = gaussian(x, y);\n data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数\b\u001c据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n ...\n]\n</code></pre>\n<p>每一项都包含了<code>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 100 },\n series: [{\n type: 'scatter3D',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n["Income", "Life Expectancy", "Population", "Country", "Year"],\n[815, 34.05, 351014, "Australia", 1800],\n[1314, 39, 645526, "Canada", 1800],\n[985, 32, 321675013, "China", 1800],\n[864, 32.2, 345043, "Cuba", 1800],\n[1244, 36.5731262, 977662, "Finland", 1800],\n...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get('data/asset/data/life-expectancy-table.json', function (data) {\n myChart.setOption({\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5\n }\n ]\n })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {},\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'category'\n },\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Year',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {\n viewControl: {\n // 使用正交投影。\n projection: 'orthographic'\n }\n },\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'log'\n },\n zAxis3D: {},\n visualMap: {\n calculable: true,\n max: 100,\n // 维度的名字默认就是表头的属性名\n dimension: 'Life Expectancy',\n inRange: {\n color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n }\n },\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Population',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y <= 50; y++) {\n for (var x = -50; x <= 50; x++) {\n var z = gaussian(x, y);\n data.push([x, y, z]);\n }\n}\noption = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 60 },\n series: [{\n type: 'surface',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"},"在微信小程序中使用 ECharts":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://github.com/ecomfe/echarts-for-weixin/raw/master/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>'pages/bar/index'</code>。</p>\n<p><code>index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n "usingComponents": {\n "ec-canvas": "../../ec-canvas/ec-canvas"\n }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code>pages/bar/index.wxml</code> 中使用 <code><ec-canvas></code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code><ec-canvas></code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\"><view class="container">\n <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>\n</view>\n</code></pre>\n<p>其中 <code>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height\n });\n canvas.setChart(chart);\n\n var option = {\n ...\n };\n chart.setOption(option);\n return chart;\n}\n\nPage({\n data: {\n ec: {\n onInit: initChart\n }\n }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- 引入 ECharts 文件 -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code><body>\n <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- 引入 echarts.js -->\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"/zh/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>我们也可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。可以用这几种方式自定义构建：</p>\n<ul>\n<li><a href=\"/zh/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang <language shortcut or file path></code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code><cwd>/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>'umb'</code>（默认）、<code>'amd'</code>、<code>'iife'</code>、<code>'cjs'</code>、<code>'es'</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from 'echarts/src/echarts';\n// 引入饼图。\nimport 'echarts/src/chart/pie';\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- 引入 lib/echarts.custom.min.js -->\n <script src="lib/echarts.custom.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // 绘制图表。\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from 'echarts/lib/echarts';\n// 引入折线图。\nimport 'echarts/lib/chart/line';\n// 引入提示框组件、标题组件、工具箱组件。\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// 用于压缩构建出的代码。\nimport uglify from 'rollup-plugin-uglify';\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // 入口代码文件，就是刚才所创建的文件。\n input: './line.js',\n plugins: [\n nodeResolve(),\n // ecLangPlugin({lang: 'en'}),\n // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n uglify()\n ],\n output: {\n // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n format: 'umd',\n // 输出 source map 便于调试。\n sourcemap: true,\n // 输出文件的路径。\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <!-- 为 echarts 准备一个具备大小（宽高）的Dom。 -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- 引入刚才构建好的文件。 -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require('echarts')</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>默认使用 <code>require('echarts')</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require('echarts/lib/echarts');\n// 引入柱状图\nrequire('echarts/lib/chart/bar');\n// 引入提示框和标题组件\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code>xAxis</code>，<code>yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n data:[\n {value:235, name:'视频广告'},\n {value:274, name:'联盟广告'},\n {value:310, name:'邮件营销'},\n {value:335, name:'直接访问'},\n {value:400, name:'搜索引擎'}\n ]\n }\n ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 阴影的大小\n shadowBlur: 200,\n // 阴影水平方向上的偏移\n shadowOffsetX: 0,\n // 阴影垂直方向上的偏移\n shadowOffsetY: 0,\n // 阴影颜色\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"#option.html#visualMap\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n // 不显示 visualMap 组件，只用于明暗度的映射\n show: false,\n // 映射的最小值为 80\n min: 80,\n // 映射的最大值为 600\n max: 600,\n inRange: {\n // 明暗度的范围是 0 到 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 "vintage"\n$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n // 全局调色盘。\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // 此系列自己的调色盘。\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // 此系列自己的调色盘。\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: []\n }]\n});\n\n// 异步加载数据\n$.get('data.json').done(function (data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n xAxis: {type: 'category'},\n // 声明一个 Y 轴，数值轴。\n yAxis: {},\n // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n {name: 'score'},\n // 可以简写为 string，表示维度名。\n 'amount',\n // 可以在 type 中指定维度类型。\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // 在系列中设置的 dimensions 会更优先采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>'number'</code>: 默认，表示普通数据。</li>\n<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // 将 "amount" 列映射到 X 轴。\n x: 'amount',\n // 将 "product" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code>encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>问：如何把第四列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n min: 2, // 需要给出数值范围，最小数值。\n max: 15, // 需要给出数值范围，最大数值。\n inRange: {\n // 气泡尺寸：5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // 按列的 key-value 形式。\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n // 序号为 0 的 dataset。\n source: [...],\n }, {\n // 序号为 1 的 dataset。\n source: [...]\n }, {\n // 序号为 2 的 dataset。\n source: [...]\n }],\n series: [{\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n }, {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code>dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> 组件是对 <code>数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p> 数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n series: [\n {\n type: 'scatter', // 这是个『散点图』\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code>option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n },\n { // 这个dataZoom组件，也控制x轴。\n type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p> 单位是浏览器像素（px），用 <code>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p> 表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: '30%', bottom: '40%'}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: 'center'</code>，表示水平居中。</li>\n<li>可以设置 <code>top: 'middle'</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> 是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p> 是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p> 在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>'horizontal'</code> 或者 <code>'vertical'</code>。</p>\n<p><br>\n<strong>与 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: 'right'</code>、<code>left: 'left'</code>、<code>top: 'bottom'</code>、<code>top: 'top'</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // 这里是基本的『原子option』。\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // 这里定义了 media query 的逐条规则。\n {\n query: {...}, // 这里写规则。\n option: { // 这里写此规则满足下的option。\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // 第二个规则。\n option: { // 第二个规则对应的option。\n legend: {...},\n ...\n }\n },\n { // 这条里没有写规则，表示『默认』，\n option: { // 即所有规则都不满足时，采纳这个option。\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>上面的例子中，<code>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // 当长宽比小于1时。\n },\n option: {\n legend: { // legend 放在底部中间。\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // legend 横向布局。\n },\n series: [ // 两个饼图左右布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // 当容器宽度小于 500 时。\n },\n option: {\n legend: {\n right: 10, // legend 放置在右侧中间。\n top: '15%',\n orient: 'vertical' // 纵向布局。\n },\n series: [ // 两个饼图上下布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: 2323, // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n 1212, // 也可以直接是 dataItem 的 value，这更常见。\n 2323, // 每个 value 都是『一维』的。\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，\n // 第二维度映射到y轴，\n // 第三维度映射到气泡半径（symbolSize）\n ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // 可以同时定义多个 visualMap 组件。\n { // 第一个 visualMap 组件\n type: 'continuous', // 定义为连续型 visualMap\n ...\n },\n { // 第二个 visualMap 组件\n type: 'piecewise', // 定义为分段型 visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: { // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，\n // 数据最小值映射到'blue'上，\n // 最大值映射到'red'上，\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围，\n // 数据最小值映射到30上，\n // 最大值映射到100上，\n // 其余自动线性计算。\n },\n outOfRange: { // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // 选中范围中的视觉配置\n colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"},"ECharts 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发<code>'legendselected'</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、<code>'dblclick'</code>、<code>'mousedown'</code>、<code>'mousemove'</code>、<code>'mouseup'</code>、<code>'mouseover'</code>、<code>'mouseout'</code>、<code>'globalout'</code>、<code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n // 当前点击的图形元素所属的组件名称，\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string,\n // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string,\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number,\n // 系列名称。当 componentType 为 'series' 时有意义。\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 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data，dataType 无意义。\n dataType: string,\n // 传入的数据值\n value: number|Array\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge（边）上。\n }\n else {\n // 点击到了 graph 的 node（节点）上。\n }\n }\n }\n});\n</code></pre>\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // 组件 index\n <mainType>Name: string // 组件 name\n <mainType>Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type，如关系图中的 'node', 'edge'\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: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。\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: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('mouseup', {element: 'my_el'}, function () {\n // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function (params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code>'legendselectchanged'</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data，重绘折线图。\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // 表示不使用默认的『显示』『隐藏』触发规则。\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>这里使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\n<p>总结一下，全部的代码如下：</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\"><script src="echarts.min.js"></script>\n<script>\n // ...\n</script>\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\"><div id="main" style="width=100%; height = 400px"></div>\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n visualMap: {\n show: false\n min: 0,\n max: 1000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]\n }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code>coordinateSystem: 'calendar',</code>和<code>calendar: { range: '2017' }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width:100%;height:400px;"></div>\n <script type="text/javascript">\n var myChart = echarts.init(document.getElementById('main'));\n\n // 模拟数据\n function getVirtulData(year) {\n year = year || '2017';\n var date = +echarts.number.parseDate(year + '-01-01');\n var end = +echarts.number.parseDate(year + '-12-31');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time <= end; time += dayTime) {\n data.push([\n echarts.format.formatTime('yyyy-MM-dd', time),\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n }\n var option = {\n visualMap: {\n show: false,\n min: 0,\n max: 10000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2017)\n }\n };\n myChart.setOption(option);\n </script>\n</body>\n</html>\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>'sunburst'</code> 的系列，并且以树形结构声明其 <code>data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa'\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }]\n }, {\n name: 'C',\n value: 3\n }]\n }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>'#aaa'</code>，将最内层的颜色设为蓝色 <code>'blue'</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>'red'</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa',\n itemStyle: {\n color: 'red'\n }\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }],\n itemStyle: {\n color: 'red'\n }\n }, {\n name: 'C',\n value: 3\n }],\n itemStyle: {\n color: '#aaa'\n },\n levels: [{\n // 留给数据下钻的节点属性\n }, {\n itemStyle: {\n color: 'blue'\n }\n }]\n }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code>false</code> 关闭；或者将其设为 <code>'link'</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code>'descendant'</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>'ancestor'</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>'self'</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>'none'</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p><code>highlightPolicy</code> 为 <code>'descendant'</code> 或 <code>'ancestor'</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n // （但是注意，并不一定是按照 data 的顺序调用）\n\n // 这里进行一些处理，例如，坐标转换。\n // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n var categoryIndex = api.value(0);\n // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n var height = api.size([0, 1])[1] * 0.6;\n\n // shape 属性描述了这个矩形的像素位置和大小。\n // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n // 如果矩形完全被剪掉，会返回 undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // 矩形的位置和大小。\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // 当前坐标系的包围盒。\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n // 这里返回为这个 dataItem 构建的图形元素定义。\n return rectShape && {\n // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。\n type: 'rect',\n shape: rectShape,\n // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n // option 中 itemStyle 的配置和视觉映射得到的颜色。\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // 这是第一个 dataItem\n [53, 31, 21, 56], // 这是第二个 dataItem\n [71, 33, 10, 20], // 这是第三个 dataItem\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: 'green', stroke: 'yellow'})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n // data 中『维度0』对应到 Y 轴\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // 表示『维度2』和『维度3』要显示到 tooltip 中。\n tooltip: [2, 3]\n },\n // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n dimensions: [null, null, '年龄', '满意度'],\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 'weakFilter'。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = 'weakFilter'</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // 用户指定的信息，可以在 event handler 访问到。\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>'\\n'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>'middle'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\"><script src="lib/echarts.min.js"></script>\n<script src="lib/echarts-gl.min.js"></script>\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from 'echarts';\nimport 'echarts-gl';\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n // \b需要注意的是我们不能跟 grid 一样省略 grid3D\n grid3D: {},\n // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: 'category'</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n var exponent = -(\n ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n );\n return amplitude * Math.pow(Math.E, exponent);\n }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i < 1000; i++) {\n // x, y 随机分布\n var x = Math.random() * 100 - 50;\n var y = Math.random() * 100 - 50;\n var z = gaussian(x, y);\n data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数\b\u001c据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n ...\n]\n</code></pre>\n<p>每一项都包含了<code>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 100 },\n series: [{\n type: 'scatter3D',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n["Income", "Life Expectancy", "Population", "Country", "Year"],\n[815, 34.05, 351014, "Australia", 1800],\n[1314, 39, 645526, "Canada", 1800],\n[985, 32, 321675013, "China", 1800],\n[864, 32.2, 345043, "Cuba", 1800],\n[1244, 36.5731262, 977662, "Finland", 1800],\n...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get('data/asset/data/life-expectancy-table.json', function (data) {\n myChart.setOption({\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5\n }\n ]\n })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {},\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'category'\n },\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Year',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {\n viewControl: {\n // 使用正交投影。\n projection: 'orthographic'\n }\n },\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'log'\n },\n zAxis3D: {},\n visualMap: {\n calculable: true,\n max: 100,\n // 维度的名字默认就是表头的属性名\n dimension: 'Life Expectancy',\n inRange: {\n color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n }\n },\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Population',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y <= 50; y++) {\n for (var x = -50; x <= 50; x++) {\n var z = gaussian(x, y);\n data.push([x, y, z]);\n }\n}\noption = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 60 },\n series: [{\n type: 'surface',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"},"在微信小程序中使用 ECharts":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://github.com/ecomfe/echarts-for-weixin/raw/master/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>'pages/bar/index'</code>。</p>\n<p><code>index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n "usingComponents": {\n "ec-canvas": "../../ec-canvas/ec-canvas"\n }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code>pages/bar/index.wxml</code> 中使用 <code><ec-canvas></code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code><ec-canvas></code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\"><view class="container">\n <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>\n</view>\n</code></pre>\n<p>其中 <code>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height\n });\n canvas.setChart(chart);\n\n var option = {\n ...\n };\n chart.setOption(option);\n return chart;\n}\n\nPage({\n data: {\n ec: {\n onInit: initChart\n }\n }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"}}}}
\ No newline at end of file
diff --git a/en/download-extension.html b/en/download-extension.html
index 1ae811b..ed90764 100644
--- a/en/download-extension.html
+++ b/en/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/download-map.html b/en/download-map.html
index 8219233..a1b5980 100644
--- a/en/download-map.html
+++ b/en/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/download-theme.html b/en/download-theme.html
index 0ec0259..e57a2cc 100644
--- a/en/download-theme.html
+++ b/en/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/download.html b/en/download.html
index 2de576e..569dee1 100644
--- a/en/download.html
+++ b/en/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -14,7 +14,7 @@
//- color: #214d62;
//- font-weight: normal;
//- }
-</style><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="page-info"><h1>Download</h1><p>Free to choose to download different versions, different topics, the map data you need. You can be customized according to your needs.</p></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">Option 1: Install from npm</h3><p><code>npm install echarts</code></p><h3>Option 2: Install from released binary, or download source code</h3><table id="download-table" class="table"><tr><th>Version</th><th>Release Date</th><th>Download Source from a Mirror</th><th>Dist files on GitHub</th></tr></table><div class="checksum"><p><strong>Note:</strong> when downloading from a mirror please check the <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> and verify the <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> compatible signature from the main <a href="https://www.apache.org">Apache site</a>. Links are provided above (next to the release download link). This <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> file contains the public keys used for signing release. It is recommended that (when possible) a <a href="https://www.apache.org/dev/release-signing#web-of-trust">web of trust</a> is used to confirm the identity of these keys.</p><h4>To verify ECharts releases using GPG:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.asc from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>Download the <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a> file.</li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>To perform a quick check using SHA-512:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.512 from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) is licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p><h3>Option 3: Custom Build</h3><a href="builder.html" class="btn btn-thirdary more-btn">Customize</a><p>Choose the features you want and build the file online.</p><h3>After downloading...</h3><p><a href="./tutorial.html">Get Started</a></p></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="js/download.js?_v_=1571170595532"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+</style><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="page-info"><h1>Download</h1><p>Free to choose to download different versions, different topics, the map data you need. You can be customized according to your needs.</p></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">Option 1: Install from npm</h3><p><code>npm install echarts</code></p><h3>Option 2: Install from released binary, or download source code</h3><table id="download-table" class="table"><tr><th>Version</th><th>Release Date</th><th>Download Source from a Mirror</th><th>Dist files on GitHub</th></tr></table><div class="checksum"><p><strong>Note:</strong> when downloading from a mirror please check the <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> and verify the <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> compatible signature from the main <a href="https://www.apache.org">Apache site</a>. Links are provided above (next to the release download link). This <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> file contains the public keys used for signing release. It is recommended that (when possible) a <a href="https://www.apache.org/dev/release-signing#web-of-trust">web of trust</a> is used to confirm the identity of these keys.</p><h4>To verify ECharts releases using GPG:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.asc from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>Download the <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a> file.</li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>To perform a quick check using SHA-512:</h4><ol><li>Download the release apache-echarts-X.Y.Z-incubating-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-incubating-src.zip.512 from <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a>.</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) is licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p><h3>Option 3: Custom Build</h3><a href="builder.html" class="btn btn-thirdary more-btn">Customize</a><p>Choose the features you want and build the file online.</p><h3>After downloading...</h3><p><a href="./tutorial.html">Get Started</a></p></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="js/download.js?_v_=1571425310596"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
var list = [
{
diff --git a/en/faq.html b/en/faq.html
index a93be6c..842e611 100644
--- a/en/faq.html
+++ b/en/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/feature.html b/en/feature.html
index 44c01b7..bb5ac2f 100644
--- a/en/feature.html
+++ b/en/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/index.html b/en/index.html
index 2766cca..5174205 100644
--- a/en/index.html
+++ b/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -19,7 +19,7 @@
<a class="github-button" href="https://github.com/apache/incubator-echarts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star apache/incubator-echarts on GitHub">GitHub Stars</a></p></div></div><div id="feature-4" class="row feature-detail"><div class="col-sm-4 col"><h2>Brand-new v4.0</h2><p>Rendering ability for ten-million-level data</p><p>Supports both SVG and Canvas rendering</p><p>Seperates data and style configuring</p><p>Accessibility supports</p><p>Wechart and Powerpoint supports</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><video id="video-feature-4" autoplay="true" loop="true" muted="true" data-src="video/feature-4.mp4" poster="images/features/scatterGL4.jpg" class="lazy feature-video"></video></div></div><div id="feature-dimension" class="row feature-detail"><div class="col-sm-4 col mobile"><h2>Multi-dimension data analysis</h2><h3>Brush data for detail</h3><p>Dig more out of data</p><h3>Multi-chart interaction</h3><p>Analysis the relationship between multiple charts</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="images/feature-1.png" class="lazy"><video id="video-feature-1" autoplay="true" loop="true" muted="true" data-src="video/feature-1.mp4" poster="video/feature-2.jpg" class="lazy feature-video"></video></div></div><div id="col-analysis" class="col-sm-4 col pc"><h2>Multi-dimension data analysis</h2><h3>Brush data for detail</h3><p>Dig more out of data</p><h3>Multi-chart interaction</h3><p>Analysis the relationship between multiple charts</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div></div><div class="row feature-detail"><div id="col-data" class="col-sm-4 col"><h2>Charts for all sized devices</h2><h3>PC / Phone / Pad / Large Screen ...</h3><p>Responsive design for all devices</p><div class="feature-btn"><a href="./tutorial.html">Learn More<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="images/index-feature.jpg" class="lazy"></div></div><script type="text/javascript">window.supportTouch && (document.getElementById('ch-main').className += ' ch-on-touch');
</script></div></div></section><section id="publication"><div class="container"><div class="col-sm-8 col"><h2>ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note"><i class="note-icon"><img classs="lazy" data-src="./images/note.svg" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><p class="link">Visual Informatics, 2018<a href="https://www.sciencedirect.com/science/article/pii/S2468502X18300068">[PDF]</a></p></div><div class="col-sm-4 col"><div class="img-container"><img data-src="./images/pipeline.jpg" alt="" class="lazy"></div></div></div></section><section class="container"><div class="companies"><img data-src="images/company/company1.jpg" class="lazy"><img data-src="images/company/company2.jpg" class="lazy"><img data-src="images/company/company3.jpg" class="lazy"><img data-src="images/company/company4.jpg" class="lazy"><img data-src="images/company/company5.jpg" class="lazy"><img data-src="images/company/company6.jpg" class="lazy"><img data-src="images/company/company7.jpg" class="lazy"><img data-src="images/company/company8.jpg" class="lazy"><img data-src="images/company/company9.jpg" class="lazy"><img data-src="images/company/company10.jpg" class="lazy"><img data-src="images/company/company11.jpg" class="lazy"><img data-src="images/company/company12.jpg" class="lazy"><img data-src="images/company/company13.jpg" class="lazy"><img data-src="images/company/company14.jpg" class="lazy"><img data-src="images/company/company15.jpg" class="lazy"><img data-src="images/company/company16.jpg" class="lazy"><img data-src="images/company/company17.jpg" class="lazy"><img data-src="images/company/company18.jpg" class="lazy"><img data-src="images/company/company19.jpg" class="lazy"><img data-src="images/company/company20.jpg" class="lazy"><img data-src="images/company/company21.jpg" class="lazy"><img data-src="images/company/company22.jpg" class="lazy"><img data-src="images/company/company23.jpg" class="lazy"><img data-src="images/company/company24.jpg" class="lazy"></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script>window.lazyLoadOptions = {
elements_selector: ".lazy"
-};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="./js/index.js?_v_=1571170595532"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="./js/index.js?_v_=1571425310596"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/en/maillist.html b/en/maillist.html
index f7a7f44..af9e1df 100644
--- a/en/maillist.html
+++ b/en/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/option-gl.html b/en/option-gl.html
index 84bd4a8..b25ffcd 100644
--- a/en/option-gl.html
+++ b/en/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'option-gl',
initHash: 'globe',
@@ -16,7 +16,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -43,7 +43,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/en/option.html b/en/option.html
index a9a1c06..306b518 100644
--- a/en/option.html
+++ b/en/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="doc-version-change"><a href="https://echarts.baidu.com/echarts2/index-en.html">v2.x Doc</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'option',
initHash: 'title',
@@ -16,7 +16,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -43,7 +43,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/en/option3.html b/en/option3.html
index 45e0283..ed22166 100644
--- a/en/option3.html
+++ b/en/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/en/tutorial.html b/en/tutorial.html
index d6b38de..3d87f5c 100644
--- a/en/tutorial.html
+++ b/en/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">$('#main').addClass('tutorial');
window.globalArgsExtra = {
@@ -30,7 +30,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -57,7 +57,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/examples/en/editor.html b/examples/en/editor.html
index b1c8b12..eb48514 100644
--- a/examples/en/editor.html
+++ b/examples/en/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571170547318"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571425236994"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
var menu = document.getElementById(selector);
if (menu) {
@@ -26,7 +26,7 @@
}
window.ROOT_PATH = 'https://echarts.apache.org/examples/';
-</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ace.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1571170547318"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571170547318"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ace.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1571425236994"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571425236994"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/examples/en/index.html b/examples/en/index.html
index 094f354..ec46906 100644
--- a/examples/en/index.html
+++ b/examples/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571170547318"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571425236994"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
var menu = document.getElementById(selector);
if (menu) {
@@ -22,7 +22,7 @@
}
window.ROOT_PATH = 'https://echarts.apache.org/examples/';
-</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/waypoint.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data-gl.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list.js?_v_=1571170547318"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/waypoint.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data-gl.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list.js?_v_=1571425236994"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/examples/en/view.html b/examples/en/view.html
index c8e9ee2..eaa7989 100644
--- a/examples/en/view.html
+++ b/examples/en/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571170547318"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571425236994"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now for the latest information.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="view-main"><div class="control-panel"></div><div id="view-chart" class="chart"></div></div><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/jquery/jquery.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/bootstrap/js/bootstrap.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/lodash.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js"></script><script type="text/javascript">function changeLang(lang) {
if (lang === 'en') {
if (location.hostname !== 'echarts.apache.org') {
@@ -17,7 +17,7 @@
}
window.ROOT_PATH = 'https://echarts.apache.org/examples/';
-</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/view.js?_v_=1571170547318"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/view.js?_v_=1571425236994"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/examples/javascripts/editor.js b/examples/javascripts/editor.js
index 6e85e19..1d611e8 100644
--- a/examples/javascripts/editor.js
+++ b/examples/javascripts/editor.js
@@ -1 +1 @@
-function makeSearch(e){var t=[];for(var o in e)null!=e[o]&&t.push(o+"="+e[o]);return t.join("&")}function initEditor(){gb.editor=ace.edit("code-panel"),gb.editor.getSession().setMode("ace/mode/javascript"),gb.editor.setOptions({enableBasicAutocompletion:!0,enableSnippets:!0,enableLiveAutocompletion:!0})}function initEcharts(){gb.editor.setValue("var option = {\n \n};\n"),gb.editor.selection.setSelectionRange({start:{row:1,column:4},end:{row:1,column:4}})}function initControl(){$("#theme-dropdown").on("click","li a",function(){setThemeButton($(this).text())}),$("#echarts-version-dropdown").on("click","li a",function(){setEchartsVersionButton($(this).text())})}function setThemeButton(e){$("#theme-btn").html("ECharts-"+e+' <span class="caret"></span>'),$("#theme-btn").val(e),disposeAndRun()}function setEchartsVersionButton(e){$("#echarts-version-btn").html("ECharts-"+e+' <span class="caret"></span>'),$("#echarts-version-btn").val(e),updateEchartsVersion()}function initEventHandler(){gb.enableLive&&gb.editor.on("change",function(){runDebounce()}),$("#h-handler").mousedown(function(){gb.handler.isDown=!0}),$(window).mousemove(function(e){if(gb.handler.isDown){var t=e.clientX/window.innerWidth;setSplitPosition(t)}}).mouseup(function(){gb.handler.isDown=!1}),$(window).resize(function(){gb.chart.resize(),appEnv.onresize&&appEnv.onresize(),checkEditorIfToShow()})}function setSplitPosition(e){e=Math.min(.9,Math.max(.1,e));var t=100*e;$("#code-container").css("width",t+"%"),$(".right-container").css("width",100-t+"%").css("left",t+"%"),$("#h-handler").css("left",t+"%"),gb.chart&&(gb.chart.resize(),appEnv.onresize&&appEnv.onresize())}function checkEditorIfToShow(){window.innerWidth<768?(void 0===gb.editorIsShown||gb.editorIsShown===!0)&&($("#code-container").hide(),$("#h-handler").hide(),$(".right-container").css("width","100%").css("left","0%"),gb.editorIsShown=!1):(void 0===gb.editorIsShown||gb.editorIsShown===!1)&&($("#code-container").show(),$("#h-handler").show(),setSplitPosition(.4),gb.editorIsShown=!0)}function _clearTimeTickers(){for(var e=0;e<_intervalIdList.length;e++)clearInterval(_intervalIdList[e]);for(var e=0;e<_timeoutIdList.length;e++)clearTimeout(_timeoutIdList[e]);_intervalIdList=[],_timeoutIdList=[]}function _wrapOnMethods(e){var t=e.on;e.on=function(o){var n=t.apply(e,arguments);return _events.push(o),n}}function _clearChartEvents(){_events.forEach(function(e){gb.chart&&gb.chart.off(e)}),_events.length=0}function disposeAndRun(){gb.chart&&gb.chart.dispose();$("#theme-btn").val()||"default";gb.chart=null,run(!0)}function updateEchartsVersion(){var version=$("#echarts-version-btn").val();if(!echarts||version!==echarts.version||gb.echartsSource[version])try{eval(gb.echartsSource[version]),disposeAndRun()}catch(e){log("加载 ECharts 版本失败！","error")}}function localSave(){var e=gb.editor.getValue();if(window.localStorage&&e!==gb.loadedCode)try{window.localStorage.setItem("code",e),$("#reset-btn").css("display","inline-block")}catch(t){console.error(t),log("缓存到本地失败，刷新页面后图表将不被保存，请及时保存")}}function localLoad(){try{var e=window.localStorage.getItem("code");e&&(gb.editor.setValue(e,-1),gb.enableLive||runDebounce(),log("读取本地缓存成功"))}catch(t){console.error(t)}}function localReset(){gb.loadedCode&&(gb.editor.setValue(gb.loadedCode),gb.enableLive||runDebounce(),localSave(),$("#reset-btn").hide(),run())}function hasEditorError(){for(var e=gb.editor.getSession().getAnnotations(),t=0,o=e.length;o>t;++t)if("error"===e[t].type)return!0;return!1}function load(){function e(){configs.c&&(console.log(configs.c),$.ajax("../"+t+"/"+configs.c+".js",{dataType:"text",success:function(e){gb.loadedCode=e,gb.editor.setValue(e,-1),gb.enableLive||runDebounce()}}).fail(function(){log("加载图表失败！","error")}))}var t=configs.gl?"data-gl":"data";if(configs.gl){var o=document.createElement("script");o.onload=function(){e()},o.src="../vendors/echarts-gl/echarts-gl.js",document.body.appendChild(o)}else e()}function log(e,t){var o=formatTime(new Date);"warn"!==t&&"error"!==t&&(t="info"),$("#code-info").html('<span class="code-info-time">'+o+'</span><span class="code-info-type-'+t+'">'+e+"</span>")}function formatTime(e){for(var t=[e.getHours(),e.getMinutes(),e.getSeconds()],o="",n=0,a=t.length;a>n;++n)o+=(t[n]<10?"0":"")+t[n],a-1>n&&(o+=":");return o}function getVersion(){var e=window.location.href.split("/");return 4===e.length?1:parseInt(e[e.length-1],10)||1}function getCid(){return window.location.href.split("/")[3]}function downloadExample(){var e='<!DOCTYPE html>\n<html style="height: 100%">\n <head>\n <meta charset="utf-8">\n </head>\n <body style="height: 100%; margin: 0">\n <div id="container" style="height: 100%"></div>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>\n <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>\n <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>\n <script type="text/javascript">\nvar dom = document.getElementById("container");\nvar myChart = echarts.init(dom);\nvar app = {};\noption = null;\n'+gb.editor.getValue()+';\nif (option && typeof option === "object") {\n myChart.setOption(option, true);\n}\n </script>\n </body>\n</html>',t=new Blob([e],{type:"text/html;charset=UTF-8",encoding:"UTF-8"}),o=document.createElement("a");o.href=URL.createObjectURL(t),o.download=configs.c+".html",o.click()}for(var lang={zh:{errorInEditor:"编辑器内容有误！",chartOK:"图表已生成, "},en:{errorInEditor:"Errors exist in code!",chartOK:"Chart has been generated successfully, "}}[window.EC_DEMO_LANG],configs={},lnTools=ace.require("ace/ext/language_tools"),keywords={grid:108210,series:1161721,pie:173151,legend:278319,right:12224,tooltip:188049,xAxis:374619,bar:182040,label:163527,emphasis:5e4,formatter:62138,line:306801,data:232156,left:24464,top:18094,scatter:48954,type:92134,yAxis:238764,axisLabel:73604,legendHoverLink:14243,textStyle:129159,hoverAnimation:9062,dataZoom:90999,nameLocation:15800,nameTextStyle:30596,nameGap:14640,singleAxis:15977,splitLine:30047,nameRotate:10483,inverse:12997,boundaryGap:18533,clockwise:4411,lineStyle:81857,selectedOffset:2984,width:17962,slider:28321,dataBackground:2287,areaStyle:19428,color:94439,height:7954,orient:17218,align:10373,symbol:35613,xAxisIndex:15405,stack:10602,clipOverflow:3229,center:9827,padding:12855,itemStyle:143518,itemGap:11914,shadowBlur:17233,shadowColor:13929,normal:211293,borderColor:20648,shadowOffsetX:11499,shadowOffsetY:9210,opacity:12301,heatmap:13825,value:21111,fillerColor:797,borderWidth:15576,itemWidth:7123,effectScatter:31179,coordinateSystem:15302,axisLine:53628,axisTick:38765,selectedMode:15177,fontSize:14906,inactiveColor:5720,selected:10921,gauge:55176,markLine:65539,handleStyle:1852,borderType:5717,title:158568,show:82e3,length:4814,zlevel:22293,labelPrecision:746,position:48349,labelFormatter:727,alignWithLabel:3785,interval:28810,showDetail:694,yAxisIndex:10560,showDataShadow:591,realtime:2611,onZero:3690,silent:22883,radar:61070,axisPointer:23175,trigger:15344,barCategoryGap:3511,splitNumber:19992,inside:32482,name:61072,showSymbol:4778,containLabel:6413,offset:15619,max:12538,backgroundColor:32864,visualMap:95262,fontStyle:14443,fontWeight:11970,fontFamily:10141,symbolSize:21077,blurSize:360,geo:65283,radius:8533,markArea:19906,map:102385,brush:29508,parallel:20673,parallelAxis:13713,gridIndex:20650,piecewise:25231,showContent:6960,zoom:3997,polar:23175,controller:2892,radiusAxis:24146,angleAxis:18771,toolbox:101543,timeline:34619,precision:3306,curveness:1378,x:2753,valueIndex:2807,itemHeight:5180,icon:10336,valueDim:2013,symbolOffset:10017,y:1590,transitionDuration:3814,radarIndex:715,extraCssText:3640,animation:17864,"animationThreshold = 2000":11727,minInterval:11278,animationDelay:7620,layoutCenter:2348,animationDurationUpdate:6972,animationEasingUpdate:6816,animationDelayUpdate:6642,symbolRotate:10221,feature:50238,axis:1794,crossStyle:1830,funnel:11042,scaleLimit:4792,roam:7112,itemSize:1966,showTitle:1851,smooth:5185,saveAsImage:9915,showAllSymbol:3417,polarIndex:5235,graph:76898,layout:2633,excludeComponents:447,restore:3693,dataView:10258,magicType:10505,iconStyle:9088,nodeScaleRatio:892,hoverLayerThreshold:6480,textAlign:9402,splitArea:16447,nameMap:4584,text:11691,pixelRatio:357,readOnly:491,optionToContent:936,lang:549,textareaColor:233,textareaBorderColor:177,option:2003,seriesIndex:4483,back:199,rect:323,polygon:254,min:16646,scale:14303,logBase:7456,start:2889,z:15867,link:5348,textBaseline:4210,subtext:5086,sublink:2618,subtarget:2373,subtextStyle:7732,triggerEvent:9175,blendMode:6359,progressiveThreshold:4699,continuous:42105,lines:31608,markPoint:81254,roseType:4221,animationEasing:8836,animationDuration:9562,calculable:3953,progressive:5761,treemap:16948,links:9573,edgeSymbol:1211,bottom:13969,edges:1122,edgeLabel:1685,edgeSymbolSize:769,focusNodeAdjacency:888,draggable:965,force:5601,geoIndex:2856,circular:1862,avoidLabelOverlap:3694,target:5476,coord:3995,startValue:2182,triggerOn:6741,showDelay:3535,alwaysShowContent:4928,enterable:3871,hideDelay:3018,step:3437,detail:5434,startAngle:5421,handleIcon:1051,handleSize:932,zoomLock:1979,throttle:1757,boxplot:6233,candlestick:14005,sankey:10101,loop:678,rewind:439,controlStyle:1269,labelLine:17838,distance:452,rotate:4666,margin:4342,barWidth:6641,category:1318,barGap:4832,nodes:2085,pieces:2683,smoothMonotone:2203,itemSymbol:882,axisType:902,currentIndex:583,effectType:1364,areaColor:2808,showEffectOn:1285,rippleEffect:3617,minAngle:2527,barMaxWidth:3073,rotateLabel:523,dimension:1922,end:1426,inRange:4604,outOfRange:2262,checkpointStyle:1036,sampling:2458,regions:6273,large:1055,showLegendSymbol:1600,layoutSize:1981,mapValueCalculation:1447,categories:4362,indicator:2995,barBorderRadius:1455,range:2009,connectNulls:3411,pointer:2665,effect:5446,parallelAxisDefault:927,coords:750,shadowStyle:1670,largeThreshold:754,hoverLink:1276,repulsion:865,textGap:1121,breadcrumb:828,baseline:1316,endAngle:895,period:1153,brushType:1421,minOpacity:216,brushLink:913,brushMode:465,transformable:418,brushStyle:507,throttleType:448,throttleDelay:369,removeOnClick:648,inBrush:500,outOfBrush:466,offsetCenter:981,barMinHeight:2279,parallelIndex:235,nodeClick:732,source:869,color0:210,filterMode:2252,tiled:352,autoPlay:496,playInterval:440,sort:484,polyline:929,initLayout:966,controlPosition:408,children:89,contentToOption:590,maxOpacity:215,squareRatio:281,leafDepth:347,zoomToNodeRatio:300,childrenVisibleMin:303,shape:1054,length2:891,endValue:1107,gravity:634,edgeLength:662,layoutAnimation:485,colorAlpha:389,constantSpeed:451,trailLength:530,dim:313,areaSelectStyle:253,funnelAlign:334,buttonTextColor:177,buttonColor:205,levels:2267,textColor:178,lineX:46,lineY:32,showPlayBtn:64,showPrevBtn:43,showNextBtn:43,playIcon:90,stopIcon:48,prevIcon:39,nextIcon:36,ellipsis:76,clear:114,colorMappingBy:424,maxSize:131,minSize:147,gap:175,visibleMin:315,axisExpandable:134,layoutIterations:226,nodeGap:158,nodeWidth:134,axisExpandCenter:79,axisExpandCount:56,axisExpandWidth:51,boxWidth:46,gapWidth:78,borderColorSaturation:56,inactiveOpacity:51,keep:41,colorSaturation:343,visualDimension:471,id:138,borderColor0:67,emptyItemWidth:60,activeOpacity:43,radiusAxisIndex:574,angleAxisIndex:478,textPosition:232,minOpen:194,maxOpen:125,graphic:5617,elements:3108,image:673,group:488,$action:82,style:431,textVerticalAlign:13,fill:55,stroke:47,lineWidth:34,sector:93,"bezier-curve":6,cpx2:1,cpy2:1,circle:256,arc:61,bezierCurve:61,onclick:101,onmouseover:32,font:17,bounding:75,cursor:54,themeRiver:11,confine:580,ring:103,ondragleave:3,ondragstart:4,ondragover:4,disabled:221,visualMin:44,visualMax:18,onmousemove:14,ondrag:8,ondragend:2,x2:7,x1:4,y1:2,y2:3,percent:6,ondrop:9,cx:7,smoothConstraint:20,cpx1:2,points:16,onmousewheel:13,onmouseout:7,barBorderWidth:2,ondragenter:2,onmouseup:1,cy:1,r:2,onmousedown:1,animationThreshold:1},fullKeywordsList=["0","1","title","show","text","link","target","textStyle","color","fontStyle","fontWeight","fontFamily","fontSize","textAlign","textBaseline","subtext","sublink","subtarget","subtextStyle","padding","itemGap","zlevel","z","left","top","right","bottom","backgroundColor","borderColor","borderWidth","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","legend","width","height","orient","align","itemWidth","itemHeight","formatter","selectedMode","inactiveColor","selected","tooltip","data","name","icon","grid","containLabel","trigger","axisPointer","type","axis","snap","label","precision","margin","lineStyle","opacity","shadowStyle","crossStyle","position","extraCssText","xAxis","gridIndex","offset","nameLocation","nameTextStyle","nameGap","nameRotate","inverse","boundaryGap","min","max","scale","splitNumber","minInterval","interval","logBase","silent","triggerEvent","axisLine","onZero","axisTick","alignWithLabel","inside","length","axisLabel","rotate","showMinLabel","showMaxLabel","baseline","splitLine","splitArea","areaStyle","value","tiggerTooltip","status","handle","size","throttle","yAxis","polar","center","radius","radiusAxis","polarIndex","angleAxis","startAngle","clockwise","radar","shape","indicator","dataZoom","disabled","xAxisIndex","yAxisIndex","radiusAxisIndex","angleAxisIndex","filterMode","start","end","startValue","endValue","minSpan","maxSpan","minValueSpan","maxValueSpan","zoomLock","dataBackground","fillerColor","handleIcon","handleSize","handleStyle","borderType","labelPrecision","labelFormatter","showDetail","showDataShadow","realtime","visualMap","range","calculable","textGap","dimension","seriesIndex","hoverLink","inRange","outOfRange","controller","pieces","categories","minOpen","maxOpen","showLabel","itemSymbol","showContent","alwaysShowContent","triggerOn","showDelay","hideDelay","enterable","confine","transitionDuration","toolbox","itemSize","showTitle","feature","saveAsImage","excludeComponents","iconStyle","normal","textPosition","emphasis","pixelRatio","restore","dataView","readOnly","optionToContent","contentToOption","lang","textareaColor","textareaBorderColor","textColor","buttonColor","buttonTextColor","zoom","back","magicType","line","bar","stack","tiled","option","brush","rect","polygon","lineX","lineY","keep","clear","brushLink","geoIndex","brushType","brushMode","transformable","brushStyle","throttleType","throttleDelay","removeOnClick","inBrush","outOfBrush","geo","map","roam","aspectScale","boundingCoords","scaleLimit","nameMap","itemStyle","layoutCenter","layoutSize","regions","areaColor","parallel","layout","axisExpandable","axisExpandCenter","axisExpandCount","axisExpandWidth","axisExpandTriggerOn","parallelAxisDefault","parallelAxis","dim","parallelIndex","areaSelectStyle","singleAxis","timeline","axisType","currentIndex","autoPlay","rewind","loop","playInterval","controlPosition","symbol","symbolSize","symbolRotate","symbolOffset","checkpointStyle","animation","animationDuration","animationEasing","controlStyle","showPlayBtn","showPrevBtn","showNextBtn","playIcon","stopIcon","prevIcon","nextIcon","graphic","elements","id","$action","bounding","invisible","cursor","draggable","progressive","children","onclick","onmouseover","onmouseout","onmousemove","onmousewheel","onmousedown","onmouseup","ondrag","ondragstart","ondragend","ondragenter","ondragleave","ondragover","ondrop","style","image","x","y","fill","stroke","lineWidth","font","textVerticalAlign","cx","cy","r","r0","endAngle","points","smooth","smoothConstraint","x1","y1","x2","y2","percent","cpx1","cpy1","cpx2","cpy2","calendar","cellSize","dayLabel","firstDay","monthLabel","yearLabel","series","coordinateSystem","showSymbol","showAllSymbol","hoverAnimation","legendHoverLink","connectNulls","clipOverflow","step","smoothMonotone","sampling","markPoint","valueIndex","valueDim","coord","animationThreshold","animationDelay","animationDurationUpdate","animationEasingUpdate","animationDelayUpdate","markLine","curveness","markArea","barBorderRadius","barWidth","barMaxWidth","barMinHeight","barGap","barCategoryGap","selectedOffset","minAngle","roseType","avoidLabelOverlap","stillShowZeroSum","labelLine","length2","animationType","large","largeThreshold","effectType","showEffectOn","rippleEffect","period","radarIndex","squareRatio","leafDepth","nodeClick","zoomToNodeRatio","levels","visualDimension","visualMin","visualMax","colorAlpha","colorSaturation","colorMappingBy","visibleMin","childrenVisibleMin","ellipsis","gapWidth","borderColorSaturation","breadcrumb","emptyItemWidth","boxWidth","barMinWidth","color0","borderColor0","blurSize","minOpacity","maxOpacity","mapValueCalculation","showLegendSymbol","inactiveOpacity","activeOpacity","polyline","effect","delay","constantSpeed","trailLength","coords","circular","rotateLabel","force","initLayout","repulsion","gravity","edgeLength","layoutAnimation","nodeScaleRatio","focusNodeAdjacency","edgeSymbol","edgeSymbolSize","edgeLabel","category","nodes","links","source","edges","nodeWidth","nodeGap","layoutIterations","minSize","maxSize","sort","gap","funnelAlign","distance","pointer","offsetCenter","detail","symbolPosition","symbolRepeat","symbolRepeatDirection","symbolMargin","symbolClip","symbolBoundingData","symbolPatternSize","singleAxisIndex","date","progressiveThreshold","blendMode","hoverLayerThreshold","useUTC"],i=0;i<fullKeywordsList.length;i++)null==keywords[fullKeywordsList[i]]&&(keywords[fullKeywordsList[i]]=0);var completions=[];for(var key in keywords)completions.push({caption:key,value:key,score:keywords[key],metal:"local"});lnTools.addCompleter({getCompletions:function(e,t,o,n,a){a(null,completions)}}),_.each((location.search||"").substr(1).split("&"),function(e){var t=e.split("=");configs[t[0]]=t[1]});var gb={handler:{isDown:!1},lastTyping:0,editor:null,chart:null,loadedCode:null,echartsSource:{},lastOption:null,updateTime:0,debounceTime:500,enableLive:!configs.gl&&!configs.nolive},COLORS={"default":["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],light:["#37A2DA","#32C5E9","#67E0E3","#9FE6B8","#FFDB5C","#ff9f7f","#fb7293","#E062AE","#E690D1","#e7bcf3","#9d96f5","#8378EA","#96BFFF"],dark:["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"]};$("#theme ."+(configs.theme||"default")).addClass("selected"),$("#theme a").click(function(){if(!$(this).hasClass("selected")){var e=$(this).attr("class").replace("default","").trim();window.location.href="./editor.html?"+makeSearch({c:configs.c,gl:configs.gl||null,theme:e||null})}}),$("#theme a").popover({html:!0,content:function(){var e=$(this).attr("class").replace("selected","").trim();return'<div class="theme-palette '+e+'">'+COLORS[e].map(function(e){return'<span style="background-color:'+e+'"></span>'}).join("")+"</div>"},placement:"top",trigger:"hover"}),$(document).ready(function(){initEditor(),checkEditorIfToShow(),initEcharts(),initControl(),initEventHandler(),load()});var appEnv={},gui,_intervalIdList=[],_timeoutIdList=[],_oldSetTimeout=window.setTimeout,_oldSetInterval=window.setInterval;window.setTimeout=function(e,t){var o=_oldSetTimeout(e,t);return _timeoutIdList.push(o),o},window.setInterval=function(e,t){var o=_oldSetInterval(e,t);return _intervalIdList.push(o),o};var _events=[],run=function(ignoreOptionNotChange){if(gb.chart||(gb.chart=echarts.init($("#chart-panel")[0],configs.theme,{renderer:configs.renderer||"canvas"}),_wrapOnMethods(gb.chart)),hasEditorError())return void log(lang.errorInEditor,"error");localSave(),_clearTimeTickers(),_clearChartEvents(),appEnv.config=null;try{var myChart=gb.chart,app=appEnv;if(option=null,eval(gb.editor.getValue()),option&&"object"==typeof option&&(!_.isEqual(option,gb.lastOption)||ignoreOptionNotChange)){gb.lastOption=option;var startTime=+new Date;gb.chart.setOption(option,!0);var endTime=+new Date;gb.updateTime=endTime-startTime;for(var debounceTime=500,debounceTimeQuantities=[500,2e3,5e3,1e4],i=debounceTimeQuantities.length-1;i>=0;i--){var quantity=debounceTimeQuantities[i],preferredDebounceTime=debounceTimeQuantities[i+1]||1e6;if(gb.updateTime>quantity&&gb.debounceTime!==preferredDebounceTime){gb.debounceTime=preferredDebounceTime,runDebounce=_.debounce(run,preferredDebounceTime,{trailing:!0});break}}log(lang.chartOK+gb.updateTime+"ms")}if(gui&&($(gui.domElement).remove(),gui.destroy(),gui=null),app.config){gui=new dat.GUI({autoPlace:!1}),$(gui.domElement).css({position:"absolute",right:5,top:0,zIndex:1e3}),$(".right-container").append(gui.domElement);var configParameters=app.configParameters||{};for(var name in app.config){var value=app.config[name];if("onChange"!==name&&"onFinishChange"!==name){var isColor=!1,controller;if(configParameters[name]&&(configParameters[name].options?controller=gui.add(app.config,name,configParameters[name].options):null!=configParameters[name].min&&(controller=gui.add(app.config,name,configParameters[name].min,configParameters[name].max))),"string"==typeof obj)try{var colorArr=echarts.color.parse(value);isColor=!!colorArr,isColor&&(value=echarts.color.stringify(colorArr,"rgba"))}catch(e){}controller||(controller=gui[isColor?"addColor":"add"](app.config,name)),app.config.onChange&&controller.onChange(app.config.onChange),app.config.onFinishChange&&controller.onFinishChange(app.config.onFinishChange)}}}}catch(e){log(lang.errorInEditor,"error"),console.error(e)}},runDebounce=_.debounce(run,gb.debounceTime,{trailing:!0});$("#download").click(downloadExample);
\ No newline at end of file
+function makeSearch(e){var t=[];for(var o in e)null!=e[o]&&t.push(o+"="+e[o]);return t.join("&")}function initEditor(){gb.editor=ace.edit("code-panel"),gb.editor.getSession().setMode("ace/mode/javascript"),gb.editor.setOptions({enableBasicAutocompletion:!0,enableSnippets:!0,enableLiveAutocompletion:!0})}function initEcharts(){gb.editor.setValue("var option = {\n \n};\n"),gb.editor.selection.setSelectionRange({start:{row:1,column:4},end:{row:1,column:4}})}function initControl(){$("#theme-dropdown").on("click","li a",function(){setThemeButton($(this).text())}),$("#echarts-version-dropdown").on("click","li a",function(){setEchartsVersionButton($(this).text())})}function setThemeButton(e){$("#theme-btn").html("ECharts-"+e+' <span class="caret"></span>'),$("#theme-btn").val(e),disposeAndRun()}function setEchartsVersionButton(e){$("#echarts-version-btn").html("ECharts-"+e+' <span class="caret"></span>'),$("#echarts-version-btn").val(e),updateEchartsVersion()}function initEventHandler(){gb.enableLive&&gb.editor.on("change",function(){runDebounce()}),$("#h-handler").mousedown(function(){gb.handler.isDown=!0}),$(window).mousemove(function(e){if(gb.handler.isDown){var t=e.clientX/window.innerWidth;setSplitPosition(t)}}).mouseup(function(){gb.handler.isDown=!1}),$(window).resize(function(){gb.chart.resize(),appEnv.onresize&&appEnv.onresize(),checkEditorIfToShow()})}function setSplitPosition(e){e=Math.min(.9,Math.max(.1,e));var t=100*e;$("#code-container").css("width",t+"%"),$(".right-container").css("width",100-t+"%").css("left",t+"%"),$("#h-handler").css("left",t+"%"),gb.chart&&(gb.chart.resize(),appEnv.onresize&&appEnv.onresize())}function checkEditorIfToShow(){window.innerWidth<768?(void 0===gb.editorIsShown||gb.editorIsShown===!0)&&($("#code-container").hide(),$("#h-handler").hide(),$(".right-container").css("width","100%").css("left","0%"),gb.editorIsShown=!1):(void 0===gb.editorIsShown||gb.editorIsShown===!1)&&($("#code-container").show(),$("#h-handler").show(),setSplitPosition(.4),gb.editorIsShown=!0)}function _clearTimeTickers(){for(var e=0;e<_intervalIdList.length;e++)clearInterval(_intervalIdList[e]);for(var e=0;e<_timeoutIdList.length;e++)clearTimeout(_timeoutIdList[e]);_intervalIdList=[],_timeoutIdList=[]}function _wrapOnMethods(e){var t=e.on;e.on=function(o){var n=t.apply(e,arguments);return _events.push(o),n}}function _clearChartEvents(){_events.forEach(function(e){gb.chart&&gb.chart.off(e)}),_events.length=0}function disposeAndRun(){gb.chart&&gb.chart.dispose();$("#theme-btn").val()||"default";gb.chart=null,run(!0)}function updateEchartsVersion(){var version=$("#echarts-version-btn").val();if(!echarts||version!==echarts.version||gb.echartsSource[version])try{eval(gb.echartsSource[version]),disposeAndRun()}catch(e){log("加载 ECharts 版本失败！","error")}}function localSave(){var e=gb.editor.getValue();if(window.localStorage&&e!==gb.loadedCode)try{window.localStorage.setItem("code",e),$("#reset-btn").css("display","inline-block")}catch(t){console.error(t),log("缓存到本地失败，刷新页面后图表将不被保存，请及时保存")}}function localLoad(){try{var e=window.localStorage.getItem("code");e&&(gb.editor.setValue(e,-1),gb.enableLive||runDebounce(),log("读取本地缓存成功"))}catch(t){console.error(t)}}function localReset(){gb.loadedCode&&(gb.editor.setValue(gb.loadedCode),gb.enableLive||runDebounce(),localSave(),$("#reset-btn").hide(),run())}function hasEditorError(){for(var e=gb.editor.getSession().getAnnotations(),t=0,o=e.length;o>t;++t)if("error"===e[t].type)return!0;return!1}function load(){function e(){configs.c&&(console.log(configs.c),$.ajax("../"+t+"/"+configs.c+".js",{dataType:"text",success:function(e){gb.loadedCode=e,gb.editor.setValue(e,-1),gb.enableLive||runDebounce()}}).fail(function(){log("加载图表失败！","error")}))}var t=configs.gl?"data-gl":"data";if(configs.gl){var o=document.createElement("script");o.onload=function(){e()},o.src="../vendors/echarts-gl/echarts-gl.js",document.body.appendChild(o)}else e()}function log(e,t){var o=formatTime(new Date);"warn"!==t&&"error"!==t&&(t="info"),$("#code-info").html('<span class="code-info-time">'+o+'</span><span class="code-info-type-'+t+'">'+e+"</span>")}function formatTime(e){for(var t=[e.getHours(),e.getMinutes(),e.getSeconds()],o="",n=0,a=t.length;a>n;++n)o+=(t[n]<10?"0":"")+t[n],a-1>n&&(o+=":");return o}function getVersion(){var e=window.location.href.split("/");return 4===e.length?1:parseInt(e[e.length-1],10)||1}function getCid(){return window.location.href.split("/")[3]}function downloadExample(){var e='<!DOCTYPE html>\n<html style="height: 100%">\n <head>\n <meta charset="utf-8">\n </head>\n <body style="height: 100%; margin: 0">\n <div id="container" style="height: 100%"></div>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>\n <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>\n <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>\n <script type="text/javascript">\nvar dom = document.getElementById("container");\nvar myChart = echarts.init(dom);\nvar app = {};\noption = null;\n'+gb.editor.getValue()+';\nif (option && typeof option === "object") {\n myChart.setOption(option, true);\n}\n </script>\n </body>\n</html>',t=new Blob([e],{type:"text/html;charset=UTF-8",encoding:"UTF-8"}),o=document.createElement("a");o.href=URL.createObjectURL(t),o.download=configs.c+".html",o.click()}for(var lang={zh:{errorInEditor:"编辑器内容有误！",chartOK:"图表已生成, "},en:{errorInEditor:"Errors exist in code!",chartOK:"Chart has been generated successfully, "}}[window.EC_DEMO_LANG],configs={},lnTools=ace.require("ace/ext/language_tools"),keywords={grid:108210,series:1161721,pie:173151,legend:278319,right:12224,tooltip:188049,xAxis:374619,bar:182040,label:163527,emphasis:5e4,formatter:62138,line:306801,data:232156,left:24464,top:18094,scatter:48954,type:92134,yAxis:238764,axisLabel:73604,legendHoverLink:14243,textStyle:129159,hoverAnimation:9062,dataZoom:90999,nameLocation:15800,nameTextStyle:30596,nameGap:14640,singleAxis:15977,splitLine:30047,nameRotate:10483,inverse:12997,boundaryGap:18533,clockwise:4411,lineStyle:81857,selectedOffset:2984,width:17962,slider:28321,dataBackground:2287,areaStyle:19428,color:94439,height:7954,orient:17218,align:10373,symbol:35613,xAxisIndex:15405,stack:10602,clipOverflow:3229,center:9827,padding:12855,itemStyle:143518,itemGap:11914,shadowBlur:17233,shadowColor:13929,normal:211293,borderColor:20648,shadowOffsetX:11499,shadowOffsetY:9210,opacity:12301,heatmap:13825,value:21111,fillerColor:797,borderWidth:15576,itemWidth:7123,effectScatter:31179,coordinateSystem:15302,axisLine:53628,axisTick:38765,selectedMode:15177,fontSize:14906,inactiveColor:5720,selected:10921,gauge:55176,markLine:65539,handleStyle:1852,borderType:5717,title:158568,show:82e3,length:4814,zlevel:22293,labelPrecision:746,position:48349,labelFormatter:727,alignWithLabel:3785,interval:28810,showDetail:694,yAxisIndex:10560,showDataShadow:591,realtime:2611,onZero:3690,silent:22883,radar:61070,axisPointer:23175,trigger:15344,barCategoryGap:3511,splitNumber:19992,inside:32482,name:61072,showSymbol:4778,containLabel:6413,offset:15619,max:12538,backgroundColor:32864,visualMap:95262,fontStyle:14443,fontWeight:11970,fontFamily:10141,symbolSize:21077,blurSize:360,geo:65283,radius:8533,markArea:19906,map:102385,brush:29508,parallel:20673,parallelAxis:13713,gridIndex:20650,piecewise:25231,showContent:6960,zoom:3997,polar:23175,controller:2892,radiusAxis:24146,angleAxis:18771,toolbox:101543,timeline:34619,precision:3306,curveness:1378,x:2753,valueIndex:2807,itemHeight:5180,icon:10336,valueDim:2013,symbolOffset:10017,y:1590,transitionDuration:3814,radarIndex:715,extraCssText:3640,animation:17864,"animationThreshold = 2000":11727,minInterval:11278,animationDelay:7620,layoutCenter:2348,animationDurationUpdate:6972,animationEasingUpdate:6816,animationDelayUpdate:6642,symbolRotate:10221,feature:50238,axis:1794,crossStyle:1830,funnel:11042,scaleLimit:4792,roam:7112,itemSize:1966,showTitle:1851,smooth:5185,saveAsImage:9915,showAllSymbol:3417,polarIndex:5235,graph:76898,layout:2633,excludeComponents:447,restore:3693,dataView:10258,magicType:10505,iconStyle:9088,nodeScaleRatio:892,hoverLayerThreshold:6480,textAlign:9402,splitArea:16447,nameMap:4584,text:11691,pixelRatio:357,readOnly:491,optionToContent:936,lang:549,textareaColor:233,textareaBorderColor:177,option:2003,seriesIndex:4483,back:199,rect:323,polygon:254,min:16646,scale:14303,logBase:7456,start:2889,z:15867,link:5348,textBaseline:4210,subtext:5086,sublink:2618,subtarget:2373,subtextStyle:7732,triggerEvent:9175,blendMode:6359,progressiveThreshold:4699,continuous:42105,lines:31608,markPoint:81254,roseType:4221,animationEasing:8836,animationDuration:9562,calculable:3953,progressive:5761,treemap:16948,links:9573,edgeSymbol:1211,bottom:13969,edges:1122,edgeLabel:1685,edgeSymbolSize:769,focusNodeAdjacency:888,draggable:965,force:5601,geoIndex:2856,circular:1862,avoidLabelOverlap:3694,target:5476,coord:3995,startValue:2182,triggerOn:6741,showDelay:3535,alwaysShowContent:4928,enterable:3871,hideDelay:3018,step:3437,detail:5434,startAngle:5421,handleIcon:1051,handleSize:932,zoomLock:1979,throttle:1757,boxplot:6233,candlestick:14005,sankey:10101,loop:678,rewind:439,controlStyle:1269,labelLine:17838,distance:452,rotate:4666,margin:4342,barWidth:6641,category:1318,barGap:4832,nodes:2085,pieces:2683,smoothMonotone:2203,itemSymbol:882,axisType:902,currentIndex:583,effectType:1364,areaColor:2808,showEffectOn:1285,rippleEffect:3617,minAngle:2527,barMaxWidth:3073,rotateLabel:523,dimension:1922,end:1426,inRange:4604,outOfRange:2262,checkpointStyle:1036,sampling:2458,regions:6273,large:1055,showLegendSymbol:1600,layoutSize:1981,mapValueCalculation:1447,categories:4362,indicator:2995,barBorderRadius:1455,range:2009,connectNulls:3411,pointer:2665,effect:5446,parallelAxisDefault:927,coords:750,shadowStyle:1670,largeThreshold:754,hoverLink:1276,repulsion:865,textGap:1121,breadcrumb:828,baseline:1316,endAngle:895,period:1153,brushType:1421,minOpacity:216,brushLink:913,brushMode:465,transformable:418,brushStyle:507,throttleType:448,throttleDelay:369,removeOnClick:648,inBrush:500,outOfBrush:466,offsetCenter:981,barMinHeight:2279,parallelIndex:235,nodeClick:732,source:869,color0:210,filterMode:2252,tiled:352,autoPlay:496,playInterval:440,sort:484,polyline:929,initLayout:966,controlPosition:408,children:89,contentToOption:590,maxOpacity:215,squareRatio:281,leafDepth:347,zoomToNodeRatio:300,childrenVisibleMin:303,shape:1054,length2:891,endValue:1107,gravity:634,edgeLength:662,layoutAnimation:485,colorAlpha:389,constantSpeed:451,trailLength:530,dim:313,areaSelectStyle:253,funnelAlign:334,buttonTextColor:177,buttonColor:205,levels:2267,textColor:178,lineX:46,lineY:32,showPlayBtn:64,showPrevBtn:43,showNextBtn:43,playIcon:90,stopIcon:48,prevIcon:39,nextIcon:36,ellipsis:76,clear:114,colorMappingBy:424,maxSize:131,minSize:147,gap:175,visibleMin:315,axisExpandable:134,layoutIterations:226,nodeGap:158,nodeWidth:134,axisExpandCenter:79,axisExpandCount:56,axisExpandWidth:51,boxWidth:46,gapWidth:78,borderColorSaturation:56,inactiveOpacity:51,keep:41,colorSaturation:343,visualDimension:471,id:138,borderColor0:67,emptyItemWidth:60,activeOpacity:43,radiusAxisIndex:574,angleAxisIndex:478,textPosition:232,minOpen:194,maxOpen:125,graphic:5617,elements:3108,image:673,group:488,$action:82,style:431,textVerticalAlign:13,fill:55,stroke:47,lineWidth:34,sector:93,"bezier-curve":6,cpx2:1,cpy2:1,circle:256,arc:61,bezierCurve:61,onclick:101,onmouseover:32,font:17,bounding:75,cursor:54,themeRiver:11,confine:580,ring:103,ondragleave:3,ondragstart:4,ondragover:4,disabled:221,visualMin:44,visualMax:18,onmousemove:14,ondrag:8,ondragend:2,x2:7,x1:4,y1:2,y2:3,percent:6,ondrop:9,cx:7,smoothConstraint:20,cpx1:2,points:16,onmousewheel:13,onmouseout:7,barBorderWidth:2,ondragenter:2,onmouseup:1,cy:1,r:2,onmousedown:1,animationThreshold:1},fullKeywordsList=["0","1","title","show","text","link","target","textStyle","color","fontStyle","fontWeight","fontFamily","fontSize","textAlign","textBaseline","subtext","sublink","subtarget","subtextStyle","padding","itemGap","zlevel","z","left","top","right","bottom","backgroundColor","borderColor","borderWidth","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","legend","width","height","orient","align","itemWidth","itemHeight","formatter","selectedMode","inactiveColor","selected","tooltip","data","name","icon","grid","containLabel","trigger","axisPointer","type","axis","snap","label","precision","margin","lineStyle","opacity","shadowStyle","crossStyle","position","extraCssText","xAxis","gridIndex","offset","nameLocation","nameTextStyle","nameGap","nameRotate","inverse","boundaryGap","min","max","scale","splitNumber","minInterval","interval","logBase","silent","triggerEvent","axisLine","onZero","axisTick","alignWithLabel","inside","length","axisLabel","rotate","showMinLabel","showMaxLabel","baseline","splitLine","splitArea","areaStyle","value","tiggerTooltip","status","handle","size","throttle","yAxis","polar","center","radius","radiusAxis","polarIndex","angleAxis","startAngle","clockwise","radar","shape","indicator","dataZoom","disabled","xAxisIndex","yAxisIndex","radiusAxisIndex","angleAxisIndex","filterMode","start","end","startValue","endValue","minSpan","maxSpan","minValueSpan","maxValueSpan","zoomLock","dataBackground","fillerColor","handleIcon","handleSize","handleStyle","borderType","labelPrecision","labelFormatter","showDetail","showDataShadow","realtime","visualMap","range","calculable","textGap","dimension","seriesIndex","hoverLink","inRange","outOfRange","controller","pieces","categories","minOpen","maxOpen","showLabel","itemSymbol","showContent","alwaysShowContent","triggerOn","showDelay","hideDelay","enterable","confine","transitionDuration","toolbox","itemSize","showTitle","feature","saveAsImage","excludeComponents","iconStyle","normal","textPosition","emphasis","pixelRatio","restore","dataView","readOnly","optionToContent","contentToOption","lang","textareaColor","textareaBorderColor","textColor","buttonColor","buttonTextColor","zoom","back","magicType","line","bar","stack","tiled","option","brush","rect","polygon","lineX","lineY","keep","clear","brushLink","geoIndex","brushType","brushMode","transformable","brushStyle","throttleType","throttleDelay","removeOnClick","inBrush","outOfBrush","geo","map","roam","aspectScale","boundingCoords","scaleLimit","nameMap","itemStyle","layoutCenter","layoutSize","regions","areaColor","parallel","layout","axisExpandable","axisExpandCenter","axisExpandCount","axisExpandWidth","axisExpandTriggerOn","parallelAxisDefault","parallelAxis","dim","parallelIndex","areaSelectStyle","singleAxis","timeline","axisType","currentIndex","autoPlay","rewind","loop","playInterval","controlPosition","symbol","symbolSize","symbolRotate","symbolOffset","checkpointStyle","animation","animationDuration","animationEasing","controlStyle","showPlayBtn","showPrevBtn","showNextBtn","playIcon","stopIcon","prevIcon","nextIcon","graphic","elements","id","$action","bounding","invisible","cursor","draggable","progressive","children","onclick","onmouseover","onmouseout","onmousemove","onmousewheel","onmousedown","onmouseup","ondrag","ondragstart","ondragend","ondragenter","ondragleave","ondragover","ondrop","style","image","x","y","fill","stroke","lineWidth","font","textVerticalAlign","cx","cy","r","r0","endAngle","points","smooth","smoothConstraint","x1","y1","x2","y2","percent","cpx1","cpy1","cpx2","cpy2","calendar","cellSize","dayLabel","firstDay","monthLabel","yearLabel","series","coordinateSystem","showSymbol","showAllSymbol","hoverAnimation","legendHoverLink","connectNulls","clipOverflow","step","smoothMonotone","sampling","markPoint","valueIndex","valueDim","coord","animationThreshold","animationDelay","animationDurationUpdate","animationEasingUpdate","animationDelayUpdate","markLine","curveness","markArea","barBorderRadius","barWidth","barMaxWidth","barMinHeight","barGap","barCategoryGap","selectedOffset","minAngle","roseType","avoidLabelOverlap","stillShowZeroSum","labelLine","length2","animationType","large","largeThreshold","effectType","showEffectOn","rippleEffect","period","radarIndex","squareRatio","leafDepth","nodeClick","zoomToNodeRatio","levels","visualDimension","visualMin","visualMax","colorAlpha","colorSaturation","colorMappingBy","visibleMin","childrenVisibleMin","ellipsis","gapWidth","borderColorSaturation","breadcrumb","emptyItemWidth","boxWidth","barMinWidth","color0","borderColor0","blurSize","minOpacity","maxOpacity","mapValueCalculation","showLegendSymbol","inactiveOpacity","activeOpacity","polyline","effect","delay","constantSpeed","trailLength","coords","circular","rotateLabel","force","initLayout","repulsion","gravity","edgeLength","layoutAnimation","nodeScaleRatio","focusNodeAdjacency","edgeSymbol","edgeSymbolSize","edgeLabel","category","nodes","links","source","edges","nodeWidth","nodeGap","layoutIterations","minSize","maxSize","sort","gap","funnelAlign","distance","pointer","offsetCenter","detail","symbolPosition","symbolRepeat","symbolRepeatDirection","symbolMargin","symbolClip","symbolBoundingData","symbolPatternSize","singleAxisIndex","date","progressiveThreshold","blendMode","hoverLayerThreshold","useUTC"],i=0;i<fullKeywordsList.length;i++)null==keywords[fullKeywordsList[i]]&&(keywords[fullKeywordsList[i]]=0);var completions=[];for(var key in keywords)completions.push({caption:key,value:key,score:keywords[key],metal:"local"});lnTools.addCompleter({getCompletions:function(e,t,o,n,a){a(null,completions)}}),_.each((location.search||"").substr(1).split("&"),function(e){var t=e.split("=");configs[t[0]]=t[1]});var gb={handler:{isDown:!1},lastTyping:0,editor:null,chart:null,loadedCode:null,echartsSource:{},lastOption:null,updateTime:0,debounceTime:500,enableLive:!configs.gl&&!configs.nolive},COLORS={"default":["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],light:["#37A2DA","#32C5E9","#67E0E3","#9FE6B8","#FFDB5C","#ff9f7f","#fb7293","#E062AE","#E690D1","#e7bcf3","#9d96f5","#8378EA","#96BFFF"],dark:["#dd6b66","#759aa0","#e69d87","#8dc1a9","#ea7e53","#eedd78","#73a373","#73b9bc","#7289ab","#91ca8c","#f49f42"]};$("#theme ."+(configs.theme||"default")).addClass("selected"),$("#theme a").click(function(){if(!$(this).hasClass("selected")){var e=$(this).attr("class").replace("default","").trim();window.location.href="./editor.html?"+makeSearch({c:configs.c,gl:configs.gl||null,theme:e||null})}}),$("#theme a").popover({html:!0,content:function(){var e=$(this).attr("class").replace("selected","").trim();return'<div class="theme-palette '+e+'">'+COLORS[e].map(function(e){return'<span style="background-color:'+e+'"></span>'}).join("")+"</div>"},placement:"top",trigger:"hover"}),$(document).ready(function(){initEditor(),checkEditorIfToShow(),initEcharts(),initControl(),initEventHandler(),load()});var appEnv={},gui,_intervalIdList=[],_timeoutIdList=[],_oldSetTimeout=window.setTimeout,_oldSetInterval=window.setInterval;window.setTimeout=function(e,t){var o=_oldSetTimeout(e,t);return _timeoutIdList.push(o),o},window.setInterval=function(e,t){var o=_oldSetInterval(e,t);return _intervalIdList.push(o),o};var _events=[],run=function(ignoreOptionNotChange){if(gb.chart||(gb.chart=echarts.init($("#chart-panel")[0],configs.theme,{renderer:configs.renderer||"canvas"}),_wrapOnMethods(gb.chart)),hasEditorError())return void log(lang.errorInEditor,"error");localSave(),_clearTimeTickers(),_clearChartEvents(),appEnv.config=null;try{var myChart=gb.chart,app=appEnv;if(option=null,eval(gb.editor.getValue()),option&&"object"==typeof option&&(!_.isEqual(option,gb.lastOption)||ignoreOptionNotChange)){gb.lastOption=option;var startTime=+new Date;gb.chart.setOption(option,!0);var endTime=+new Date;gb.updateTime=endTime-startTime;for(var debounceTime=500,debounceTimeQuantities=[500,2e3,5e3,1e4],i=debounceTimeQuantities.length-1;i>=0;i--){var quantity=debounceTimeQuantities[i],preferredDebounceTime=debounceTimeQuantities[i+1]||1e6;if(gb.updateTime>quantity&&gb.debounceTime!==preferredDebounceTime){gb.debounceTime=preferredDebounceTime,runDebounce=_.debounce(run,preferredDebounceTime,{trailing:!0});break}}log(lang.chartOK+gb.updateTime+"ms")}if(gui&&($(gui.domElement).remove(),gui.destroy(),gui=null),app.config){gui=new dat.GUI({autoPlace:!1}),$(gui.domElement).css({position:"absolute",right:5,top:0,zIndex:1e3}),$(".right-container").append(gui.domElement);var configParameters=app.configParameters||{};for(var name in app.config){var value=app.config[name];if("onChange"!==name&&"onFinishChange"!==name){var isColor=!1,controller;if(configParameters[name]&&(configParameters[name].options?controller=gui.add(app.config,name,configParameters[name].options):null!=configParameters[name].min&&(controller=gui.add(app.config,name,configParameters[name].min,configParameters[name].max))),"string"==typeof obj)try{var colorArr=echarts.color.parse(value);isColor=!!colorArr,isColor&&(value=echarts.color.stringify(colorArr,"rgba"))}catch(e){}controller||(controller=gui[isColor?"addColor":"add"](app.config,name)),app.config.onChange&&controller.onChange(app.config.onChange),app.config.onFinishChange&&controller.onFinishChange(app.config.onFinishChange)}}}}catch(e){log(lang.errorInEditor,"error"),console.error(e)}},runDebounce=_.debounce(run,gb.debounceTime,{trailing:!0});$("#download").click(downloadExample);
\ No newline at end of file
diff --git a/examples/zh/editor.html b/examples/zh/editor.html
index 6aab036..1819c45 100644
--- a/examples/zh/editor.html
+++ b/examples/zh/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571170547318"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571425236994"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="http://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
var menu = document.getElementById(selector);
if (menu) {
@@ -26,7 +26,7 @@
}
window.ROOT_PATH = 'https://echarts.apache.org/examples/';
-</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ace.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1571170547318"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571170547318"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ace.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/ace/src/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1571425236994"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571425236994"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/examples/zh/index.html b/examples/zh/index.html
index 22f2269..1ff76d4 100644
--- a/examples/zh/index.html
+++ b/examples/zh/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571170547318"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571425236994"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="http://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
var menu = document.getElementById(selector);
if (menu) {
@@ -22,7 +22,7 @@
}
window.ROOT_PATH = 'https://echarts.apache.org/examples/';
-</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/waypoint.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data-gl.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list.js?_v_=1571170547318"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/waypoint.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list-data-gl.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/chart-list.js?_v_=1571425236994"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/examples/zh/view.html b/examples/zh/view.html
index 250814c..9438e8e 100644
--- a/examples/zh/view.html
+++ b/examples/zh/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571170547318"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/vendors/bootstrap/css/bootstrap.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1571425236994"><title>Examples - Apache ECharts (incubating)</title><script type="text/javascript">window.EC_DEMO_LANG = 'zh';
</script></head><body><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网以获取最新版的网站信息。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="view-main"><div class="control-panel"></div><div id="view-chart" class="chart"></div></div><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/jquery/jquery.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/bootstrap/js/bootstrap.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/lodash.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js"></script><script type="text/javascript">function changeLang(lang) {
if (lang === 'en') {
if (location.hostname !== 'echarts.apache.org') {
@@ -17,7 +17,7 @@
}
window.ROOT_PATH = 'https://echarts.apache.org/examples/';
-</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571170547318"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571170547318"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/view.js?_v_=1571170547318"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/dat.gui.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/china.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/map/js/world.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/dataTool.js?_v_=1571425236994"></script><script id="echarts-js" type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20190126"></script><script id="echarts-js" type="text/javascript" src="https://echarts.apache.org/examples/vendors/echarts/extension/bmap.js?_v_=1571425236994"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/view.js?_v_=1571425236994"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/zh/404.html b/zh/404.html
index 94934aa..b5e2c5a 100644
--- a/zh/404.html
+++ b/zh/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/api.html b/zh/api.html
index 0300eb9..11ad44d 100644
--- a/zh/api.html
+++ b/zh/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'api',
initHash: 'echarts',
@@ -28,7 +28,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -55,7 +55,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/zh/builder.html b/zh/builder.html
index e0ec036..433f57d 100644
--- a/zh/builder.html
+++ b/zh/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/builder3.html b/zh/builder3.html
index 2baab79..395d307 100644
--- a/zh/builder3.html
+++ b/zh/builder3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/changelog.html b/zh/changelog.html
index 3c6edb4..d2322ae 100644
--- a/zh/changelog.html
+++ b/zh/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/cheat-sheet.html b/zh/cheat-sheet.html
index 75570c1..fd5fc37 100644
--- a/zh/cheat-sheet.html
+++ b/zh/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/coding-standard.html b/zh/coding-standard.html
index 29d2cc8..be8f60d 100644
--- a/zh/coding-standard.html
+++ b/zh/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/committers.html b/zh/committers.html
index 2cf38fe..26d91ac 100644
--- a/zh/committers.html
+++ b/zh/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/demo.html b/zh/demo.html
index 8d2c7fb..f4f98a2 100644
--- a/zh/demo.html
+++ b/zh/demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/dependencies.html b/zh/dependencies.html
index 16f98ba..064d002 100644
--- a/zh/dependencies.html
+++ b/zh/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/documents/en/api.json b/zh/documents/en/api.json
index ef9e190..18f955d 100644
--- a/zh/documents/en/api.json
+++ b/zh/documents/en/api.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number\n renderer?: string\n width?: number|string\n height? number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p> Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p> ECharts 3 supports using <code>canvas</code> element as container directly, thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code>theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p> Supports <code>'canvas'</code> or <code>'svg'</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code>group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p> Map name, referring to <code>map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p> Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p> <strong>For example <a href=\"https://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('USA', usaJson, {\n // Move Alaska to the bottom left of United States\n Alaska: {\n // Upper left longitude\n left: -131,\n // Upper left latitude\n top: 25,\n // Range of longitude\n width: 15\n },\n // Hawaii\n Hawaii: {\n left: -110,\n top: 28,\n width: 5\n },\n // Puerto Rico\n 'Puerto Rico': {\n left: -76,\n top: 26,\n width: 2\n }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registed map in the following format:</p>\n<pre><code class=\"lang-js\">{\n // geoJson data of the map\n geoJson: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code>opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code>ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code>registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code>name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code>{type: name}</code>.</p>\n<p>For example:</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('myCustomShape', MyShape);\n\nvar option = {\n series: {\n type: 'custom',\n coordinateSystem: 'none',\n renderItem: function (params, api) {\n return {\n type: 'myCustomShape',\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: 'red'\n }\n };\n },\n data: [[10, 20, 30, 40]]\n }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code>'circle'</code>, <code>'sector'</code>, <code>'ring'</code>, <code>'polygon'</code>, <code>'polyline'</code>, <code>'rect'</code>, <code>'line'</code>, <code>'bezierCurve'</code>, <code>'arc'</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n x: number,\n y: number,\n width: number,\n height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code>undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n notMerge: ...,\n lazyUpdate: ...,\n silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p> Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p> Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p> Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by <code>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n title: [{...}],\n legend: [{...}],\n grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n visualMap: {\n inRange: {\n color: ...\n }\n }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p> Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code>resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'dataZoom',\n start: 20,\n end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n type: 'dataZoom',\n batch: [{\n // first dataZoom component\n start: 20,\n end: 30\n }, {\n // second dataZoom component\n dataZoomIndex: 1,\n start: 10,\n end: 20\n }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event names are all in lower-cases, for example, <code>'click'</code>, <code>'mousemove'</code>, <code>'legendselected'</code></p>\n<p> <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code>query</code></p>\n<p> Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p> If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\"> chart.on('click', 'series', function () {...});\n chart.on('click', 'series.line', function () {...});\n chart.on('click', 'dataZoom', function () {...});\n chart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p> If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\"> {\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n }\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n });\n chart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n });\n chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n });\n chart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n });\n chart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n })\n chart.on('click', {targetName: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method is called.\n });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p> Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p> Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code>handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted.\n value: Array|string\n // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n) => Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id 'bb':\nchart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);\n// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id 'g1'.\nchart.convertToPixel({gridId: 'g1'}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-js\">// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: 'k2'}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id 'k2'.\nchart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array|string\n // Conversion result\n) => Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array\n) => boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is 'z'.\nchart.containPixel({gridId: 'z'}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is 'a'.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p> Optional; type of loading animation; only <code>'default'</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">default: {\n text: 'loading',\n color: '#c23531',\n textColor: '#000',\n maskColor: 'rgba(255, 255, 255, 0.8)',\n zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n pixelRatio: 2,\n backgroundColor: '#fff'\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray,\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenario, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code>appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code>?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>'scroll'</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // index of series, which is optional when trigger of tooltip is axis\n seriesIndex?: number,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>Parameter <code>position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'selectDataRange',\n // select a value range between 20 and 40\n selected: [20, 40],\n // cancel selecting the second range\n selected: { 1: false },\n // cancel selecting `excellent` category\n selected: { 'excellent': false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area is a "coodinate system area", belonging\n // to a geo coordinate system with getIndex: 0.\n // We can also use xAxisIndex or yAxisIndex to indicate that\n // this area belongs to a catesian coodinate system.\n // If no coordinate system is specified, this area is a\n // "global area", which does not belong to any coordinate system.\n // If an area belongs to a coordinate system, this area moves\n // and scales alone with the coordinate system.\n geoIndex: 0,\n // xAxisIndex: 0,\n // yAxisIndex: 0,\n\n // Optional: 'polygon', 'rect', 'lineX', 'lineY'\n brushType: 'polygon',\n\n // Only for "global area", define the area with the pixel coordinates.\n range: [\n ...\n ],\n\n // Only for "coordinate system area", define the area with the\n // coordinates.\n coordRange: [\n // In this case, the area is in a geo coordinate system, so\n // this is [longitude, latitude].\n [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n ]\n },\n ... // Other areas.\n ]\n});\n</code></pre>\n<p>The content of <code>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is 'rect':\n <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is 'lineX' or 'lineY':\n <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is 'polygon':\n <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is "global area", we should use <code>range</code>.</li>\n<li>If the area is "coordinate system area" (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is "pixel", while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n key: 'brush',\n brushOption: {\n // See more info in the `brushType` of "brush component".\n // If set as `false`, the mouse is disabled to brush.\n brushType: string,\n // See more info in the `brushModel` of "brush component".\n // IF not set, use the `brushMode` of brush component.\n brushMode: string\n }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n console.log(params);\n});\n\nmyChart.on('legendselectchanged', function (params) {\n console.log(params);\n});\n\nchart.on('click', 'series.line', function (params) {\n console.log(params);\n});\n\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {\n console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code>percent</code>. Please refer to callback <code>params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code>legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in <code>data</code> of <code>series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalCursorTaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require('echarts')</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n devicePixelRatio?: number\n renderer?: string\n width?: number|string\n height? number|string\n}) => ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>dom</code></p>\n<p> Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p> ECharts 3 supports using <code>canvas</code> element as container directly, thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code>theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p> Supports <code>'canvas'</code> or <code>'svg'</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code>group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">// set group id of each instance respectively.\nchart1.group = 'group1';\nchart2.group = 'group1';\necharts.connect('group1');\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>mapName</code></p>\n<p> Map name, referring to <code>map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code>geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p> Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p> <strong>For example <a href=\"https://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('USA', usaJson, {\n // Move Alaska to the bottom left of United States\n Alaska: {\n // Upper left longitude\n left: -131,\n // Upper left latitude\n top: 25,\n // Range of longitude\n width: 15\n },\n // Hawaii\n Hawaii: {\n left: -110,\n top: 28,\n width: 5\n },\n // Puerto Rico\n 'Puerto Rico': {\n left: -76,\n top: 26,\n width: 2\n }\n});\n</code></pre>\n</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-js\">{\n // geoJson data of the map\n geoJson: Object,\n // special area, see registerMap() for more information\n specialAreas: Object\n}\n</code></pre>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-js\">(\n opts: Object\n) => zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code>opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-js\">(\n name: string,\n ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code>ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code>registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code>name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code>{type: name}</code>.</p>\n<p>For example:</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('myCustomShape', MyShape);\n\nvar option = {\n series: {\n type: 'custom',\n coordinateSystem: 'none',\n renderItem: function (params, api) {\n return {\n type: 'myCustomShape',\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: 'red'\n }\n };\n },\n data: [[10, 20, 30, 40]]\n }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-js\">(\n name: String\n) => zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code>'circle'</code>, <code>'sector'</code>, <code>'ring'</code>, <code>'polygon'</code>, <code>'polyline'</code>, <code>'rect'</code>, <code>'line'</code>, <code>'bezierCurve'</code>, <code>'arc'</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The points to be clipped, like [[23, 44], [12, 15], ...].\n points: Array.<Array.<number>>,\n // The rectangular that is used to clip points.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => Array.<Array.<number>> // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-js\">(\n // The rectangular to be clipped.\n targetRect: {\n x: number,\n y: number,\n width: number,\n height: number\n },\n // The rectangular that is used to clip the first rectangular.\n rect: {\n x: number,\n y: number,\n width: number,\n height: number\n }\n) => { // The result rectangular.\n x: number,\n y: number,\n width: number,\n height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code>undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n notMerge: ...,\n lazyUpdate: ...,\n silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</code></p>\n<p> Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p><code>notMerge</code></p>\n<p> Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p> Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() => Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it's single object or array of object when passed by <code>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\n title: [{...}],\n legend: [{...}],\n grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n visualMap: {\n inRange: {\n color: ...\n }\n }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n width?: number|string,\n height?: number|string,\n silent?: boolean\n}) => ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>opts</code></p>\n<p> Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p> Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p> Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>'auto'</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p> Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code>resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'dataZoom',\n start: 20,\n end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n type: 'dataZoom',\n batch: [{\n // first dataZoom component\n start: 20,\n end: 30\n }, {\n // second dataZoom component\n dataZoomIndex: 1,\n start: 10,\n end: 20\n }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n eventName: string,\n handler: Function,\n context?: Object\n)\n(\n eventName: string,\n query: string|Object,\n handler: Function,\n context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event names are all in lower-cases, for example, <code>'click'</code>, <code>'mousemove'</code>, <code>'legendselected'</code></p>\n<p> <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code>query</code></p>\n<p> Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p> If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\"> chart.on('click', 'series', function () {...});\n chart.on('click', 'series.line', function () {...});\n chart.on('click', 'dataZoom', function () {...});\n chart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p> If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\"> {\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n }\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n });\n chart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n });\n chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n });\n chart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n });\n chart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n });\n</code></pre>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n })\n chart.on('click', {targetName: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method is called.\n });\n</code></pre>\n</li>\n<li><p><code>handler</code></p>\n<p> Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p> Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>eventName</code></p>\n<p> Event name.</p>\n</li>\n<li><p><code>handler</code></p>\n<p> Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted.\n value: Array|string\n // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n) => Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel('geo', [128.3324, 89.5344]); // The parameter 'geo' means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id 'bb':\nchart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id 'y1'.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);\n// 使用 id 为 'g1' 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id 'g1'.\nchart.convertToPixel({gridId: 'g1'}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-js\">// In the xAxis with id 'x0', convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: 'x0'}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: 'k2'}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-js\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id 'k2'.\nchart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to indicate in which coordinate system conversion is performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array|string\n // Conversion result\n) => Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n // finder is used to specify coordinate systems or series on which the judgement performed.\n // Generally, index or id or name can be used to specify coordinate system.\n finder: {\n seriesIndex?: number,\n seriesId?: string,\n seriesName?: string,\n geoIndex?: number,\n geoId?: string,\n geoName?: string,\n xAxisIndex?: number,\n xAxisId?: string,\n xAxisName?: string,\n yAxisIndex?: number,\n yAxisId?: string,\n yAxisName?: string,\n gridIndex?: number,\n gridId?: string\n gridName?: string\n },\n // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n // is on the left-top of the main dom of echarts instance.\n value: Array\n) => boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel('geo', [23, 44]); // Parameter 'geo' means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is 'z'.\nchart.containPixel({gridId: 'z'}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is 'a'.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code>type</code></p>\n<p> Optional; type of loading animation; only <code>'default'</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p> Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">default: {\n text: 'loading',\n color: '#c23531',\n textColor: '#000',\n maskColor: 'rgba(255, 255, 255, 0.8)',\n zlevel: 0\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">var img = new Image();\nimg.src = myChart.getDataURL({\n pixelRatio: 2,\n backgroundColor: '#fff'\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Exporting format, can be either png, or jpeg\n type?: string,\n // Resolution ratio of exporting image, 1 by default.\n pixelRatio?: number,\n // Background color of exporting image, use backgroundColor in option by default.\n backgroundColor?: string,\n // Excluded components list. e.g. ['toolbox']\n excludeComponents?: Array.<string>\n}) => string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n // Specify which series the data will be appended to.\n seriesIndex?: string,\n // The data to be appended.\n data?: Array|TypedArray,\n}) => string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenario, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code>appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() => boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code>?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'highlight',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'downplay',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // options are index of data\n dataIndex?: number,\n // options are data name\n name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendUnSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendToggleSelect',\n // legend name\n name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>'scroll'</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'legendScroll',\n scrollDataIndex: number,\n legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n<!--============= tooltip ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // x coordinate on screen\n x: number,\n // y coordinate on screen\n y: number,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'showTip',\n // index of series, which is optional when trigger of tooltip is axis\n seriesIndex?: number,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string,\n // Position of tooltip. Only works in this action.\n // Use tooltip.position in option by default.\n position: Array.<number>|string|Function\n})\n</code></pre>\n<p>Parameter <code>position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'hideTip'\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'dataZoom',\n // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n dataZoomIndex: number,\n // percentage of starting position; 0 - 100\n start: number,\n // percentage of ending position; 0 - 100\n end: number,\n // data value at starting location\n startValue: number,\n // data value at ending location\n endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n // Activate or inactivate.\n dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'selectDataRange',\n // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n visualMapIndex: number,\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n type: 'selectDataRange',\n // select a value range between 20 and 40\n selected: [20, 40],\n // cancel selecting the second range\n selected: { 1: false },\n // cancel selecting `excellent` category\n selected: { 'excellent': false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelineChange',\n // index of time point\n currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'timelinePlayChange',\n // laying status; true for auto-play\n playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'restore'\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'pieToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapUnSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'mapToggleSelect',\n // optional; series index; could be an array of multiple series\n seriesIndex?: number|Array,\n // optional; series name; could be an array of multiple series\n seriesName?: string|Array,\n // data index; could assign by name attribute when not defined\n dataIndex?: number,\n // optional; data name; ignored when dataIndex is defined\n name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'focusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn',\n\n // Use dataIndex to location the node.\n dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n type: 'unfocusNodeAdjacency',\n\n // Use seriesId or seriesIndex or seriesName to location the series.\n seriesId: 'xxx',\n seriesIndex: 0,\n seriesName: 'nnn'\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [ // "areas" means select-boxes. Multi-boxes can be specified.\n // If "areas" is empty, all of the select-boxes will be deleted.\n { // The first area.\n\n // Indicate that this area is a "coodinate system area", belonging\n // to a geo coordinate system with getIndex: 0.\n // We can also use xAxisIndex or yAxisIndex to indicate that\n // this area belongs to a catesian coodinate system.\n // If no coordinate system is specified, this area is a\n // "global area", which does not belong to any coordinate system.\n // If an area belongs to a coordinate system, this area moves\n // and scales alone with the coordinate system.\n geoIndex: 0,\n // xAxisIndex: 0,\n // yAxisIndex: 0,\n\n // Optional: 'polygon', 'rect', 'lineX', 'lineY'\n brushType: 'polygon',\n\n // Only for "global area", define the area with the pixel coordinates.\n range: [\n ...\n ],\n\n // Only for "coordinate system area", define the area with the\n // coordinates.\n coordRange: [\n // In this case, the area is in a geo coordinate system, so\n // this is [longitude, latitude].\n [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n ]\n },\n ... // Other areas.\n ]\n});\n</code></pre>\n<p>The content of <code>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is 'rect':\n <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is 'lineX' or 'lineY':\n <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is 'polygon':\n <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is "global area", we should use <code>range</code>.</li>\n<li>If the area is "coordinate system area" (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is "pixel", while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n type: 'takeGlobalCursor',\n // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n key: 'brush',\n brushOption: {\n // See more info in the `brushType` of "brush component".\n // If set as `false`, the mouse is disabled to brush.\n brushType: string,\n // See more info in the `brushModel` of "brush component".\n // IF not set, use the `brushMode` of brush component.\n brushMode: string\n }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n console.log(params);\n});\n\nmyChart.on('legendselectchanged', function (params) {\n console.log(params);\n});\n\nchart.on('click', 'series.line', function (params) {\n console.log(params);\n});\n\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {\n console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code>percent</code>. Please refer to callback <code>params</code> of each chart's label formatter.</p>\n<pre><code class=\"lang-js\">{\n // type of the component to which the clicked glyph belongs\n // i.e., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (make sense when componentType is 'series')\n // i.e., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in incoming option.series (make sense when componentType is 'series')\n seriesIndex: number,\n // series name (make sense when componentType is 'series')\n seriesName: string,\n // data name, category name\n name: string,\n // data index in incoming data array\n dataIndex: number,\n // incoming rwa data item\n data: Object,\n // Some series, such as sankey or graph, maintains more than\n // one types of data (nodeData and edgeData), which can be\n // distinguished from each other by dataType with its value\n // 'node' and 'edge'.\n // On the other hand, most series has only one type of data,\n // where dataType is not needed.\n dataType: string,\n // incoming data value\n value: number|Array,\n // color of component (make sense when componentType is 'series')\n color: string,\n // User info (only available in graphic component\n // and custom series, if element option has info\n // property, e.g., {type: 'circle', info: {some: 123}})\n info: *\n}\n</code></pre>\n<p>Mouse events contain <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselectchanged',\n // change legend name\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendselected',\n // name of selected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from <code>legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendunselected',\n // name of unselected legend\n name: string\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-js\">{\n type: 'legendscroll',\n scrollDataIndex: number\n legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-js\">{\n type: 'datazoom',\n // percentage of zoom start position, 0 - 100\n start: number\n // percentage of zoom finish position, 0 - 100\n end: number\n // data value of zoom start position; only exists in zoom event of triggered by toolbar\n startValue?: number\n // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-js\">{\n type: 'datarangeselected',\n // continuous visualMap is different from discrete one\n // continuous visualMap is an array representing range of data values.\n // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n selected: Object|Array\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelinechanged',\n // index of time point\n currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-js\">{\n type: 'timelineplaychanged',\n // play state, true for auto play\n playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-js\">{\n type: 'restore'\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'dataviewchanged'\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-js\">{\n type: 'magictypechanged',\n // click to change current type; same as type attribute in echarts 2.x\n currentType: string\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'pieunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselectchanged',\n // series ID, can be passed in option\n seriesId: string\n // data name\n name: name,\n // table of all selected data.\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won't trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won't trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n type: 'mapunselected',\n // series ID, can incoming in option\n seriesId: string\n // data name\n name: name,\n // table of all legend selecting states\n selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlight lines, which is the list of indices in <code>data</code> of <code>series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on('axisareaselected', function () {\n var series1 = chart.getModel().getSeries()[0];\n var series2 = chart.getModel().getSeries()[0];\n var indices1 = series1.getRawIndicesByActiveState('active');\n var indices2 = series2.getRawIndicesByActiveState('active');\n console.log(indices1);\n console.log(indices2);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n type: 'brushselected',\n batch: [\n {\n // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n brushId: string,\n // Index of the brush component.\n brushIndex: number,\n // Name of the brush component.\n brushName: string,\n\n // The brush areas (that is, select-boxes)\n areas: [\n { // The first area.\n // `range`/`coordRange` is used to record the current\n // range of the area, see the definitions in "brush\n // action".\n\n // If this area is "glboal arae" (that is, it does not\n // belong to any coordinate system), use `range`, where\n // the values are pixel.\n range: Array.<number>,\n\n // If the area is "coordinate system area', use `coordRange`,\n // where the values are coordinates.\n coordRange: Array.<number>,\n // Specially, if the area belongs to an axis of a "grid" (e.g., set\n // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n // used to record the coordinates of this area in each cartesian,\n // and `coordRange` is `coordRanges[0]`.\n coordRanges: Array.<Array.<number>>,\n },\n ...\n ],\n\n // The selected items in each series.\n // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n selected: [\n { // The selected items in series 0.\n seriesIndex: number,\n // dataIndex can be used to find value in original data.\n dataIndex: [ 3, 6, 12, 23 ]\n },\n { // The selected items in series 0.\n seriesIndex: number,\n dataIndex: []\n },\n ...\n ]\n },\n ...\n ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n [ 12, 23, 54, 6 ], // Data of series 0.\n [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n ...,\n brush: {\n ...\n },\n series: [\n { // series 0\n data: dataBySeries[0]\n },\n { // series 1\n data: dataBySeries[1]\n }\n ]\n});\n\nchart.on('brushSelected', function (params) {\n var brushComponent = params.batch[0];\n\n var sum = 0; // The sum of all selected values.\n\n for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n for (var i = 0; i < dataIndices.length; i++) {\n var dataIndex = dataIndices[i];\n sum += dataBySeries[sIdx][dataIndex];\n }\n }\n console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalCursorTaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('rendered', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on('finished', function () {\n snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}
\ No newline at end of file
diff --git a/zh/documents/en/tutorial.json b/zh/documents/en/tutorial.json
index 338e03d..6b1aaa2 100644
--- a/zh/documents/en/tutorial.json
+++ b/zh/documents/en/tutorial.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"Get Started with ECharts in 5 minutes":{"type":["*"],"description":"<h2 id=\"installing-echarts\">Installing ECharts</h2>\n<p>First, install ECharts using one of the following methods:</p>\n<ul>\n<li><p>The <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">official download page</a>, has different builds for most common use cases. If you would like to include all packages, you can download <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">the full minified version</a>.</p>\n</li>\n<li><p>From the latest <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> release, you can find the latest version of echarts in <code>dist</code> directory of the unzipped files.</p>\n</li>\n<li><p>Using npm: <code>npm install echarts --save</code>. <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Use%20ECharts%20with%20webpack\" target=\"_blank\">Using ECharts with webpack</a></p>\n</li>\n<li><p>Using the <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">online build tool</a> (Currently available in Chinese only).</p>\n</li>\n</ul>\n<h2 id=\"including-echarts\">Including ECharts</h2>\n<p>ECharts 3 no longer requires using AMD to load packages, and the AMD loader is no longer included in ECharts. Instead, ECharts should be included using a traditional <code><script></code> tag:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- including ECharts file -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"draw-a-simple-chart\">Draw a simple chart</h2>\n<p>Before drawing charts, we need to prepare a DOM container with width and height for ECharts.</p>\n<pre><code><body>\n <!-- preparing a DOM with width and height for ECharts -->\n <div id="main" style="width:600px; height:400px;"></div>\n</body>\n</code></pre><p>Then we can initialize an ECharts instance using <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a>, and create a simple bar chart with <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a>. Below is the complete code.</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- including ECharts file -->\n <script src="echarts.js"></script>\n</head>\n<body>\n <!-- prepare a DOM container with width and height -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // based on prepared DOM, initialize echarts instance\n var myChart = echarts.init(document.getElementById('main'));\n\n // specify chart configuration item and data\n var option = {\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // use configuration item and data specified to show chart\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>You've made your first chart!</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>For more examples, go to the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a></p>\n"},"Create Custom Build of ECharts":{"type":["*"],"description":"<p>In most cases, ECharts builds can be downloaded from the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">download page</a> or from the <code>echarts/dist</code> directory in our <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub project</a>, where\nthese pre-builds are provided:</p>\n<ul>\n<li>Complete verion: <code>echarts/dist/echarts.js</code>, including all charts and components (see <code>echarts/echarts.all.js</code> for detail), but has maximum file size.</li>\n<li>Common version: <code>echarts/dist/echarts.common.js</code>, including common charts and components (see <code>echarts/echarts.common.js</code> for detail), moderate file size.</li>\n<li>Simple version: <code>echarts/dist/echarts.simple.js</code>, including a smaller subset of the most common charts and components (see <code>echarts/echarts.simple.js</code> for detail), small file size.</li>\n</ul>\n<p>If it is important for your use case to reduce the size of your ECharts dependency, you can customize your ECharts build by using one of these approaches:</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">Online custom build tool</a> is relatively convenient (Currently available in Chinese only)</li>\n<li>The script <code>echarts/build/build.js</code> found in the project is flexible for module selecting, and supports multi-language builds</li>\n<li>Build ECharts and your project directly by using tools such as <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>, <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a></li>\n</ul>\n<p>Below are some examples to illustrate the latter two approaches.</p>\n<h2 id=\"prepare-create-our-project-and-install-echarts\">Prepare: create our project and install echarts</h2>\n<p>Create a sample project using the command line</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>Then in the <code>myProject</code> directory, initialize <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> environment and install echarts (assume that <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> has been installed):</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>The installed echarts is in the <code>myProject/node_modules</code> directory, which can be used in our project directly. For example:</p>\n<p>Use ES Module:</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>Use CommonJS:</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>Next, we just describe our examples in ES Module way.</p>\n<h2 id=\"create-custom-build-by-echarts-build-build-js\">Create custom build by <code>echarts/build/build.js</code></h2>\n<p>In this example, for minimizing file size, we will build a echarts bundle with only pie chart included, and create a web page to show it.</p>\n<p>echarts has provided a script <code>echarts/build/build.js</code> as a build tool (<a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> is required to execute it). Now we can use the command below in the <code>myProject</code> directory to check its help info:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>These options can be used in this example:</p>\n<ul>\n<li><code>-i</code>: Entry file of the echarts code. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>-o</code>: The bundle file path. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>--min</code>: Whether to compress file (not by default), and remove the code that is for printing error and warning info.</li>\n<li><code>--lang <language shortcut or file path></code>: Whether to use the specified language (Chinese by default). For example: <code>--lang en</code> means using English, <code>--lang my/langXX.js</code> means using <code><cwd>/my/langXX.js</code> to substitute <code>echarts/lib/lang.js</code> while buiding.</li>\n<li><code>--sourcemap</code>: Whether to output source map, which is useful in debug.</li>\n<li><code>--format</code>: The format of output. Can be <code>'umb'</code>(default), <code>'amd'</code>, <code>'iife'</code>, <code>'cjs'</code>, <code>'es'</code>.</li>\n</ul>\n<p>Now we want to create a echarts bundle that only supports pie chart, we should firstly create an entry file (say <code>myProject/echarts.custom.js</code>) to import modules we need:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts and export them.\nexport * from 'echarts/src/echarts';\n// Import pie chart.\nimport 'echarts/src/chart/pie';\n// In this case, modules in either `echarts/src` or `echarts/lib`\n// can be imported (but should not be mixed). See\n// "Use `echarts/lib/**` or `echarts/src/**`" below.\n</code></pre>\n<p>Then we can use command below in <code>myProject</code> directory to build the bundle:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>Now the bundle <code>myProject/lib/echarts.custom.min.js</code> has been created. Then we can create a web page (say <code>myProject/pie.html</code>) to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- import the bundle `lib/echarts.custom.js`. -->\n <script src="lib/echarts.custom.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // Create a pie chart:\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/pie.html</code> in a browser, we can see the pie chart:</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"modules-that-are-permitted-to-be-imported\">Modules that are permitted to be imported</h2>\n<p>All of the permitted modules are declared in <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> and <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a>. Other modules in the source code of echarts and zrender <strong>SHOULD NOT BE IMPORTED</strong>, because they are inner modules, whose interfaces and functionalities may be modified in the subsequent upgrades of echarts.</p>\n<h2 id=\"use-echarts-lib-or-echarts-src-\">Use <code>echarts/lib/**</code> or <code>echarts/src/**</code>?</h2>\n<ul>\n<li>If intending to import part of echarts modules in your project and build yourself, only <code>echarts/lib/**</code> can be used, <code>echarts/src/**</code> should not be used.</li>\n<li>If using <code>echarts/build/build.js</code> to make a bundle, either <code>echarts/lib/**</code> or <code>echarts/src/**</code> can be used (should not be mixed), where <code>echarts/src/**</code> brings smaller bundle size a little.</li>\n</ul>\n<blockquote>\n<p>Reason: currently, <code>echarts/src/**</code> is the source code that using ES Module, and they are transpiled to CommonJS code and placed in <code>echarts/lib/**</code>. (This transformation is for backward compatible with old version of NodeJS and webpack that do not support ES Module.)\nHistorically, echarts extensions and user projects have been using the package path <code>echarts/lib/**</code>. So it should not be changed, otherwise, mixed using both <code>echarts/src/**</code> and <code>echarts/lib/**</code> will generate two echarts namespace and bring some problems. But it is not an issue when using <code>echarts/build/build.js</code> to create a bundle, where ES modules in <code>echarts/src/**</code> can be analyzed statically for smaller bundle size.</p>\n</blockquote>\n<h2 id=\"build-echarts-and-our-project-directly-by-rollup\">Build echarts and our project directly by rollup</h2>\n<p>Now we have known that how to create custom build by <code>echarts/build/build.js</code>. Alternatively, we can bundle echarts and our project directly by the tool like <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> or <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>. In some project, this approach is required. Next we only go with <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, because <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> and <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> are in the similar way.</p>\n<p>Firstly install <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> in <code>myProject</code> directory:</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>Then we create a project JS file <code>myProject/line.js</code> for line chart rendering:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts.\nimport * as echarts from 'echarts/lib/echarts';\n// Import line chart.\nimport 'echarts/lib/chart/line';\n// Import components of tooltip, title and toolbox.\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// Render line chart and components.\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>The created module <code>myProject/line.js</code> can not work directly in the browsers that do not support ES Module. So we need to build them. Before we run <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, a config file <code>myProject/rollup.config.js</code> should be created:</p>\n<pre><code class=\"lang-js\">// Responsible for looking for modules in `node_module` directory. For example,\n// if there is code `import 'echarts/lib/chart/line';`, the module file\n// `node_module/echarts/lib/chart/line.js` can be find by this plugin.\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// Responsible for compress code.\nimport uglify from 'rollup-plugin-uglify';\n// Support multi-language.\nimport ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // The entry file.\n input: './line.js',\n plugins: [\n nodeResolve(),\n ecLangPlugin({lang: 'en'}), // Use english\n // Remove the snippet in `__DEV__`, which mainly prints error log.\n uglify()\n ],\n output: {\n // Output file in the format of 'umd'.\n format: 'umd',\n // Output source map.\n sourcemap: true,\n // The path of the output bundle.\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>Then execute the following command in <code>myProject</code> directory to start the build:</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p><code>-c</code> indicate <code>rollup</code> to use <code>myProject/rollup.config.js</code> as the config file.</p>\n</blockquote>\n<p>The created bundle <code>myProject/lib/line.min.js</code> includes project code and part of echarts code that we requried. Now we create a web page <code>myProject/line.html</code> to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- Import the created bundle: -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/line.html</code> in a browser, we will get:</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"multi-language\">Multi-language</h2>\n<p>In the example above, we can notice that the label of the <code>toolbox</code> component is in English. Essentially any text can be customized by <code>echarts option</code>, but if we want to show label in a certain language by default, we have to specify the language while building the code.</p>\n<p>For example:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>It means that the pre-defined English text is used. Moreover, can be <code>--lang fi</code>.</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>It means that <code>myProject/my/langXX.js</code> is used to substitute <code>myProject/node_modules/echarts/lib/lang.js</code> while performing build. So we can customize text in our language in <code>myProject/my/langXX.js</code>. Notice, <code>-o</code> or <code>--output</code> must be specified in the approach.</p>\n<p>Besides, the same lang parameter can be pass to <code>echarts/build/rollup-plugin-ec-lang</code>.</p>\n"},"Use ECharts with webpack":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.</p>\n<h2 id=\"use-npm-to-install-echarts\">Use npm to install ECharts</h2>\n<p>Before <code>3.1.1</code> version, ECharts package on npm was maintained by third-party. Since <code>3.1.1</code>, ECharts and zrender on npm are maintained officially by <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> team.</p>\n<p>You can use the following command to install ECharts with npm.</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"include-echarts\">Include ECharts</h2>\n<p>ECharts and zrender installed by npm will be placed under <code>node_modules</code>. You can obtain echarts directly in project with <code>require('echarts')</code>.</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"include-echarts-charts-and-components-on-demand\">Include ECharts charts and components on demand</h2>\n<p>By default, <code>require('echarts')</code> returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.</p>\n<p>For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.</p>\n<pre><code class=\"lang-js\">// include ECharts main module\nvar echarts = require('echarts/lib/echarts');\n// include bar chart\nrequire('echarts/lib/chart/bar');\n// include tooltip and title component\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts introductory example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>Available modules see <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>The same goes for another popular packaging tools <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>, which will not be introduced again here. Using <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> to make a custom build of echarts is introduced in <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">Create Custom Build of ECharts</a></p>\n"},"Customized Chart Styles":{"type":["*"],"description":"<p>ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"drawing-nightingale-rose-chart\">Drawing Nightingale Rose Chart</h2>\n<p><a href=\"#Get%20Started%20with%20ECharts%20in%205%20minutes\">Getting started tutorial</a> introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need <code>xAxis</code>，<code>yAxis</code> either.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: 'Reference Page',\n type: 'pie',\n radius: '55%',\n data:[\n {value:400, name:'Searching Engine'},\n {value:335, name:'Direct'},\n {value:310, name:'Email'},\n {value:274, name:'Alliance Advertisement'},\n {value:235, name:'Video Advertisement'}\n ]\n }\n ]\n})\n</code></pre>\n<p>With the above code, we can create a simple pie chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Here, the value of <code>data</code> is not a single value, as that of the example in get started. Instead, it's an object containing <code>name</code> and <code>value</code>. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> for more information.</p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">Pie charts</a> of EChart can be made into Nightingale rose charts with <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> field.</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>Nightingale rose charts use radius to represent data value.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"configuring-shadow\">Configuring Shadow</h2>\n<p>Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by <a href=\"#series-pie.itemStyle\">itemStyle</a> in series.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // shadow size\n shadowBlur: 200,\n // horizontal offset of shadow\n shadowOffsetX: 0,\n // vertical offset of shadow\n shadowOffsetY: 0,\n // shadow color\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>The effect after added shadow is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Each <code>itemStyle</code> has <code>emphasis</code> as the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"dark-background-and-light-text\">Dark Background and Light Text</h2>\n<p>Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.</p>\n<p>Background is a global configurable object, so we can set it directly with <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a> of option.</p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>Text style can also be set globally in <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>.</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>On the other hand, we can also set them in <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a> of each series.</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>We also need to set line color of pie chart to be lighter.</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>Thus, we can get the following effect.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Similar to <code>itemStyle</code>, <code>label</code> and <code>labelLine</code> also have <code>emphasis</code> children.</p>\n<h2 id=\"setting-fan-colors\">Setting Fan Colors</h2>\n<p>Fan colors can be set in <code>itemStyle</code>:</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.</p>\n<p>Each fan's color can be set under <code>data</code>:</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through <a href=\"#option.html#visualMap\">visualMap</a>.</p>\n<pre><code class=\"lang-js\">visualMap: {\n // hide visualMap component; use lightness mapping only\n show: false,\n // mapping with min value at 80\n min: 80,\n // mapping with max value at 600\n max: 600,\n inRange: {\n // mapping lightness from 0 to 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>The final effect is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n"},"Overview of Style Customization":{"type":["*"],"description":"<p>This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Pallette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<p>Other article about styling can be check in <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a> and <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Theme</strong></p>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\">Examples page</a>, "Theme" can be selected, and view the result directly.</p>\n<p>Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named '<code>'light'</code> and <code>'dark'</code>. They can be used as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">Theme Builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<pre><code class=\"lang-js\">var xhr = new XMLHttpRequest();\n// Assume the theme name is "vintage".\nxhr.open('GET', 'xxx/xxx/vintage.json', true);\nxhr.onload = function () {\n var themeJSON = this.response;\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n // ...\n});\nxhr.send();\n</code></pre>\n<p>If a them is downloaded as a JS file, it will auto register itself:</p>\n<pre><code class=\"lang-js\">// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Palette</strong></p>\n<p>Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<pre><code class=\"lang-js\">option = {\n // Global palette:\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // A palette only work for the series:\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // A palette only work for the series:\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</strong></p>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href=\"option.html\" target=\"_blank\">option</a>, style related options can be set in various place, including <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>, <a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>, <a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>, <a href=\"option.html#series.label\" target=\"_blank\">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc., although they may occur in different place according to different series or components.</p>\n<p>There is another article for style setting, <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Style of emphasis state</strong></p>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> property. The options in <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> is the same as the ones for normal state, for example:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (visualMap component)</strong></p>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n"},"Loading and Updating of Asynchronous Data":{"type":["*"],"description":"<h2 id=\"asynchronous-loading\">Asynchronous Loading</h2>\n<p>Data in <a href=\"#getting-started\">Get started</a> is directly filled in <code>setOption</code> after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in <code>ECharts</code> is very easy. After initialization, you can pass in data and configuration item through <code>setOption</code> after data obtained through jQuery and other tools at any time.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// show title. legend and empty axis\nmyChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: []\n }]\n});\n\n// Asynchronous data loading \n$.get('data.json').done(function (data) {\n // fill in data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // find series by name\n name: 'Sales',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>For example: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>In ECharts, updating data need to find the corresponding series through <code>name</code>. In the above example, updating can be performed correctly according to series order if <code>name</code> is not defined. But in most cases, it is recommended to update data with series <code>name</code> information. </p>\n<h2 id=\"loading-animation\">Loading Animation</h2>\n<p>If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading. </p>\n<p>ECharts provides a simple loading animation by default. You only need <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> to show, and then use <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> to hide loading animation after data loading.</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>Effects are as followed: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"dynamic-data-updating\">Dynamic Data Updating</h2>\n<p>ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.</p>\n<p>All data updating are through <a href=\"#api.html#echartsInstance.setOption\">setOption</a>. You only need to get data as you wish, fill in data to <a href=\"#api.html#echartsInstance.setOption\">setOption</a> without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation. </p>\n<blockquote>\n<p>In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.</p>\n</blockquote>\n<p>See details in the following example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"Dataset":{"type":["*"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>Before ECharts 4, data was only able to declared in each series, for example:</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>This approach is easy to be understand and is flexible when some series needs special data definitions. But the shortcomings are also obvious: some data extra works are usually needed to split the original data to each series, and it not supports sharing data in different series, moreover, it is not good for encode.</p>\n<p>ECharts4 starts to provide <code>dataset</code> component, which brings benefits below:</p>\n<ul>\n<li>Benefit from <code>dataset</code>, we can follow the common methodology of data visualization: based on data, specify the mapping (via the option <a href=\"option.html#series.encode\" target=\"_blank\">encode</a>) from data to visual.</li>\n<li>Data can be managed and configured separately from other configurations.</li>\n<li>Data can be reused by different series and components.</li>\n<li>Support more common data format (like 2d-array, object-array), to avoid data transform works for users.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Get started</strong></p>\n<p>This is a simplest example of <code>dataset</code>:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare X axis, which is a category axis, mapping\n // to the first column by default.\n xAxis: {type: 'category'},\n // Declare Y axis, which is a value axis.\n yAxis: {},\n // Declare several series, each of them mapped to a\n // column of the dataset by default.\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>Or the common format object-array is also supported:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Here the declared `dimensions` is mainly for providing the order of\n // the dimensions, which enables ECharts to apply the default mapping\n // from dimensions to axes.\n // Alternatively, we can declare `series.encode` to specify the mapping,\n // which will be introduced later.\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic</strong></p>\n<p>In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.</p>\n<p>Generally, this mapping can be performed:</p>\n<ul>\n<li>Configure whether columns or rows of a dataset will mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. <code>'column'</code> is the default value.</li>\n<li>Configure the mapping rule from dimensions (a dimension means a column/row) to axes in coordinate system, tooltip, labels, color, symbol size, etc. This can be specified by <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> and <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> (if visual encoding is required). The example above does not give a mapping rule, so ECharts make default mapping by common sense: because x axis is a category axis, the first column is mapped to the x axis, and each series use each subsequent column in order.</li>\n</ul>\n<p>Let's illustrate them in detail below.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping by column or row</strong></p>\n<p>Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. The optional values are:</p>\n<ul>\n<li>'column': series are positioned on each columns of the dataset. Default value.</li>\n<li>'row': series are positioned on each row of the dataset.</li>\n</ul>\n<p>See the example below:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series is in the first cartesian (grid), and each\n // is mapped to a row.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series is in the second cartesian (grid), and each\n // is mapped to a column.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Dimension</strong></p>\n<p>Before introducing <code>encode</code>, we should clarify the concept of <code>dimension</code>.</p>\n<p>Most of common charts describe data in the format of "two-dimensions table" (note that the meaning of the word "dimension" in "two-dimension table" is not the same as the dimensions in ECharts. \bIn order not to be confusing, we use "2d-table", "2d-array" below). In the examples above, we use 2d-array to carry the 2d-table. When we set <code>seriesLayoutBy</code> as <code>'column'</code>, namely, mapping columns to series, each column is called a dimension, and each row is a data item. When we set <code>seriesLayoutBy</code> as <code>'row'</code>, namely, mapping rows to series, each row is called a dimension, and each column is a data item.</p>\n<p>Dimension can have its name to displayed on charts. Dimension name can be defined on the first row/column. Take the code above as an example, <code>'score'</code>、<code>'amount'</code>、<code>'product'</code> are dimension names, and data start from the second row. By default ECharts auto detect whether the first row/column of <code>dataset.source</code> is dimension name or data. Use can also set <code>dataset.sourceHeader</code> as <code>true</code> to mandatorily specify the first row/column is dimension name, or set as <code>false</code> to indicate the data start from the first row/column.</p>\n<p>The definitions of the dimensions can also be provided separately in <code>dataset.dimensions</code> or <code>series.dimensions</code>, where not only dimension name, but also dimension type can be specified:</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n // Each item can be object or string.\n {name: 'score'},\n // A string indicates the dimension name.\n 'amount',\n // Dimension type can be specified.\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // Dimensions declared in series will be adapted with higher priority.\n dimensions: [\n null, // Set as null means we dont want to set dimension name.\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>Generally, we do not need to set dimensions types, because it can be auto detected based on data by ECharts. But in some cases, for example, the data is empty, the detection might not be accurate, where dimension type can be set manually.</p>\n<p>The optional values of dimension types can be:</p>\n<ul>\n<li><code>'number'</code>: Normal data, default value.</li>\n<li><code>'ordinal'</code>: Represents string data like category data or text data. ECharts will auto detect them by default. They can be set manually if the detection fail.</li>\n<li><code>'time'</code>: Represents time data, where it is supported that parse time string to timestamp. For example, if users need to parse '2017-05-10' to timestamp, it should be set as <code>time</code> type. If the dimension is used on a time axis (<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> is <code>'time'</code>), it will be auto set to <code>time</code> type. The supported time string is listed in <a href=\"option.html#series.data\" target=\"_blank\">data</a>.</li>\n<li><code>'float'</code>: If set as <code>'float'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n<li><code>'int'</code>: If set as <code>'int'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic (encode)</strong></p>\n<p>Having the concept of dimension clarified, we can use <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> to map data to graphic:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // Map dimension "amount" to the X axis.\n x: 'amount',\n // Map dimension "product" to the Y axis.\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>There is an other example for <code>encode</code>:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (color, symbol, etc.)</strong></p>\n<p>We can use <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its <a href=\"option.html#visualMap\" target=\"_blank\">doc</a>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Default encoding</strong></p>\n<p>For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no <code>encode</code> option is specified. (If <code>encode</code> option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:</p>\n<ul>\n<li>In coordinate system (like cartesian(grid), polar):<ul>\n<li>If category axis (i.e., axis.type is <code>'category'</code>) exists, map the first column/row to the axis, and each series use a following column/row.</li>\n<li>If no category axis exists, and the coordinate system contains two axis (like X Y in cartesian), each series use two columns/rows, one for a axis.</li>\n</ul>\n</li>\n<li>If no coordinate system (like pie chart):<ul>\n<li>Use the first column/row as item name, and the second column/row as item value.</li>\n</ul>\n</li>\n</ul>\n<p>If the default rule does not meet the requirements, configure the <code>encode</code> yourself please.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Q & A</strong></p>\n<p>Q: How to map the third column to X axis, and map the fifth column to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n // Notice that the dimension index is based on 0,\n // thus the third column is dimensions[2].\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>Q: How to map the third row th X axis, and map the fifth row to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>Q: How to use the values in the second column in label.</p>\n<p>A:\nThe <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a> supports refer value in a certain dimension. For example:</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` means use the value in the "score" dimension.\n // `'{@[4]}'` means use the value in dimensions[4].\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>Q: How to display the second column and the third column in tooltip?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>Q: If there is no dimension name in dataset.source, how to give dimension name?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>Q: How to encode the fourth column in bubble size in bubble plot?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n // Use visualMap to perform visual encoding.\n visualMap: {\n show: false,\n dimension: 2, // Encode the third column.\n min: 2, // Min value is required in visualMap component.\n max: 15, // Max value is required in visualMap component.\n inRange: {\n // The range of bubble size, from 5 pixel to 60 pixel.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>Q: We have specified <code>encode</code>, but why it does not work?</p>\n<p>A: Maybe we can try to check typo, for example, the dimension name is <code>'Life Expectancy'</code>, be we typed <code>'Life Expectency'</code> in <code>encode</code> option.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Various formats in dataset</strong></p>\n<p>In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to <code>dataset.source</code>.</p>\n<blockquote>\n<p>Some csv tools can be used to export the table data to JSON, for example, <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> or <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a>.</p>\n</blockquote>\n<p>In common used data transfer formats in JavaScript, 2d-array is a good choice to carry table data, which has been illustrated in the examples above.</p>\n<p>Besides, 2d-array, <code>dataset</code> also support key-value format as follows, which is also commonly used. But notice, the option <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> is not supported in this format.</p>\n<pre><code class=\"lang-js\">dataset: [{\n // Row based key-value format, namely, object array, is a commonly used format.\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // Column based key-value format is also supported.\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Multiple datasets and references</strong></p>\n<p>Multiple datasets can be defined, and series can refer them by <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a>.</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n source: [...],\n }, {\n source: [...]\n }, {\n source: [...]\n }],\n series: [{\n // Use the third dataset.\n datasetIndex: 2\n }, {\n // Use the second dataset.\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts3 data setting approach (series.data) can be used normally</strong></p>\n<p>The data setting approach before ECharts4 can still be used normally. If a series has declared <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>, it will be used but not <code>dataset</code>.</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>In fact, setting data via <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is not deprecated and useful in some cases. For example, for some charts, like <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>, <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, <a href=\"option.html#series-lines\" target=\"_blank\">lines</a>, that do not apply table data, <code>dataset</code> is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> is probably needed to load data incrementally. <code>dataset</code> is not supported in the case.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Others</strong></p>\n<p>Currently, not all types of series support dataset. Series that support dataset includes:</p>\n<p><code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.</p>\n<p>More types of series will support dataset in our further work.</p>\n<p>Finally, this is an example, multiple series sharing one <code>dataset</code> and having interactions:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n\n"},"Add interaction to the chart component":{"type":["*"],"description":"<p>Echarts provides many interaction components besides chart. For example:</p>\n<p><code>legend component</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>title component</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>visualmap component</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>dataline component</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>Following is an example of <code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> as an introduction of how to add this kind of component.</p>\n<p><br></p>\n<h2>Introduction of data zoom component (dataZoom)</h2>\n\n<p>Data overview by default, and detail by requirement is a basic interaction need of data visualization. <code>dataZoom</code> component can implement this function in rectangular coordinate (<a href=\"option.html#grid\" target=\"_blank\">grid</a>) and polar coordinate (<a href=\"option.html#polar\" target=\"_blank\">polar</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> component operates <em>data window zoom</em> and <em>data window translation</em> on <code>axis</code>.</li>\n</ul>\n<blockquote>\n<p>Use <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a>, <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> to specify which axis <code>dataZoom</code> controls.</p>\n</blockquote>\n<ul>\n<li><p>Multiple <code>dataZoom</code> components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.</p>\n</li>\n<li><p>Operation principle of <code>dataZoom</code> achieves <em>data window zooming</em> through <em>data filtering</em>.</p>\n<p> Different settings of data filtering modes lead to different data window zooming effects, please see: <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>.</p>\n</li>\n<li><p>Setting of <code>dataZoom</code> data window range supports two formats currently:</p>\n<ul>\n<li><p>Percentage: see <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> and <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>.</p>\n</li>\n<li><p>Absolute value: see <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> and <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom component supports several child components: </strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">Inside data zoom component (dataZoomInside)</a>: inside coordinates.</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">Slider data zoom component (dataZoomSlider)</a>: has seperate slide option.</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">Select data zoom component (dataZoomSelect)</a>: full-screen box for zoom data area. Entrance and configuration item are both in <code>toolbox</code>.</p>\n</li>\n</ul>\n<p><br></p>\n<h2>Adding dataZoom component</h2>\n\n<p>First, only add dataZoom component to x-axis. Following examples shows the code.</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // This dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n series: [\n {\n type: 'scatter', // this is scatter chart\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>which will show the following result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the <code>option.dataZoom</code> above:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // this dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n },\n { // This dataZoom component controls x-axis by dafault\n type: 'inside', // this dataZoom component is dataZoom component of inside\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n ...\n}\n</code></pre>\n<p>Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>Following result can be seen:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n\n"},"Responsive Mobile-End":{"type":["*"],"description":"<p>ECharts works in DOM nodes with user defined width and height. ECharts <em>component</em> and <em>series</em> are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.</p>\n<p>Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.</p>\n<p>To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a>.</p>\n<p><br></p>\n<h2>Location and layout of ECharts components</h2>\n\n\n<p>Most <em>component</em> and <em>series</em> follow two locating methods: </p>\n<p><br>\n<strong>left/right/top/bottom/width/height locating method:</strong></p>\n<p>Each of those six parameters can be <em>absolute value</em> or <em>percentage</em> or <em>location description</em>.</p>\n<ul>\n<li><p>Absolute value</p>\n<p> in browser pixels (px); in form of <code>number</code> (no unit); e.g.: <code>{left: 23, height: 400}</code>.</p>\n</li>\n<li><p>Percentage</p>\n<p> to the width and height of DOM container; in form of <code>string</code>; e.g.: <code>{right: '30%', bottom: '40%'}</code>.</p>\n</li>\n<li><p>Location Description</p>\n<ul>\n<li>can be set to <code>left: 'center'</code>, for horizontally centering.</li>\n<li>can be set to <code>top: 'middle'</code>, for vertically centering.</li>\n</ul>\n</li>\n</ul>\n<p>The concept of these six parameters is similar to that in CSS: </p>\n<ul>\n<li>left: distance to left border of DOM container.</li>\n<li>right: distance to right border of DOM container.</li>\n<li>top: distance to top border of DOM container.</li>\n<li>bottom: distance to bottom border of DOM container.</li>\n<li>width: width.</li>\n<li>height: height.</li>\n</ul>\n<p>Two out of the three horizontal parameters, <code>left</code>, <code>right</code>, <code>width</code>, are enough to determine the component location. For example, <code>left</code> and <code>right</code>, or <code>right</code> and <code>width</code> can both determine component location and size.\nThe same goes for vertical paramters <code>top</code>, <code>bottom</code> and <code>height</code>.</p>\n<p><br>\n<strong>Locating method of <code>center</code> / <code>radius</code>: </strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> an array in form of <code>[x, y]</code>, in which <code>x</code> and <code>y</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n</li>\n<li><p><code>radius</code></p>\n<p> an array in form of <code>[innerRadius, outerRadius]</code>, in which <code>innerRadius</code> and <code>outerRadius</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n<p> Percentage location turns out to be very useful for responsive positioning.</p>\n</li>\n</ul>\n<p><br>\n<strong>Horizontal and vertical</strong></p>\n<p>Most of ECharts's long and narrow components (such as <code>legend</code>,<code>visualMap</code>,<code>dataZoom</code>,<code>timeline</code> and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.</p>\n<p>Setting of horizontal or vertical layout is usually with component or series's <code>orient</code> or <code>layout</code> option, which can be set to <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n<p><br>\n<strong>Compatibility with ECharts2: </strong></p>\n<p>Naming of <code>x/x2/y/y2</code> in ECharts2 is still compatible, as well as the newly added <code>left/right/top/bottom</code>. But <code>left/right/top/bottom</code> is recommended.</p>\n<p>To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: <code>left: 'right'</code>, <code>left: 'left'</code>, <code>top: 'bottom'</code>, <code>top: 'top'</code>, which are equal to: <code>right: 0</code>, <code>left: 0</code>, <code>bottom: 0</code>, <code>top: 0</code>, in a more normal expression.</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> provides the ability to be responsive with container size.</p>\n<p>As shown in the following example, you may drag <strong>the circle in bottom-right corner</strong> to see the legend and series change layout position and method with container size. </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>The following format should be followed if you need to set Media Query in option:</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // here defines base option\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // each rule of media query is defined here\n {\n query: {...}, // write rule here\n option: { // write options accordingly\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // the second rule\n option: { // the second option\n legend: {...},\n ...\n }\n },\n { // default with no rules,\n option: { // when all rules fail, use this option\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>In the above example, <code>baseOption</code> and every option in <code>media</code> are all <em>simple options</em>, which are regular options containing components and series. <code>baseOption</code> is always be used, while options of every will be merged with <code>chart.mergeOption()</code> when given <code>query</code> condition is satisfied with.</p>\n<p><strong>query: </strong></p>\n<p>A <code>query</code> is in the following format: </p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>Currently there are three supported attributes:<code>width</code>, <code>height</code>, <code>aspectRatio</code> (length-to-width ratio), each of which can add <code>min</code> or <code>max</code> as prefix. E.g., <code>minWidth: 200</code> stands for when width is greater than or equal to 200px. When two attributes are written together, it means <em>and</em> in Bool logic. For example, <code>{minWidth: 200, maxHeight: 300}</code> stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.</p>\n<p><strong>option: </strong></p>\n<p>Since option in <code>media</code> is <em>simple option</em>, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // when length-to-width ratio is less than 1\n },\n option: {\n legend: { // legend is placed in middle-bottom\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // horizontal layout of legend\n },\n series: [ // left and right layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // when container width is smaller than 500\n },\n option: {\n legend: {\n right: 10, // legend is placed in middle-right\n top: '15%',\n orient: 'vertical' // vertical layout\n },\n series: [ // top and bottom layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>Priority when multiple queries are satisfied: </strong></p>\n<p>Attention: When multiple <code>query</code> are satisfied at the same time, all of them will be merged with <code>mergeOption</code> and those are defined later will be merged later, thus provides them with higher priority.</p>\n<p><strong>Query by default: </strong></p>\n<p>If an item in <code>media</code> has no not <code>query</code>, then it means <em>default value</em>, which will be used when all other rules fail.</p>\n<p><strong>Pay attention when container size changes:</strong></p>\n<p>In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.</p>\n<p>But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one <code>query option</code>, then it should also appeared in other <code>query option</code>, or it will not be able to return to the original state. (<code>left/right/top/bottom/width/height</code> are not restricted to this rule.)</p>\n<p><strong><code>media</code> in <em>composite option</em> does not support merge</strong></p>\n<p>When <code>chart.setOption(rawOption)</code> for the second, third, fourth, fifth, and etc. times, if <code>rawOption</code> is <code>composite option</code> (which means it contains <code>media</code> list), then, the new <code>rawOption.media</code> list will not merge with the old <code>media</code>. instead, it will simply replace the option. Of course, <code>rawOption.baseOption</code> will still merge with the old option normally.</p>\n<p><br>\nFinally, let's see an example combining with timeline:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n\n"},"Visual Map of Data":{"type":["*"],"description":"<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.</p>\n<p>Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into <em>lines</em>, bar charts map data into <em>length</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:<br>\n<code>symbol</code>, <code>symbolSize</code><br>\n<code>color</code>, <code>opacity</code>, <code>colorAlpha</code>, <br>\n<code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></p>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<p><br></p>\n<h2>Data and Dimension</h2>\n\n<p>Data are usually stored in <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of <code>dataItem</code>s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {...}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {...}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ]\n}\n</code></pre>\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href=\"option.html#series-scatter\" target=\"_blank\">scatter charts</a> use radius to represent the third dimension.</p>\n<p><br></p>\n<h2>visualMap Component</h2>\n\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // can define multiple visualMap components at the same time\n { // the first visualMap component\n type: 'continuous', // defined as continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined as discrete visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">visualMapContinuous</a>：</p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">visualMapPiecewise</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>Piecewise visual map component has three types:</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>Equal division of continuous data: divide equally based on <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a>;</li>\n<li>User-defined division of continuous data: divide with range in <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a>;</li>\n<li>Discrete data (data in category type): divide with <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<strong>Configuration of visualMap mapping method</strong></p>\n<p>As we have introduced above, <code>visualMap</code> maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in <a href=\"#visualMap.dimension\">visualMap.dimension</a>) to be mapped to which visual elements (see in <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>).</p>\n<p>Example A:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data, or value[3], is mapped\n seriesIndex: 4, // map with the fourth series\n inRange: { // visual configuration items in selected range\n color: ['blue', '#121122', 'red'], // defines color list of mapping\n // The largest value will be mapped to 'red',\n // and others will be interpolated\n symbolSize: [30, 100] // the smallest value will be mapped to size of 30,\n // the largest to 100,\n // and others will be interpolated\n },\n outOfRange: { // visual configuration items out of selected range\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>Example B:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // visual configuration items in selected range\n colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color\n // original color may be selected from global color palette,\n // which is not concerned by visualMap component\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>For more information, please refer to <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>.</p>\n"},"Events and Actions in ECharts":{"type":["*"],"description":"<p>User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.</p>\n<p>Binding events in ECharts 3 is though <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // printing data name in console\n console.log(params.name);\n});\n</code></pre>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> event when toggling legend (Notice here, that <code>'legendselected'</code> event will not be triggered when toggling legend), triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> event when data zooming in some area.</p>\n<h2 id=\"mouse-events-handling\">Mouse Events Handling</h2>\n<p>ECharts support regular mouse events, which includes <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. Next let's see an example of opening Baidu search page when clicks a bar chart.</p>\n<pre><code class=\"lang-js\">// initialize ECharts instance based on prepared dom\nvar myChart = echarts.init(document.getElementById('main'));\n\n// data and configuration item of specific chart\nvar option = {\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// use specified configuration item and data to show chart\nmyChart.setOption(option);\n// handle click event and redirect to corresponding Baidu search page\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>All types of mouse events have a common parameter called <code>params</code>, which is an object that contains data information of the clicked chart, whose format is as followed:</p>\n<pre><code class=\"lang-js\">{\n // component name of clicked component\n // e.g., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (useful when componentType is 'series')\n // e.g., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in option.series (useful when componentType is 'series')\n seriesIndex: number,\n // series name (useful when componentType is 'series')\n seriesName: string,\n // data name, or category name\n name: string,\n // data index in input data array\n dataIndex: number,\n // raw input data item\n data: Object,\n // Some series, such as sankey or graph, maintains both nodeData and edgeData,\n // in which case, dataType is set to be 'node' or 'edge' to identify.\n // On the other hand, most other series have only one type of data,\n // where dataType is not needed.\n dataType: string,\n // input data value\n value: number|Array\n // color of component (useful when componentType is 'series')\n color: string\n}\n</code></pre>\n<p>How to know where the mouse clicked:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // clicked on markPoint\n if (params.seriesIndex === 5) {\n // clicked on a markPoint which belongs to a series indexed with 5\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked on an edge of the graph\n }\n else {\n // clicked on a node of the graph\n }\n }\n }\n});\n</code></pre>\n<p>Use <code>query</code> to call handler only on the graphic elements of the specified components:</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n}\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('click', {element: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method called.\n});\n</code></pre>\n<p>You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // present data distribution of a single bar through pie chart\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"interaction-events-with-components\">Interaction Events with Components</h2>\n<p>Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in <a href=\"api.html#events\" target=\"_blank\">events</a>.</p>\n<p>Below is example that listens to a legend toggling:</p>\n<pre><code class=\"lang-js\">// legend toggling triggers legendselectchanged event only\nmyChart.on('legendselectchanged', function (params) {\n // obtain selecting status of clicked legend\n var isSelected = params.selected[params.name];\n // print in console\n console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);\n // print all legend status\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"triggering-component-actions-through-code-in-echarts\">Triggering Component Actions through Code in ECharts</h2>\n<p>Actions like <code>'legendselectchanged'</code> mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.</p>\n<p>ECharts 2.x triggers actions through <code>myChart.component.tooltip.showTip</code>, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through <code>myChart.dispatchAction({ type: '' })</code>, which manages all actions in a uniformed way, and may record user's event path when need.</p>\n<p>Frequently used actions and the parameters are listed in <a href=\"api.html#action\" target=\"_blank\">action</a>.</p>\n<p>Below displays how to highlight each sector of pie chart in turn through <code>dispatchAction</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"An Example: Implement Dragging":{"type":["*"],"description":"<p>This is a tiny example, introducing how to implement dragging of graphic elements in echarts. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p>\n<p><br></p>\n<h2>[ Part 1 ] Implement basic dragging</h2>\n\n<p>First of all, we create a basic <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">line chart (line series)</a>:</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n</code></pre>\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<pre><code class=\"lang-js\">// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> is used, which is the reversed process of <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>[ Part 2 ] Add tooltip component</h2>\n\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // Means disable default "show/hide rule".\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // Customize "show/hide rule", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>The API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> is used to show/hide tooltip content, where actions <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a> and <a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a> is dispatched.</p>\n<p><br></p>\n<h2>[ Part 3 ] Full code</h2>\n\n<p>Full code is shown as follow:</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n"},"Custom Series":{"type":["*"],"description":"<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is a type of series, which enable develpers to customize graphic elements rendering and generate new types of chart.</p>\n<p>Why echarts supports <code>custom series</code>? There are endless chart types in the world of data visualization, which are not enumerable. Thus only most common used chart types are built-in supported in echarts. For other chart types, it is necessary to provide an approach to make new types of chart for developers. This approach should be as simple as possible, which had better not to bothered developers with some details of implementation, such as creating and deleting graphic elements, transition animation, tooltip supporting, working with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a> or <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap\" target=\"_blank\">visualMap</a>. Having considered the factors above, a solution <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is published.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p>Let's begin the tutorial.</p>\n<p><br></p>\n<h2>(I) The method <code>renderItem</code></h2>\n\n<p>The snippet of graphic elements rendering should be written in <code>renderItem</code> method my developers. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>In the rendering phase of echarts workflow, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is called respectively for each <code>dataItem</code> in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.data\" target=\"_blank\">series.data</a>. <code>renderItem</code> is responsible for build a group of definitions of graphic elements, including graphic type, size, location, style, etc. echarts will then build graphic elements according to those definitions. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // This method will be called for each dataItem repectively.\n // Notice: it does not ensure that called according to the order\n // of `dataItem`.\n\n // Some processes, such as coordinate conversion.\n // `api.value(0)` is used to retrieve the value on the first\n // dimension in the current `dataItem`.\n var categoryIndex = api.value(0);\n // `api.coord(...)` is used to convert data values to pixel values,\n // will are necessary for graphic elements rendering.\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // `api.size(...)` is used to calculate the pixel size corresponding to\n // the a value range that the length is 1 on Y axis.\n var height = api.size([0, 1])[1] * 0.6;\n\n // The property `shape` incicates the location and size of thsi\n // element.\n // `echarts.graphic.clipRectByRect` is used for clipping the\n // rectangular when it overflow the bounding box of the current\n // coordinate system (cartesian).\n // If the rect is totally clipped, returns undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // position and location of the rectangular.\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // Bounding box of the current cooridinate system (cartesian).\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n })\n\n // Returns definitions for the current `dataItem`.\n return rectShape && {\n // 'rect' indicates that the graphic element is rectangular.\n // Can also be 'circle', 'sector', 'polygon', ...\n type: 'rect',\n shape: rectShape,\n // `api.style(...)` is used to obtain style settings, which\n // includes itemStyle settings in optino and the result of\n // visual mapping.\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // The first dataItem.\n [53, 31, 21, 56], // The second dataItem.\n [71, 33, 10, 20], // The third dataItem.\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：provides info about the current series (such as <code>seriesIndex</code>、<code>dataIndex</code>, etc.) and data (such as <code>dataIndex</code>, <code>dataIndexInside</code>, etc.) and coordinate system (such as location and size of bounding box of the current coordinate system)</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a> provides some methods to developers (such as <code>api.value()</code>, <code>api.coord()</code>).</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> method should return definitions of graphic elements for the current <code>dataItem</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p>Having <code>renderItem</code> provided, 90% of the work of creating custom series has been accomplished. The rest of this work is to refine and polish them.</p>\n<p><br></p>\n<h2>(II) Make the extent of axes fit the data</h2>\n\n<p>There is axes in some coordinate systems, such as <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#polar\" target=\"_blank\">polar</a>. The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>, developers should specify that which dimensions correspond to <code>x</code> axis and which to <code>y</code> axis use the property <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // `dim1` and `dim2` correspond to `x` axis.\n x: [1, 2],\n // `dim0` corresponds to `y` axis.\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>(III) Set tooltip content</h2>\n\n<p>Of course <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> can be used to define the content in tooltip. But it is easier to do that by setting <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a> and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // `dim2` and `dim3` will displayed in tooltip.\n tooltip: [2, 3]\n },\n // `dim2` is named as "Age" and `dim3` is named as "Satisfaction".\n dimensions: [null, null, 'Age', 'Satisfaction'],\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ],\n [ 53, 31, 21, 56 ],\n [ 71, 33, 10, 20 ],\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>Several other issues about <code>custom series</code> are introduced below.</p>\n<p><br></p>\n<h2>(IV) Shape clipping when overflow the coordinates area</h2>\n\n<p>When use <code>custom series</code> with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p>In the example above, <code>dim</code> and <code>dim2</code> corresponds to <code>x</code> axis, and the <code>dataZoom</code> component constrols the data window of <code>x</code> axis. If part of a <code>dataItem</code> is overflow the extent of <code>x</code> axis (the value on <code>dim1</code> is overflow and the value on <code>dim2</code> is not) while zooming, the <code>dataItem</code> will not be filtered if <code>dataZoom.filterMode = 'weakFilter'</code> set. Thus the <code>dataItem</code> can be still rendered (usually be partially rendered by using <code>echarts.graphic.clipRectByRect</code> to clip the exceeding part).\nSee the example mentioned above <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a>.</p>\n<p><br></p>\n<p><br></p>\n<h2>(V) About dataIndex</h2>\n\n\n<p>Developers had better notice that in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> <code>dataIndexInside</code> and <code>dataIndex</code> is different:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br></p>\n<h2>(VI) Event listener</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>(VII) Custom vector shapes</h2>\n\n\n<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> is supported, which enables to use shapes that are created in vector tool. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>, and examples: <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon\" target=\"_blank\">icons</a>, <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p><br></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More examples about custom series</a></strong></p>\n"},"Rich Text":{"type":["*"],"description":"<p>Rich text can be used in labels of series, axis or other components. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>More examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.</p>\n<p>Since v3.7, rich text has been supported:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fregments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the begining, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text Fregment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Options about Text</strong></p>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fregment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fregment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fregment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fregment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fregment in <code>rich</code> property. For example, <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this fregment}'\n '{b|Style "b" is applied to this fregment}This fregment use default style{x|use style "x"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fregments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Basic Styles of Text, Text Block and Text Fragment</strong></p>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fregment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Position</strong></p>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href=\"option.html\" target=\"_blank\">option doc</a>.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Rotation</strong></p>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p><a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> and<a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Layout and Alignment of Text Fregment</strong></p>\n<p>To understand the layout rule, every text fregment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fregment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fregment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>'\\n'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fregment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fregments. <code>lineHeight</code> of a text fregment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fregment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fregments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>'bottom'</code>: The bottom edge of the text fregment sticks to the bottom edge of the line.</li>\n<li><code>'top'</code>: The top edge of the text fregment sticks to the top edge of the line.</li>\n<li><code>'middle'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fregment can be placed in each line, where the horizontal position of text fregments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fregments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li>\n<li>Secondly, place text fregments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li>\n<li>Finally, the text fregments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fregment:</p>\n<ul>\n<li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fregment box.</li>\n<li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fregment box.</li>\n<li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fregment box.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Effects: Icon, Horizontal Rule, Title Block, Simple Table</strong></p>\n<p>See example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n</code></pre>\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<pre><code class=\"lang-js\">// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>Simple table can be implemented by specify the same width to text fregments that are in the same column of different lines. See the <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">example</a> at the mentioned above.</p>\n"},"Server-side Rendering":{"type":["*"],"description":"<p>ECharts can be rendered at server-side. For example, the thumbnails in the <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>, <a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>, <a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>, <a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>, <a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"Render by Canvas or SVG":{"type":["*"],"description":"<p>Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.</p>\n<p>ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v3.8</a> we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">renderer</a> as <code>'canvas'</code> or <code>'svg'</code> when initailizing a chart instance.</p>\n<blockquote>\n<p>That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">zender</a>, where they are implemented as a Canvas renderer and a alternative SVG renderer.</p>\n</blockquote>\n<h2 id=\"how-to-make-a-choice-\">How to make a choice?</h2>\n<p>Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=lines-bmap-effect\" target=\"_blank\">special visual effect</a>. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg-en&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.</p>\n<p>How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.</p>\n<ul>\n<li>If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.</li>\n<li>If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.<ul>\n<li>If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">liquidfill</a>, the SVG renderer probably gives a better performance.</li>\n<li>If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.</li>\n</ul>\n</li>\n</ul>\n<p>Therefore <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">feedback</a> of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.</p>\n<p>Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.</p>\n<h2 id=\"how-to-use-specify-a-renderer-\">How to use specify a renderer?</h2>\n<p>ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.</p>\n<ul>\n<li>In the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">pre-build</a> of ECharts, the SVG renderer has been included in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.common.min.js\" target=\"_blank\">common version</a> and <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.min.js\" target=\"_blank\">complete version</a>. But not in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.simple.min.js\" target=\"_blank\">simple version</a>.</li>\n<li>If <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">build ECharts online</a>, the checkbox "SVG 渲染" should be checked.</li>\n<li>If <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">build ECharts offline</a>, the module of the SVG renderer should be imported:</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>Then wen can specify renderer by <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">parameter</a>:</p>\n<pre><code class=\"lang-js\">// Use the Canvas renderer (default).\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// which is equal to:\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n\n// Use the SVG renderer.\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"Supporting ARIA in Charts":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: 'Source of user access to a site',\n x: 'center'\n },\n series: [\n {\n Name: 'access source',\n type: 'pie',\n data: [\n { value: 335, name: 'direct access' },\n { value: 310, name: 'mail marketing' },\n { value: 234, name: 'union ad' },\n { value: 135, name: 'video ad' },\n { value: 1548, name: 'search engine' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates.</p>\n<p>Please refer to <a href=\"option.html#aria\" target=\"_blank\">ARIA option</a> for more detail.</p>\n"}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"Get Started with ECharts in 5 minutes":{"type":["*"],"description":"<h2 id=\"installing-echarts\">Installing ECharts</h2>\n<p>First, install ECharts using one of the following methods:</p>\n<ul>\n<li><p>The <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">official download page</a>, has different builds for most common use cases. If you would like to include all packages, you can download <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">the full minified version</a>.</p>\n</li>\n<li><p>From the latest <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> release, you can find the latest version of echarts in <code>dist</code> directory of the unzipped files.</p>\n</li>\n<li><p>Using npm: <code>npm install echarts --save</code>. <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Use%20ECharts%20with%20webpack\" target=\"_blank\">Using ECharts with webpack</a></p>\n</li>\n<li><p>Using the <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">online build tool</a> (Currently available in Chinese only).</p>\n</li>\n</ul>\n<h2 id=\"including-echarts\">Including ECharts</h2>\n<p>ECharts 3 no longer requires using AMD to load packages, and the AMD loader is no longer included in ECharts. Instead, ECharts should be included using a traditional <code><script></code> tag:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- including ECharts file -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"draw-a-simple-chart\">Draw a simple chart</h2>\n<p>Before drawing charts, we need to prepare a DOM container with width and height for ECharts.</p>\n<pre><code><body>\n <!-- preparing a DOM with width and height for ECharts -->\n <div id="main" style="width:600px; height:400px;"></div>\n</body>\n</code></pre><p>Then we can initialize an ECharts instance using <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a>, and create a simple bar chart with <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a>. Below is the complete code.</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- including ECharts file -->\n <script src="echarts.js"></script>\n</head>\n<body>\n <!-- prepare a DOM container with width and height -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // based on prepared DOM, initialize echarts instance\n var myChart = echarts.init(document.getElementById('main'));\n\n // specify chart configuration item and data\n var option = {\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // use configuration item and data specified to show chart\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>You've made your first chart!</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>For more examples, go to the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a></p>\n"},"Create Custom Build of ECharts":{"type":["*"],"description":"<p>In most cases, ECharts builds can be downloaded from the <a href=\"/en/download.html\" target=\"_blank\">download page</a> or from the <code>echarts/dist</code> directory in our <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub project</a>, where\nthese pre-builds are provided:</p>\n<ul>\n<li>Complete verion: <code>echarts/dist/echarts.js</code>, including all charts and components (see <code>echarts/echarts.all.js</code> for detail), but has maximum file size.</li>\n<li>Common version: <code>echarts/dist/echarts.common.js</code>, including common charts and components (see <code>echarts/echarts.common.js</code> for detail), moderate file size.</li>\n<li>Simple version: <code>echarts/dist/echarts.simple.js</code>, including a smaller subset of the most common charts and components (see <code>echarts/echarts.simple.js</code> for detail), small file size.</li>\n</ul>\n<p>We can also build echarts ourselves, which enables to only include the charts and components you needed. You can customize your ECharts build by using one of these approaches:</p>\n<ul>\n<li><a href=\"/en/builder.html\" target=\"_blank\">Online custom build tool</a> is relatively convenient.</li>\n<li>The script <code>echarts/build/build.js</code> found in the project is flexible for module selecting, and supports multi-language builds</li>\n<li>Build ECharts and your project directly by using tools such as <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>, <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a></li>\n</ul>\n<p>There are some examples to illustrate the latter two approaches below.</p>\n<h2 id=\"prepare-create-our-project-and-install-echarts\">Prepare: create our project and install echarts</h2>\n<p>Create a sample project using the command line</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>Then in the <code>myProject</code> directory, initialize <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> environment and install echarts (assume that <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> has been installed):</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>The installed echarts is in the <code>myProject/node_modules</code> directory, which can be used in our project directly. For example:</p>\n<p>Use ES Module:</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>Use CommonJS:</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>Next, we just describe our examples in ES Module way.</p>\n<h2 id=\"create-custom-build-by-echarts-build-build-js\">Create custom build by <code>echarts/build/build.js</code></h2>\n<p>In this example, for minimizing file size, we will build a echarts bundle with only pie chart included, and create a web page to show it.</p>\n<p>echarts has provided a script <code>echarts/build/build.js</code> as a build tool (<a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> is required to execute it). Now we can use the command below in the <code>myProject</code> directory to check its help info:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>These options can be used in this example:</p>\n<ul>\n<li><code>-i</code>: Entry file of the echarts code. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>-o</code>: The bundle file path. Can be an absolute path or a relative path relative to the current working directory.</li>\n<li><code>--min</code>: Whether to compress file (not by default), and remove the code that is for printing error and warning info.</li>\n<li><code>--lang <language shortcut or file path></code>: Whether to use the specified language (Chinese by default). For example: <code>--lang en</code> means using English, <code>--lang my/langXX.js</code> means using <code><cwd>/my/langXX.js</code> to substitute <code>echarts/lib/lang.js</code> while buiding.</li>\n<li><code>--sourcemap</code>: Whether to output source map, which is useful in debug.</li>\n<li><code>--format</code>: The format of output. Can be <code>'umb'</code>(default), <code>'amd'</code>, <code>'iife'</code>, <code>'cjs'</code>, <code>'es'</code>.</li>\n</ul>\n<p>Now we want to create a echarts bundle that only supports pie chart, we should firstly create an entry file (say <code>myProject/echarts.custom.js</code>) to import modules we need:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts and export them.\nexport * from 'echarts/src/echarts';\n// Import pie chart.\nimport 'echarts/src/chart/pie';\n// In this case, modules in either `echarts/src` or `echarts/lib`\n// can be imported (but should not be mixed). See\n// "Use `echarts/lib/**` or `echarts/src/**`" below.\n</code></pre>\n<p>Then we can use command below in <code>myProject</code> directory to build the bundle:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>Now the bundle <code>myProject/lib/echarts.custom.min.js</code> has been created. Then we can create a web page (say <code>myProject/pie.html</code>) to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- import the bundle `lib/echarts.custom.js`. -->\n <script src="lib/echarts.custom.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // Create a pie chart:\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/pie.html</code> in a browser, we can see the pie chart:</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"modules-that-are-permitted-to-be-imported\">Modules that are permitted to be imported</h2>\n<p>All of the permitted modules are declared in <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> and <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a>. Other modules in the source code of echarts and zrender <strong>SHOULD NOT BE IMPORTED</strong>, because they are inner modules, whose interfaces and functionalities may be modified in the subsequent upgrades of echarts.</p>\n<h2 id=\"use-echarts-lib-or-echarts-src-\">Use <code>echarts/lib/**</code> or <code>echarts/src/**</code>?</h2>\n<ul>\n<li>If intending to import part of echarts modules in your project and build yourself, only <code>echarts/lib/**</code> can be used, <code>echarts/src/**</code> should not be used.</li>\n<li>If using <code>echarts/build/build.js</code> to make a bundle, either <code>echarts/lib/**</code> or <code>echarts/src/**</code> can be used (should not be mixed), where <code>echarts/src/**</code> brings smaller bundle size a little.</li>\n</ul>\n<blockquote>\n<p>Reason: currently, <code>echarts/src/**</code> is the source code that using ES Module, and they are transpiled to CommonJS code and placed in <code>echarts/lib/**</code>. (This transformation is for backward compatible with old version of NodeJS and webpack that do not support ES Module.)\nHistorically, echarts extensions and user projects have been using the package path <code>echarts/lib/**</code>. So it should not be changed, otherwise, mixed using both <code>echarts/src/**</code> and <code>echarts/lib/**</code> will generate two echarts namespace and bring some problems. But it is not an issue when using <code>echarts/build/build.js</code> to create a bundle, where ES modules in <code>echarts/src/**</code> can be analyzed statically for smaller bundle size.</p>\n</blockquote>\n<h2 id=\"build-echarts-and-our-project-directly-by-rollup\">Build echarts and our project directly by rollup</h2>\n<p>Now we have known that how to create custom build by <code>echarts/build/build.js</code>. Alternatively, we can bundle echarts and our project directly by the tool like <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> or <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>. In some project, this approach is required. Next we only go with <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, because <a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> and <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> are in the similar way.</p>\n<p>Firstly install <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> in <code>myProject</code> directory:</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>Then we create a project JS file <code>myProject/line.js</code> for line chart rendering:</p>\n<pre><code class=\"lang-js\">// Import the main module of echarts.\nimport * as echarts from 'echarts/lib/echarts';\n// Import line chart.\nimport 'echarts/lib/chart/line';\n// Import components of tooltip, title and toolbox.\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// Render line chart and components.\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>The created module <code>myProject/line.js</code> can not work directly in the browsers that do not support ES Module. So we need to build them. Before we run <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>, a config file <code>myProject/rollup.config.js</code> should be created:</p>\n<pre><code class=\"lang-js\">// Responsible for looking for modules in `node_module` directory. For example,\n// if there is code `import 'echarts/lib/chart/line';`, the module file\n// `node_module/echarts/lib/chart/line.js` can be find by this plugin.\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// Responsible for compress code.\nimport uglify from 'rollup-plugin-uglify';\n// Support multi-language.\nimport ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // The entry file.\n input: './line.js',\n plugins: [\n nodeResolve(),\n ecLangPlugin({lang: 'en'}), // Use english\n // Remove the snippet in `__DEV__`, which mainly prints error log.\n uglify()\n ],\n output: {\n // Output file in the format of 'umd'.\n format: 'umd',\n // Output source map.\n sourcemap: true,\n // The path of the output bundle.\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>Then execute the following command in <code>myProject</code> directory to start the build:</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p><code>-c</code> indicate <code>rollup</code> to use <code>myProject/rollup.config.js</code> as the config file.</p>\n</blockquote>\n<p>The created bundle <code>myProject/lib/line.min.js</code> includes project code and part of echarts code that we requried. Now we create a web page <code>myProject/line.html</code> to test it:</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- Import the created bundle: -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>Open <code>myProject/line.html</code> in a browser, we will get:</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"multi-language\">Multi-language</h2>\n<p>In the example above, we can notice that the label of the <code>toolbox</code> component is in English. Essentially any text can be customized by <code>echarts option</code>, but if we want to show label in a certain language by default, we have to specify the language while building the code.</p>\n<p>For example:</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>It means that the pre-defined English text is used. Moreover, can be <code>--lang fi</code>.</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>It means that <code>myProject/my/langXX.js</code> is used to substitute <code>myProject/node_modules/echarts/lib/lang.js</code> while performing build. So we can customize text in our language in <code>myProject/my/langXX.js</code>. Notice, <code>-o</code> or <code>--output</code> must be specified in the approach.</p>\n<p>Besides, the same lang parameter can be pass to <code>echarts/build/rollup-plugin-ec-lang</code>.</p>\n"},"Use ECharts with webpack":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> is a popular module packaging tool, which can be used easily to import and packaging ECharts. Here we assume you already have certain understanding about webpack and used it in your project.</p>\n<h2 id=\"use-npm-to-install-echarts\">Use npm to install ECharts</h2>\n<p>Before <code>3.1.1</code> version, ECharts package on npm was maintained by third-party. Since <code>3.1.1</code>, ECharts and zrender on npm are maintained officially by <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> team.</p>\n<p>You can use the following command to install ECharts with npm.</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"include-echarts\">Include ECharts</h2>\n<p>ECharts and zrender installed by npm will be placed under <code>node_modules</code>. You can obtain echarts directly in project with <code>require('echarts')</code>.</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts entry example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"include-echarts-charts-and-components-on-demand\">Include ECharts charts and components on demand</h2>\n<p>By default, <code>require('echarts')</code> returns the whole ECharts package including all charts and components, so the package size is a bit large. If you have a strict demand of package size, you may include packages on demand.</p>\n<p>For example, the code above only uses bar chart, tooltip and title component, so you only need to include these modules, effectively making the package size from more than 400 KB to about 170 KB.</p>\n<pre><code class=\"lang-js\">// include ECharts main module\nvar echarts = require('echarts/lib/echarts');\n// include bar chart\nrequire('echarts/lib/chart/bar');\n// include tooltip and title component\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// initialize echarts instance with prepared DOM\nvar myChart = echarts.init(document.getElementById('main'));\n// draw chart\nmyChart.setOption({\n title: {\n text: 'ECharts introductory example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>Available modules see <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>The same goes for another popular packaging tools <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>, which will not be introduced again here. Using <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> to make a custom build of echarts is introduced in <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">Create Custom Build of ECharts</a></p>\n"},"Customized Chart Styles":{"type":["*"],"description":"<p>ECharts provides a rich amount of configurable items, which can be set in global, series, and data three different levels. Next, let's see an example of how to use ECharts to implement the following Nightingale rose chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"drawing-nightingale-rose-chart\">Drawing Nightingale Rose Chart</h2>\n<p><a href=\"#Get%20Started%20with%20ECharts%20in%205%20minutes\">Getting started tutorial</a> introduced how to make a simple bar chart. This time, we are going to make a pie chart. Pie charts use arc length of fans to represent ratio of a certain series in total share. It's data format is simpler than bar chart, because it only contains one dimension without category. Besides, since it's not in rectangular system, it doesn't need <code>xAxis</code>，<code>yAxis</code> either.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: 'Reference Page',\n type: 'pie',\n radius: '55%',\n data:[\n {value:400, name:'Searching Engine'},\n {value:335, name:'Direct'},\n {value:310, name:'Email'},\n {value:274, name:'Alliance Advertisement'},\n {value:235, name:'Video Advertisement'}\n ]\n }\n ]\n})\n</code></pre>\n<p>With the above code, we can create a simple pie chart:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Here, the value of <code>data</code> is not a single value, as that of the example in get started. Instead, it's an object containing <code>name</code> and <code>value</code>. Data in ECharts can always be a single value, or a configurable object with name, style and label. You may refer to <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> for more information.</p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">Pie charts</a> of EChart can be made into Nightingale rose charts with <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> field.</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>Nightingale rose charts use radius to represent data value.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"configuring-shadow\">Configuring Shadow</h2>\n<p>Commonly used styles of ECharts, like shadow, opacity, color, border-color, border-width, and etc., are set by <a href=\"#series-pie.itemStyle\">itemStyle</a> in series.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // shadow size\n shadowBlur: 200,\n // horizontal offset of shadow\n shadowOffsetX: 0,\n // vertical offset of shadow\n shadowOffsetY: 0,\n // shadow color\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>The effect after added shadow is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Each <code>itemStyle</code> has <code>emphasis</code> as the highlighted style when mouse hovered. The last example shows the effect of adding shadow by default. But in most situations, we may probably need to add shadow to emphasis when mouse is hovered.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"dark-background-and-light-text\">Dark Background and Light Text</h2>\n<p>Now, we need to change the whole theme as that shown in the example at the beginning of this tutorial. This can be achieved by changing background color and text color.</p>\n<p>Background is a global configurable object, so we can set it directly with <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a> of option.</p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>Text style can also be set globally in <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>.</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>On the other hand, we can also set them in <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a> of each series.</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>We also need to set line color of pie chart to be lighter.</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>Thus, we can get the following effect.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>Similar to <code>itemStyle</code>, <code>label</code> and <code>labelLine</code> also have <code>emphasis</code> children.</p>\n<h2 id=\"setting-fan-colors\">Setting Fan Colors</h2>\n<p>Fan colors can be set in <code>itemStyle</code>:</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>This is quite similar to our expect effect, except that fan colors should be made darker within shadow area, so as to make a sense of layering and space with blocked light.</p>\n<p>Each fan's color can be set under <code>data</code>:</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>But since we only need the variation of color in this example, there's a simpler way to map data value to lightness through <a href=\"#option.html#visualMap\">visualMap</a>.</p>\n<pre><code class=\"lang-js\">visualMap: {\n // hide visualMap component; use lightness mapping only\n show: false,\n // mapping with min value at 80\n min: 80,\n // mapping with max value at 600\n max: 600,\n inRange: {\n // mapping lightness from 0 to 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>The final effect is:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n"},"Overview of Style Customization":{"type":["*"],"description":"<p>This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Pallette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<p>Other article about styling can be check in <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a> and <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Theme</strong></p>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html\" target=\"_blank\">Examples page</a>, "Theme" can be selected, and view the result directly.</p>\n<p>Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named '<code>'light'</code> and <code>'dark'</code>. They can be used as follows:</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">Theme Builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<pre><code class=\"lang-js\">var xhr = new XMLHttpRequest();\n// Assume the theme name is "vintage".\nxhr.open('GET', 'xxx/xxx/vintage.json', true);\nxhr.onload = function () {\n var themeJSON = this.response;\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n // ...\n});\nxhr.send();\n</code></pre>\n<p>If a them is downloaded as a JS file, it will auto register itself:</p>\n<pre><code class=\"lang-js\">// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Palette</strong></p>\n<p>Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<pre><code class=\"lang-js\">option = {\n // Global palette:\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // A palette only work for the series:\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // A palette only work for the series:\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</strong></p>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href=\"option.html\" target=\"_blank\">option</a>, style related options can be set in various place, including <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>, <a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>, <a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>, <a href=\"option.html#series.label\" target=\"_blank\">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc., although they may occur in different place according to different series or components.</p>\n<p>There is another article for style setting, <a href=\"#Customized%20Chart%20Styles\">Customized Chart Styles</a>.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Style of emphasis state</strong></p>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> property. The options in <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> is the same as the ones for normal state, for example:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (visualMap component)</strong></p>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href=\"#Visual%20Map%20of%20Data\">Visual Map of Data</a>.</p>\n"},"Loading and Updating of Asynchronous Data":{"type":["*"],"description":"<h2 id=\"asynchronous-loading\">Asynchronous Loading</h2>\n<p>Data in <a href=\"#getting-started\">Get started</a> is directly filled in <code>setOption</code> after initialization, but in some cases, data may be filled after asynchronous loading. Data updating asynchronously in <code>ECharts</code> is very easy. After initialization, you can pass in data and configuration item through <code>setOption</code> after data obtained through jQuery and other tools at any time.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: ["shirts","cardigan","chiffon shirt","pants","heels","sockes"]\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>Or, you may set other styles, displaying an empty rectangular axis, and then fill in data when ready.</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// show title. legend and empty axis\nmyChart.setOption({\n title: {\n text: 'asynchronous data loading example'\n },\n tooltip: {},\n legend: {\n data:['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: 'Sales',\n type: 'bar',\n data: []\n }]\n});\n\n// Asynchronous data loading \n$.get('data.json').done(function (data) {\n // fill in data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // find series by name\n name: 'Sales',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>For example: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>In ECharts, updating data need to find the corresponding series through <code>name</code>. In the above example, updating can be performed correctly according to series order if <code>name</code> is not defined. But in most cases, it is recommended to update data with series <code>name</code> information. </p>\n<h2 id=\"loading-animation\">Loading Animation</h2>\n<p>If data loading time is too long, an empty axis on the canvas may confuse users. In this case, a loading animation is needed to tell the user that it's still loading. </p>\n<p>ECharts provides a simple loading animation by default. You only need <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> to show, and then use <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> to hide loading animation after data loading.</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>Effects are as followed: </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"dynamic-data-updating\">Dynamic Data Updating</h2>\n<p>ECharts is driven by data. Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy.</p>\n<p>All data updating are through <a href=\"#api.html#echartsInstance.setOption\">setOption</a>. You only need to get data as you wish, fill in data to <a href=\"#api.html#echartsInstance.setOption\">setOption</a> without considering the changes brought by data, ECharts will find the difference between two group of data and present the difference through proper animation. </p>\n<blockquote>\n<p>In ECharts 3, addData in ECharts 2 is removed.If a single data needs to be added, you can first data.push(value) and then setOption.</p>\n</blockquote>\n<p>See details in the following example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"Dataset":{"type":["*"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>Before ECharts 4, data was only able to declared in each series, for example:</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>This approach is easy to be understand and is flexible when some series needs special data definitions. But the shortcomings are also obvious: some data extra works are usually needed to split the original data to each series, and it not supports sharing data in different series, moreover, it is not good for encode.</p>\n<p>ECharts4 starts to provide <code>dataset</code> component, which brings benefits below:</p>\n<ul>\n<li>Benefit from <code>dataset</code>, we can follow the common methodology of data visualization: based on data, specify the mapping (via the option <a href=\"option.html#series.encode\" target=\"_blank\">encode</a>) from data to visual.</li>\n<li>Data can be managed and configured separately from other configurations.</li>\n<li>Data can be reused by different series and components.</li>\n<li>Support more common data format (like 2d-array, object-array), to avoid data transform works for users.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Get started</strong></p>\n<p>This is a simplest example of <code>dataset</code>:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare X axis, which is a category axis, mapping\n // to the first column by default.\n xAxis: {type: 'category'},\n // Declare Y axis, which is a value axis.\n yAxis: {},\n // Declare several series, each of them mapped to a\n // column of the dataset by default.\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>Or the common format object-array is also supported:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Here the declared `dimensions` is mainly for providing the order of\n // the dimensions, which enables ECharts to apply the default mapping\n // from dimensions to axes.\n // Alternatively, we can declare `series.encode` to specify the mapping,\n // which will be introduced later.\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic</strong></p>\n<p>In this tutorial, we make charts following this methodology: base on data, config the rule to map data to graphic, namely, encode the data to graphic.</p>\n<p>Generally, this mapping can be performed:</p>\n<ul>\n<li>Configure whether columns or rows of a dataset will mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. <code>'column'</code> is the default value.</li>\n<li>Configure the mapping rule from dimensions (a dimension means a column/row) to axes in coordinate system, tooltip, labels, color, symbol size, etc. This can be specified by <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> and <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> (if visual encoding is required). The example above does not give a mapping rule, so ECharts make default mapping by common sense: because x axis is a category axis, the first column is mapped to the x axis, and each series use each subsequent column in order.</li>\n</ul>\n<p>Let's illustrate them in detail below.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping by column or row</strong></p>\n<p>Giving dataset, users can configure whether columns or rows of a dataset will be mapped to series, namely, the series layout on the columns or rows of a dataset. This can be specified by <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a>. The optional values are:</p>\n<ul>\n<li>'column': series are positioned on each columns of the dataset. Default value.</li>\n<li>'row': series are positioned on each row of the dataset.</li>\n</ul>\n<p>See the example below:</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // These series is in the first cartesian (grid), and each\n // is mapped to a row.\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // These series is in the second cartesian (grid), and each\n // is mapped to a column.\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Dimension</strong></p>\n<p>Before introducing <code>encode</code>, we should clarify the concept of <code>dimension</code>.</p>\n<p>Most of common charts describe data in the format of "two-dimensions table" (note that the meaning of the word "dimension" in "two-dimension table" is not the same as the dimensions in ECharts. \bIn order not to be confusing, we use "2d-table", "2d-array" below). In the examples above, we use 2d-array to carry the 2d-table. When we set <code>seriesLayoutBy</code> as <code>'column'</code>, namely, mapping columns to series, each column is called a dimension, and each row is a data item. When we set <code>seriesLayoutBy</code> as <code>'row'</code>, namely, mapping rows to series, each row is called a dimension, and each column is a data item.</p>\n<p>Dimension can have its name to displayed on charts. Dimension name can be defined on the first row/column. Take the code above as an example, <code>'score'</code>、<code>'amount'</code>、<code>'product'</code> are dimension names, and data start from the second row. By default ECharts auto detect whether the first row/column of <code>dataset.source</code> is dimension name or data. Use can also set <code>dataset.sourceHeader</code> as <code>true</code> to mandatorily specify the first row/column is dimension name, or set as <code>false</code> to indicate the data start from the first row/column.</p>\n<p>The definitions of the dimensions can also be provided separately in <code>dataset.dimensions</code> or <code>series.dimensions</code>, where not only dimension name, but also dimension type can be specified:</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n // Each item can be object or string.\n {name: 'score'},\n // A string indicates the dimension name.\n 'amount',\n // Dimension type can be specified.\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // Dimensions declared in series will be adapted with higher priority.\n dimensions: [\n null, // Set as null means we dont want to set dimension name.\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>Generally, we do not need to set dimensions types, because it can be auto detected based on data by ECharts. But in some cases, for example, the data is empty, the detection might not be accurate, where dimension type can be set manually.</p>\n<p>The optional values of dimension types can be:</p>\n<ul>\n<li><code>'number'</code>: Normal data, default value.</li>\n<li><code>'ordinal'</code>: Represents string data like category data or text data. ECharts will auto detect them by default. They can be set manually if the detection fail.</li>\n<li><code>'time'</code>: Represents time data, where it is supported that parse time string to timestamp. For example, if users need to parse '2017-05-10' to timestamp, it should be set as <code>time</code> type. If the dimension is used on a time axis (<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> is <code>'time'</code>), it will be auto set to <code>time</code> type. The supported time string is listed in <a href=\"option.html#series.data\" target=\"_blank\">data</a>.</li>\n<li><code>'float'</code>: If set as <code>'float'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n<li><code>'int'</code>: If set as <code>'int'</code>, it will be stored in <code>TypedArray</code>, which is good for performance optimization.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Mapping from data to graphic (encode)</strong></p>\n<p>Having the concept of dimension clarified, we can use <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> to map data to graphic:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // Map dimension "amount" to the X axis.\n x: 'amount',\n // Map dimension "product" to the Y axis.\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>This is the result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>There is an other example for <code>encode</code>:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Visual encoding (color, symbol, etc.)</strong></p>\n<p>We can use <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> component to map data to visual channel like color, symbol size, etc.. More info about it can be checked in its <a href=\"option.html#visualMap\" target=\"_blank\">doc</a>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Default encoding</strong></p>\n<p>For some common cases (line chart, bar chart, scatter plot, candlestick, pie, funnel, etc.), EChart provides default encoding settings, by which chart will be displayed even if no <code>encode</code> option is specified. (If <code>encode</code> option is specified, default encoding will not be applied.) The rule of default encoding should not be too complicated. Basically it is:</p>\n<ul>\n<li>In coordinate system (like cartesian(grid), polar):<ul>\n<li>If category axis (i.e., axis.type is <code>'category'</code>) exists, map the first column/row to the axis, and each series use a following column/row.</li>\n<li>If no category axis exists, and the coordinate system contains two axis (like X Y in cartesian), each series use two columns/rows, one for a axis.</li>\n</ul>\n</li>\n<li>If no coordinate system (like pie chart):<ul>\n<li>Use the first column/row as item name, and the second column/row as item value.</li>\n</ul>\n</li>\n</ul>\n<p>If the default rule does not meet the requirements, configure the <code>encode</code> yourself please.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Q & A</strong></p>\n<p>Q: How to map the third column to X axis, and map the fifth column to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n // Notice that the dimension index is based on 0,\n // thus the third column is dimensions[2].\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>Q: How to map the third row th X axis, and map the fifth row to Y axis?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>Q: How to use the values in the second column in label.</p>\n<p>A:\nThe <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a> supports refer value in a certain dimension. For example:</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` means use the value in the "score" dimension.\n // `'{@[4]}'` means use the value in dimensions[4].\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>Q: How to display the second column and the third column in tooltip?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>Q: If there is no dimension name in dataset.source, how to give dimension name?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>Q: How to encode the fourth column in bubble size in bubble plot?</p>\n<p>A:</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n // Use visualMap to perform visual encoding.\n visualMap: {\n show: false,\n dimension: 2, // Encode the third column.\n min: 2, // Min value is required in visualMap component.\n max: 15, // Max value is required in visualMap component.\n inRange: {\n // The range of bubble size, from 5 pixel to 60 pixel.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>Q: We have specified <code>encode</code>, but why it does not work?</p>\n<p>A: Maybe we can try to check typo, for example, the dimension name is <code>'Life Expectancy'</code>, be we typed <code>'Life Expectency'</code> in <code>encode</code> option.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Various formats in dataset</strong></p>\n<p>In lots of cases, data is described in 2d-table. For example, some data processing software like MS Excel, Numbers are based on 2d-table. The data can be exported as JSON format and input to <code>dataset.source</code>.</p>\n<blockquote>\n<p>Some csv tools can be used to export the table data to JSON, for example, <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> or <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a>.</p>\n</blockquote>\n<p>In common used data transfer formats in JavaScript, 2d-array is a good choice to carry table data, which has been illustrated in the examples above.</p>\n<p>Besides, 2d-array, <code>dataset</code> also support key-value format as follows, which is also commonly used. But notice, the option <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> is not supported in this format.</p>\n<pre><code class=\"lang-js\">dataset: [{\n // Row based key-value format, namely, object array, is a commonly used format.\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // Column based key-value format is also supported.\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Multiple datasets and references</strong></p>\n<p>Multiple datasets can be defined, and series can refer them by <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a>.</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n source: [...],\n }, {\n source: [...]\n }, {\n source: [...]\n }],\n series: [{\n // Use the third dataset.\n datasetIndex: 2\n }, {\n // Use the second dataset.\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts3 data setting approach (series.data) can be used normally</strong></p>\n<p>The data setting approach before ECharts4 can still be used normally. If a series has declared <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>, it will be used but not <code>dataset</code>.</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>In fact, setting data via <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is not deprecated and useful in some cases. For example, for some charts, like <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>, <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, <a href=\"option.html#series-lines\" target=\"_blank\">lines</a>, that do not apply table data, <code>dataset</code> is not supported for yet. Moreover, for the case of large data rendering (for example, millions of data), <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> is probably needed to load data incrementally. <code>dataset</code> is not supported in the case.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Others</strong></p>\n<p>Currently, not all types of series support dataset. Series that support dataset includes:</p>\n<p><code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.</p>\n<p>More types of series will support dataset in our further work.</p>\n<p>Finally, this is an example, multiple series sharing one <code>dataset</code> and having interactions:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n\n"},"Add interaction to the chart component":{"type":["*"],"description":"<p>Echarts provides many interaction components besides chart. For example:</p>\n<p><code>legend component</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>title component</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>visualmap component</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>dataline component</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>Following is an example of <code>datazoom component</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> as an introduction of how to add this kind of component.</p>\n<p><br></p>\n<h2>Introduction of data zoom component (dataZoom)</h2>\n\n<p>Data overview by default, and detail by requirement is a basic interaction need of data visualization. <code>dataZoom</code> component can implement this function in rectangular coordinate (<a href=\"option.html#grid\" target=\"_blank\">grid</a>) and polar coordinate (<a href=\"option.html#polar\" target=\"_blank\">polar</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> component operates <em>data window zoom</em> and <em>data window translation</em> on <code>axis</code>.</li>\n</ul>\n<blockquote>\n<p>Use <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a>, <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> to specify which axis <code>dataZoom</code> controls.</p>\n</blockquote>\n<ul>\n<li><p>Multiple <code>dataZoom</code> components can exist at the same time to control function together. Components controling the same axis will be connected automatically. The example below explains in detail.</p>\n</li>\n<li><p>Operation principle of <code>dataZoom</code> achieves <em>data window zooming</em> through <em>data filtering</em>.</p>\n<p> Different settings of data filtering modes lead to different data window zooming effects, please see: <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>.</p>\n</li>\n<li><p>Setting of <code>dataZoom</code> data window range supports two formats currently:</p>\n<ul>\n<li><p>Percentage: see <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> and <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>.</p>\n</li>\n<li><p>Absolute value: see <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> and <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom component supports several child components: </strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">Inside data zoom component (dataZoomInside)</a>: inside coordinates.</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">Slider data zoom component (dataZoomSlider)</a>: has seperate slide option.</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">Select data zoom component (dataZoomSelect)</a>: full-screen box for zoom data area. Entrance and configuration item are both in <code>toolbox</code>.</p>\n</li>\n</ul>\n<p><br></p>\n<h2>Adding dataZoom component</h2>\n\n<p>First, only add dataZoom component to x-axis. Following examples shows the code.</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // This dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n series: [\n {\n type: 'scatter', // this is scatter chart\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>which will show the following result:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>The chart above can only change window by dragging dataZoom component. If you want to drag in coordinate, or use mouse wheel (or slides with two fingers on mobile) to zoom, then another inside dataZoom component needs to be added. You can just add in the <code>option.dataZoom</code> above:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // this dataZoom component controls x-axis by dafault\n type: 'slider', // this dataZoom component is dataZoom component of slider\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n },\n { // This dataZoom component controls x-axis by dafault\n type: 'inside', // this dataZoom component is dataZoom component of inside\n start: 10, // the left is located at 10%\n end: 60 // the right is located at 60%\n }\n ],\n ...\n}\n</code></pre>\n<p>Following results can be seen (you can now slide or use mouse wheel to zoom in coordinate) :</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>If you want to enable zooming on y-axis, then you need to add dataZoom componet on y-axis:</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>Following result can be seen:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n\n"},"Responsive Mobile-End":{"type":["*"],"description":"<p>ECharts works in DOM nodes with user defined width and height. ECharts <em>component</em> and <em>series</em> are both in this DOM node, whose location can be assigned by user seperately. Inner components of charts are not suitable for implementing DOM flow layout. Instead, we use a simpler and more understandable layout similar to absolute layout. But sometimes when container is of extreme size, this method cannot avoid component overlapping automatically, especially on small screens on mobile-end.</p>\n<p>Besides, sometimes one chart may need to be displayed on both PC and mobile-end, which involves the ability of ECharts inner components to be responsive with different container sizes.</p>\n<p>To solve this problem, ECharts improved component location algorithm, and implemented responsive ability similar to <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a>.</p>\n<p><br></p>\n<h2>Location and layout of ECharts components</h2>\n\n\n<p>Most <em>component</em> and <em>series</em> follow two locating methods: </p>\n<p><br>\n<strong>left/right/top/bottom/width/height locating method:</strong></p>\n<p>Each of those six parameters can be <em>absolute value</em> or <em>percentage</em> or <em>location description</em>.</p>\n<ul>\n<li><p>Absolute value</p>\n<p> in browser pixels (px); in form of <code>number</code> (no unit); e.g.: <code>{left: 23, height: 400}</code>.</p>\n</li>\n<li><p>Percentage</p>\n<p> to the width and height of DOM container; in form of <code>string</code>; e.g.: <code>{right: '30%', bottom: '40%'}</code>.</p>\n</li>\n<li><p>Location Description</p>\n<ul>\n<li>can be set to <code>left: 'center'</code>, for horizontally centering.</li>\n<li>can be set to <code>top: 'middle'</code>, for vertically centering.</li>\n</ul>\n</li>\n</ul>\n<p>The concept of these six parameters is similar to that in CSS: </p>\n<ul>\n<li>left: distance to left border of DOM container.</li>\n<li>right: distance to right border of DOM container.</li>\n<li>top: distance to top border of DOM container.</li>\n<li>bottom: distance to bottom border of DOM container.</li>\n<li>width: width.</li>\n<li>height: height.</li>\n</ul>\n<p>Two out of the three horizontal parameters, <code>left</code>, <code>right</code>, <code>width</code>, are enough to determine the component location. For example, <code>left</code> and <code>right</code>, or <code>right</code> and <code>width</code> can both determine component location and size.\nThe same goes for vertical paramters <code>top</code>, <code>bottom</code> and <code>height</code>.</p>\n<p><br>\n<strong>Locating method of <code>center</code> / <code>radius</code>: </strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> an array in form of <code>[x, y]</code>, in which <code>x</code> and <code>y</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n</li>\n<li><p><code>radius</code></p>\n<p> an array in form of <code>[innerRadius, outerRadius]</code>, in which <code>innerRadius</code> and <code>outerRadius</code> can either be <em>absolute value</em> or <em>percentage</em>, as described above.</p>\n<p> Percentage location turns out to be very useful for responsive positioning.</p>\n</li>\n</ul>\n<p><br>\n<strong>Horizontal and vertical</strong></p>\n<p>Most of ECharts's long and narrow components (such as <code>legend</code>,<code>visualMap</code>,<code>dataZoom</code>,<code>timeline</code> and so on), provide option to set them to be horizontal or vertical. For example, long and narrow screen of mobile-end, vertical layout may be a more suitable choice, while horizontal may more suit for PC's wide screen.</p>\n<p>Setting of horizontal or vertical layout is usually with component or series's <code>orient</code> or <code>layout</code> option, which can be set to <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n<p><br>\n<strong>Compatibility with ECharts2: </strong></p>\n<p>Naming of <code>x/x2/y/y2</code> in ECharts2 is still compatible, as well as the newly added <code>left/right/top/bottom</code>. But <code>left/right/top/bottom</code> is recommended.</p>\n<p>To be compatible with ECharts2, there may be settings that seems to be odd, e.g.: <code>left: 'right'</code>, <code>left: 'left'</code>, <code>top: 'bottom'</code>, <code>top: 'top'</code>, which are equal to: <code>right: 0</code>, <code>left: 0</code>, <code>bottom: 0</code>, <code>top: 0</code>, in a more normal expression.</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> provides the ability to be responsive with container size.</p>\n<p>As shown in the following example, you may drag <strong>the circle in bottom-right corner</strong> to see the legend and series change layout position and method with container size. </p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>The following format should be followed if you need to set Media Query in option:</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // here defines base option\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // each rule of media query is defined here\n {\n query: {...}, // write rule here\n option: { // write options accordingly\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // the second rule\n option: { // the second option\n legend: {...},\n ...\n }\n },\n { // default with no rules,\n option: { // when all rules fail, use this option\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>In the above example, <code>baseOption</code> and every option in <code>media</code> are all <em>simple options</em>, which are regular options containing components and series. <code>baseOption</code> is always be used, while options of every will be merged with <code>chart.mergeOption()</code> when given <code>query</code> condition is satisfied with.</p>\n<p><strong>query: </strong></p>\n<p>A <code>query</code> is in the following format: </p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>Currently there are three supported attributes:<code>width</code>, <code>height</code>, <code>aspectRatio</code> (length-to-width ratio), each of which can add <code>min</code> or <code>max</code> as prefix. E.g., <code>minWidth: 200</code> stands for when width is greater than or equal to 200px. When two attributes are written together, it means <em>and</em> in Bool logic. For example, <code>{minWidth: 200, maxHeight: 300}</code> stands for when width is greater than or equal to 200px and height is smaller than or equal to 300px.</p>\n<p><strong>option: </strong></p>\n<p>Since option in <code>media</code> is <em>simple option</em>, technically speaking, you can write every option configuration item. But usually we only write those related to layout. Take part of the above query option as example:</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // when length-to-width ratio is less than 1\n },\n option: {\n legend: { // legend is placed in middle-bottom\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // horizontal layout of legend\n },\n series: [ // left and right layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // when container width is smaller than 500\n },\n option: {\n legend: {\n right: 10, // legend is placed in middle-right\n top: '15%',\n orient: 'vertical' // vertical layout\n },\n series: [ // top and bottom layout of two pie charts\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>Priority when multiple queries are satisfied: </strong></p>\n<p>Attention: When multiple <code>query</code> are satisfied at the same time, all of them will be merged with <code>mergeOption</code> and those are defined later will be merged later, thus provides them with higher priority.</p>\n<p><strong>Query by default: </strong></p>\n<p>If an item in <code>media</code> has no not <code>query</code>, then it means <em>default value</em>, which will be used when all other rules fail.</p>\n<p><strong>Pay attention when container size changes:</strong></p>\n<p>In many cases, container DOM node doesn't need to change size with user dragging. Instead, it may set to several sizes on varied ends.</p>\n<p>But if the container DOM node needs to change size with dragging, you need to pay attention to this: if certain configuration item appears in one <code>query option</code>, then it should also appeared in other <code>query option</code>, or it will not be able to return to the original state. (<code>left/right/top/bottom/width/height</code> are not restricted to this rule.)</p>\n<p><strong><code>media</code> in <em>composite option</em> does not support merge</strong></p>\n<p>When <code>chart.setOption(rawOption)</code> for the second, third, fourth, fifth, and etc. times, if <code>rawOption</code> is <code>composite option</code> (which means it contains <code>media</code> list), then, the new <code>rawOption.media</code> list will not merge with the old <code>media</code>. instead, it will simply replace the option. Of course, <code>rawOption.baseOption</code> will still merge with the old option normally.</p>\n<p><br>\nFinally, let's see an example combining with timeline:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n\n"},"Visual Map of Data":{"type":["*"],"description":"<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual tunnels.</p>\n<p>Every type of charts in ECharts has this built-in mapping procedure. For example, line charts map data into <em>lines</em>, bar charts map data into <em>length</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href=\"option.html#visualMap\" target=\"_blank\">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:<br>\n<code>symbol</code>, <code>symbolSize</code><br>\n<code>color</code>, <code>opacity</code>, <code>colorAlpha</code>, <br>\n<code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></p>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<p><br></p>\n<h2>Data and Dimension</h2>\n\n<p>Data are usually stored in <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of <code>dataItem</code>s. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {...}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {...}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ]\n}\n</code></pre>\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href=\"option.html#series-scatter\" target=\"_blank\">scatter charts</a> use radius to represent the third dimension.</p>\n<p><br></p>\n<h2>visualMap Component</h2>\n\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // can define multiple visualMap components at the same time\n { // the first visualMap component\n type: 'continuous', // defined as continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined as discrete visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">visualMapContinuous</a>：</p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">visualMapPiecewise</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>Piecewise visual map component has three types:</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>Equal division of continuous data: divide equally based on <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a>;</li>\n<li>User-defined division of continuous data: divide with range in <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a>;</li>\n<li>Discrete data (data in category type): divide with <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<strong>Configuration of visualMap mapping method</strong></p>\n<p>As we have introduced above, <code>visualMap</code> maps a certain dimension to a certain visual element, we can configure which dimension of the data (see in <a href=\"#visualMap.dimension\">visualMap.dimension</a>) to be mapped to which visual elements (see in <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>).</p>\n<p>Example A:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data, or value[3], is mapped\n seriesIndex: 4, // map with the fourth series\n inRange: { // visual configuration items in selected range\n color: ['blue', '#121122', 'red'], // defines color list of mapping\n // The largest value will be mapped to 'red',\n // and others will be interpolated\n symbolSize: [30, 100] // the smallest value will be mapped to size of 30,\n // the largest to 100,\n // and others will be interpolated\n },\n outOfRange: { // visual configuration items out of selected range\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>Example B:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // visual configuration items in selected range\n colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color\n // original color may be selected from global color palette,\n // which is not concerned by visualMap component\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>For more information, please refer to <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> and <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>.</p>\n"},"Events and Actions in ECharts":{"type":["*"],"description":"<p>User interactions trigger corresponding events in ECharts. Developers can listen to these events and handle accordingly through callback functions, e.g., redirecting to an address, popping out a dialog box, or drilling down data and so on.</p>\n<p>Binding events in ECharts 3 is though <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> method, same as in ECharts 2. But event names are much simpler than it is in 2. Event names in ECharts 3 are the same as DOM event names, in lowercases. Below is an example of binding clicking operation.</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // printing data name in console\n console.log(params.name);\n});\n</code></pre>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered with interaction components, such as triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> event when toggling legend (Notice here, that <code>'legendselected'</code> event will not be triggered when toggling legend), triggering <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> event when data zooming in some area.</p>\n<h2 id=\"mouse-events-handling\">Mouse Events Handling</h2>\n<p>ECharts support regular mouse events, which includes <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. Next let's see an example of opening Baidu search page when clicks a bar chart.</p>\n<pre><code class=\"lang-js\">// initialize ECharts instance based on prepared dom\nvar myChart = echarts.init(document.getElementById('main'));\n\n// data and configuration item of specific chart\nvar option = {\n xAxis: {\n data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]\n },\n yAxis: {},\n series: [{\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// use specified configuration item and data to show chart\nmyChart.setOption(option);\n// handle click event and redirect to corresponding Baidu search page\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>All types of mouse events have a common parameter called <code>params</code>, which is an object that contains data information of the clicked chart, whose format is as followed:</p>\n<pre><code class=\"lang-js\">{\n // component name of clicked component\n // e.g., 'series', 'markLine', 'markPoint', 'timeLine'\n componentType: string,\n // series type (useful when componentType is 'series')\n // e.g., 'line', 'bar', 'pie'\n seriesType: string,\n // series index in option.series (useful when componentType is 'series')\n seriesIndex: number,\n // series name (useful when componentType is 'series')\n seriesName: string,\n // data name, or category name\n name: string,\n // data index in input data array\n dataIndex: number,\n // raw input data item\n data: Object,\n // Some series, such as sankey or graph, maintains both nodeData and edgeData,\n // in which case, dataType is set to be 'node' or 'edge' to identify.\n // On the other hand, most other series have only one type of data,\n // where dataType is not needed.\n dataType: string,\n // input data value\n value: number|Array\n // color of component (useful when componentType is 'series')\n color: string\n}\n</code></pre>\n<p>How to know where the mouse clicked:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // clicked on markPoint\n if (params.seriesIndex === 5) {\n // clicked on a markPoint which belongs to a series indexed with 5\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked on an edge of the graph\n }\n else {\n // clicked on a node of the graph\n }\n }\n }\n});\n</code></pre>\n<p>Use <code>query</code> to call handler only on the graphic elements of the specified components:</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If <code>string</code>, the formatter can be 'mainType' or 'mainType.subType'. For example:</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // component index\n <mainType>Name: string // component name\n <mainType>Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // data item type, e.g.,\n // 'node' and 'edge' in graph.\n element: string // element name in custom series\n}\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n name: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // When the graphic elements in the series with name 'uuu' mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n // ...\n }, {\n // ...\n data: [\n {name: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // When the graphic elements of the data item with name 'xx' in the series with index 1 mouse overed, this method called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // When the nodes of the graph clicked, this method is called.\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // When the edges of the graph clicked, this method is called.\n});\n</code></pre>\n<p>For example:</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('click', {element: 'my_el'}, function () {\n // When the element with name 'my_el' clicked, this method called.\n});\n</code></pre>\n<p>You may update chart or show customized layer with information got from your own data warehouse, indexed from data name or series name of an object received from a callback function. Sample code is shown as followed:</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // present data distribution of a single bar through pie chart\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"interaction-events-with-components\">Interaction Events with Components</h2>\n<p>Basically all component interactions in ECharts trigger corresponding events. Frequently used events and corresponding parameters are listed in <a href=\"api.html#events\" target=\"_blank\">events</a>.</p>\n<p>Below is example that listens to a legend toggling:</p>\n<pre><code class=\"lang-js\">// legend toggling triggers legendselectchanged event only\nmyChart.on('legendselectchanged', function (params) {\n // obtain selecting status of clicked legend\n var isSelected = params.selected[params.name];\n // print in console\n console.log((isSelected ? 'select' : 'unselect') + 'legend' + params.name);\n // print all legend status\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"triggering-component-actions-through-code-in-echarts\">Triggering Component Actions through Code in ECharts</h2>\n<p>Actions like <code>'legendselectchanged'</code> mentioned above will be triggered by component interaction. Besides that, sometimes we need to trigger certain actions in our program, such as showing tooltip, or selecting legend.</p>\n<p>ECharts 2.x triggers actions through <code>myChart.component.tooltip.showTip</code>, whose entrance is deep and involves organization of inner components. On the other hand, ECharts 3 triggers actions through <code>myChart.dispatchAction({ type: '' })</code>, which manages all actions in a uniformed way, and may record user's event path when need.</p>\n<p>Frequently used actions and the parameters are listed in <a href=\"api.html#action\" target=\"_blank\">action</a>.</p>\n<p>Below displays how to highlight each sector of pie chart in turn through <code>dispatchAction</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"An Example: Implement Dragging":{"type":["*"],"description":"<p>This is a tiny example, introducing how to implement dragging of graphic elements in echarts. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p>\n<p><br></p>\n<h2>[ Part 1 ] Implement basic dragging</h2>\n\n<p>First of all, we create a basic <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">line chart (line series)</a>:</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n</code></pre>\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<pre><code class=\"lang-js\">// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>In the code above, API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> is used, which is the reversed process of <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>[ Part 2 ] Add tooltip component</h2>\n\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // Means disable default "show/hide rule".\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // Customize "show/hide rule", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>The API <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> is used to show/hide tooltip content, where actions <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a> and <a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a> is dispatched.</p>\n<p><br></p>\n<h2>[ Part 3 ] Full code</h2>\n\n<p>Full code is shown as follow:</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n"},"Custom Series":{"type":["*"],"description":"<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is a type of series, which enable develpers to customize graphic elements rendering and generate new types of chart.</p>\n<p>Why echarts supports <code>custom series</code>? There are endless chart types in the world of data visualization, which are not enumerable. Thus only most common used chart types are built-in supported in echarts. For other chart types, it is necessary to provide an approach to make new types of chart for developers. This approach should be as simple as possible, which had better not to bothered developers with some details of implementation, such as creating and deleting graphic elements, transition animation, tooltip supporting, working with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a> or <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#visualMap\" target=\"_blank\">visualMap</a>. Having considered the factors above, a solution <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom\" target=\"_blank\">custom series</a> is published.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p>Let's begin the tutorial.</p>\n<p><br></p>\n<h2>(I) The method <code>renderItem</code></h2>\n\n<p>The snippet of graphic elements rendering should be written in <code>renderItem</code> method my developers. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>In the rendering phase of echarts workflow, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is called respectively for each <code>dataItem</code> in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.data\" target=\"_blank\">series.data</a>. <code>renderItem</code> is responsible for build a group of definitions of graphic elements, including graphic type, size, location, style, etc. echarts will then build graphic elements according to those definitions. For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // This method will be called for each dataItem repectively.\n // Notice: it does not ensure that called according to the order\n // of `dataItem`.\n\n // Some processes, such as coordinate conversion.\n // `api.value(0)` is used to retrieve the value on the first\n // dimension in the current `dataItem`.\n var categoryIndex = api.value(0);\n // `api.coord(...)` is used to convert data values to pixel values,\n // will are necessary for graphic elements rendering.\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // `api.size(...)` is used to calculate the pixel size corresponding to\n // the a value range that the length is 1 on Y axis.\n var height = api.size([0, 1])[1] * 0.6;\n\n // The property `shape` incicates the location and size of thsi\n // element.\n // `echarts.graphic.clipRectByRect` is used for clipping the\n // rectangular when it overflow the bounding box of the current\n // coordinate system (cartesian).\n // If the rect is totally clipped, returns undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // position and location of the rectangular.\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // Bounding box of the current cooridinate system (cartesian).\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n })\n\n // Returns definitions for the current `dataItem`.\n return rectShape && {\n // 'rect' indicates that the graphic element is rectangular.\n // Can also be 'circle', 'sector', 'polygon', ...\n type: 'rect',\n shape: rectShape,\n // `api.style(...)` is used to obtain style settings, which\n // includes itemStyle settings in optino and the result of\n // visual mapping.\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // The first dataItem.\n [53, 31, 21, 56], // The second dataItem.\n [71, 33, 10, 20], // The third dataItem.\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：provides info about the current series (such as <code>seriesIndex</code>、<code>dataIndex</code>, etc.) and data (such as <code>dataIndex</code>, <code>dataIndexInside</code>, etc.) and coordinate system (such as location and size of bounding box of the current coordinate system)</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a> provides some methods to developers (such as <code>api.value()</code>, <code>api.coord()</code>).</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> method should return definitions of graphic elements for the current <code>dataItem</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p>Having <code>renderItem</code> provided, 90% of the work of creating custom series has been accomplished. The rest of this work is to refine and polish them.</p>\n<p><br></p>\n<h2>(II) Make the extent of axes fit the data</h2>\n\n<p>There is axes in some coordinate systems, such as <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#polar\" target=\"_blank\">polar</a>. The extent of an axis should fit the data automatically, otherwise the graphic elements would be overflow the bounding box of the coordinate system. So, for example, in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#grid\" target=\"_blank\">cartesian2d (grid)</a>, developers should specify that which dimensions correspond to <code>x</code> axis and which to <code>y</code> axis use the property <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // `dim1` and `dim2` correspond to `x` axis.\n x: [1, 2],\n // `dim0` corresponds to `y` axis.\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>(III) Set tooltip content</h2>\n\n<p>Of course <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> can be used to define the content in tooltip. But it is easier to do that by setting <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.encode\" target=\"_blank\">encode</a> and <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a>:</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // `dim2` and `dim3` will displayed in tooltip.\n tooltip: [2, 3]\n },\n // `dim2` is named as "Age" and `dim3` is named as "Satisfaction".\n dimensions: [null, null, 'Age', 'Satisfaction'],\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ],\n [ 53, 31, 21, 56 ],\n [ 71, 33, 10, 20 ],\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>Several other issues about <code>custom series</code> are introduced below.</p>\n<p><br></p>\n<h2>(IV) Shape clipping when overflow the coordinates area</h2>\n\n<p>When use <code>custom series</code> with <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0\n },\n data: [\n // dim0 dim1 dim2 dim3\n [ 12, 44, 55, 60 ], // The first dataItem.\n [ 53, 31, 21, 56 ], // The second dataItem.\n [ 71, 33, 10, 20 ], // The third dataItem.\n ...\n ]\n }]\n};\n</code></pre>\n<p>In the example above, <code>dim</code> and <code>dim2</code> corresponds to <code>x</code> axis, and the <code>dataZoom</code> component constrols the data window of <code>x</code> axis. If part of a <code>dataItem</code> is overflow the extent of <code>x</code> axis (the value on <code>dim1</code> is overflow and the value on <code>dim2</code> is not) while zooming, the <code>dataItem</code> will not be filtered if <code>dataZoom.filterMode = 'weakFilter'</code> set. Thus the <code>dataItem</code> can be still rendered (usually be partially rendered by using <code>echarts.graphic.clipRectByRect</code> to clip the exceeding part).\nSee the example mentioned above <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a>.</p>\n<p><br></p>\n<p><br></p>\n<h2>(V) About dataIndex</h2>\n\n\n<p>Developers had better notice that in <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> <code>dataIndexInside</code> and <code>dataIndex</code> is different:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#dataZoom\" target=\"_blank\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br></p>\n<h2>(VI) Event listener</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>(VII) Custom vector shapes</h2>\n\n\n<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> is supported, which enables to use shapes that are created in vector tool. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>, and examples: <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-calendar-icon\" target=\"_blank\">icons</a>, <a href=\"https://ecomfe.github.io/echarts-examples/public/index.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p><br></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More examples about custom series</a></strong></p>\n"},"Rich Text":{"type":["*"],"description":"<p>Rich text can be used in labels of series, axis or other components. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>More examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>Before v3.7, the style options was only able to applied to the whole label text block, and only color and font can be configured, which restricted the expressability of text descriptions.</p>\n<p>Since v3.7, rich text has been supported:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fregments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the begining, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text Fregment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Options about Text</strong></p>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fregment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fregment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fregment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fregment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fregment in <code>rich</code> property. For example, <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this fregment}'\n '{b|Style "b" is applied to this fregment}This fregment use default style{x|use style "x"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fregments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Basic Styles of Text, Text Block and Text Fragment</strong></p>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fregment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Position</strong></p>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href=\"option.html\" target=\"_blank\">option doc</a>.</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Label Rotation</strong></p>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p><a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> and<a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Layout and Alignment of Text Fregment</strong></p>\n<p>To understand the layout rule, every text fregment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fregment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fregment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>'\\n'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fregment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fregments. <code>lineHeight</code> of a text fregment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fregment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fregments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>'bottom'</code>: The bottom edge of the text fregment sticks to the bottom edge of the line.</li>\n<li><code>'top'</code>: The top edge of the text fregment sticks to the top edge of the line.</li>\n<li><code>'middle'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fregment can be placed in each line, where the horizontal position of text fregments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fregments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li>\n<li>Secondly, place text fregments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li>\n<li>Finally, the text fregments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fregment:</p>\n<ul>\n<li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fregment box.</li>\n<li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fregment box.</li>\n<li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fregment box.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>Effects: Icon, Horizontal Rule, Title Block, Simple Table</strong></p>\n<p>See example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n</code></pre>\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<pre><code class=\"lang-js\">// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>Simple table can be implemented by specify the same width to text fregments that are in the same column of different lines. See the <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">example</a> at the mentioned above.</p>\n"},"Server-side Rendering":{"type":["*"],"description":"<p>ECharts can be rendered at server-side. For example, the thumbnails in the <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>, <a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>, <a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>, <a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>, <a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"Render by Canvas or SVG":{"type":["*"],"description":"<p>Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of charts, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.</p>\n<p>ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v3.8</a> we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">renderer</a> as <code>'canvas'</code> or <code>'svg'</code> when initailizing a chart instance.</p>\n<blockquote>\n<p>That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">zender</a>, where they are implemented as a Canvas renderer and a alternative SVG renderer.</p>\n</blockquote>\n<h2 id=\"how-to-make-a-choice-\">How to make a choice?</h2>\n<p>Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=lines-bmap-effect\" target=\"_blank\">special visual effect</a>. But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better performance in rendering. Moreover, it never blurs when zooming the viewport of browser whereas Canvas may blurs. For example, we have tried to render line, bar, pie charts with the Canvas renderer and the SVG renderer, and recorded the frame rate during the the stage that the initial animation performed:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg-en&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.</p>\n<p>How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.</p>\n<ul>\n<li>If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.</li>\n<li>If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.<ul>\n<li>If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">liquidfill</a>, the SVG renderer probably gives a better performance.</li>\n<li>If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.</li>\n</ul>\n</li>\n</ul>\n<p>Therefore <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">feedback</a> of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.</p>\n<p>Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.</p>\n<h2 id=\"how-to-use-specify-a-renderer-\">How to use specify a renderer?</h2>\n<p>ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.</p>\n<ul>\n<li>In the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/download.html\" target=\"_blank\">pre-build</a> of ECharts, the SVG renderer has been included in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.common.min.js\" target=\"_blank\">common version</a> and <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.min.js\" target=\"_blank\">complete version</a>. But not in <a href=\"https://raw.githubusercontent.com/ecomfe/echarts/3.7.2/dist/echarts.simple.min.js\" target=\"_blank\">simple version</a>.</li>\n<li>If <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">build ECharts online</a>, the checkbox "SVG 渲染" should be checked.</li>\n<li>If <a href=\"http://echarts.baidu.com/tutorial.html#Create%20Custom%20Build%20of%20ECharts\" target=\"_blank\">build ECharts offline</a>, the module of the SVG renderer should be imported:</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>Then wen can specify renderer by <a href=\"https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init\" target=\"_blank\">parameter</a>:</p>\n<pre><code class=\"lang-js\">// Use the Canvas renderer (default).\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// which is equal to:\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n\n// Use the SVG renderer.\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"Supporting ARIA in Charts":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: 'Source of user access to a site',\n x: 'center'\n },\n series: [\n {\n Name: 'access source',\n type: 'pie',\n data: [\n { value: 335, name: 'direct access' },\n { value: 310, name: 'mail marketing' },\n { value: 234, name: 'union ad' },\n { value: 135, name: 'video ad' },\n { value: 1548, name: 'search engine' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.\n</code></pre><p>The default language is in Chinese, but you can configure it with templates.</p>\n<p>Please refer to <a href=\"option.html#aria\" target=\"_blank\">ARIA option</a> for more detail.</p>\n"}}}}
\ No newline at end of file
diff --git a/zh/documents/zh/tutorial.json b/zh/documents/zh/tutorial.json
index 693721c..18dc62d 100644
--- a/zh/documents/zh/tutorial.json
+++ b/zh/documents/zh/tutorial.json
@@ -1 +1 @@
-{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- 引入 ECharts 文件 -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code><body>\n <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- 引入 echarts.js -->\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>如果对文件体积有更严苛的要求，可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。自定义构建有几种方式：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang <language shortcut or file path></code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code><cwd>/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>'umb'</code>（默认）、<code>'amd'</code>、<code>'iife'</code>、<code>'cjs'</code>、<code>'es'</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from 'echarts/src/echarts';\n// 引入饼图。\nimport 'echarts/src/chart/pie';\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- 引入 lib/echarts.custom.min.js -->\n <script src="lib/echarts.custom.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // 绘制图表。\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from 'echarts/lib/echarts';\n// 引入折线图。\nimport 'echarts/lib/chart/line';\n// 引入提示框组件、标题组件、工具箱组件。\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// 用于压缩构建出的代码。\nimport uglify from 'rollup-plugin-uglify';\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // 入口代码文件，就是刚才所创建的文件。\n input: './line.js',\n plugins: [\n nodeResolve(),\n // ecLangPlugin({lang: 'en'}),\n // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n uglify()\n ],\n output: {\n // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n format: 'umd',\n // 输出 source map 便于调试。\n sourcemap: true,\n // 输出文件的路径。\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <!-- 为 echarts 准备一个具备大小（宽高）的Dom。 -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- 引入刚才构建好的文件。 -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require('echarts')</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>默认使用 <code>require('echarts')</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require('echarts/lib/echarts');\n// 引入柱状图\nrequire('echarts/lib/chart/bar');\n// 引入提示框和标题组件\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code>xAxis</code>，<code>yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n data:[\n {value:235, name:'视频广告'},\n {value:274, name:'联盟广告'},\n {value:310, name:'邮件营销'},\n {value:335, name:'直接访问'},\n {value:400, name:'搜索引擎'}\n ]\n }\n ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 阴影的大小\n shadowBlur: 200,\n // 阴影水平方向上的偏移\n shadowOffsetX: 0,\n // 阴影垂直方向上的偏移\n shadowOffsetY: 0,\n // 阴影颜色\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"#option.html#visualMap\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n // 不显示 visualMap 组件，只用于明暗度的映射\n show: false,\n // 映射的最小值为 80\n min: 80,\n // 映射的最大值为 600\n max: 600,\n inRange: {\n // 明暗度的范围是 0 到 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 "vintage"\n$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n // 全局调色盘。\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // 此系列自己的调色盘。\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // 此系列自己的调色盘。\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: []\n }]\n});\n\n// 异步加载数据\n$.get('data.json').done(function (data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n xAxis: {type: 'category'},\n // 声明一个 Y 轴，数值轴。\n yAxis: {},\n // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n {name: 'score'},\n // 可以简写为 string，表示维度名。\n 'amount',\n // 可以在 type 中指定维度类型。\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // 在系列中设置的 dimensions 会更优先采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>'number'</code>: 默认，表示普通数据。</li>\n<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // 将 "amount" 列映射到 X 轴。\n x: 'amount',\n // 将 "product" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code>encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>问：如何把第四列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n min: 2, // 需要给出数值范围，最小数值。\n max: 15, // 需要给出数值范围，最大数值。\n inRange: {\n // 气泡尺寸：5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // 按列的 key-value 形式。\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n // 序号为 0 的 dataset。\n source: [...],\n }, {\n // 序号为 1 的 dataset。\n source: [...]\n }, {\n // 序号为 2 的 dataset。\n source: [...]\n }],\n series: [{\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n }, {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code>dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> 组件是对 <code>数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p> 数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n series: [\n {\n type: 'scatter', // 这是个『散点图』\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code>option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n },\n { // 这个dataZoom组件，也控制x轴。\n type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p> 单位是浏览器像素（px），用 <code>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p> 表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: '30%', bottom: '40%'}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: 'center'</code>，表示水平居中。</li>\n<li>可以设置 <code>top: 'middle'</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> 是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p> 是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p> 在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>'horizontal'</code> 或者 <code>'vertical'</code>。</p>\n<p><br>\n<strong>于 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: 'right'</code>、<code>left: 'left'</code>、<code>top: 'bottom'</code>、<code>top: 'top'</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // 这里是基本的『原子option』。\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // 这里定义了 media query 的逐条规则。\n {\n query: {...}, // 这里写规则。\n option: { // 这里写此规则满足下的option。\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // 第二个规则。\n option: { // 第二个规则对应的option。\n legend: {...},\n ...\n }\n },\n { // 这条里没有写规则，表示『默认』，\n option: { // 即所有规则都不满足时，采纳这个option。\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>上面的例子中，<code>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // 当长宽比小于1时。\n },\n option: {\n legend: { // legend 放在底部中间。\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // legend 横向布局。\n },\n series: [ // 两个饼图左右布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // 当容器宽度小于 500 时。\n },\n option: {\n legend: {\n right: 10, // legend 放置在右侧中间。\n top: '15%',\n orient: 'vertical' // 纵向布局。\n },\n series: [ // 两个饼图上下布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: 2323, // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n 1212, // 也可以直接是 dataItem 的 value，这更常见。\n 2323, // 每个 value 都是『一维』的。\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，\n // 第二维度映射到y轴，\n // 第三维度映射到气泡半径（symbolSize）\n ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // 可以同时定义多个 visualMap 组件。\n { // 第一个 visualMap 组件\n type: 'continuous', // 定义为连续型 visualMap\n ...\n },\n { // 第二个 visualMap 组件\n type: 'piecewise', // 定义为分段型 visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: { // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，\n // 数据最小值映射到'blue'上，\n // 最大值映射到'red'上，\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围，\n // 数据最小值映射到30上，\n // 最大值映射到100上，\n // 其余自动线性计算。\n },\n outOfRange: { // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // 选中范围中的视觉配置\n colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"},"ECharts 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发<code>'legendselected'</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、<code>'dblclick'</code>、<code>'mousedown'</code>、<code>'mousemove'</code>、<code>'mouseup'</code>、<code>'mouseover'</code>、<code>'mouseout'</code>、<code>'globalout'</code>、<code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n // 当前点击的图形元素所属的组件名称，\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string,\n // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string,\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number,\n // 系列名称。当 componentType 为 'series' 时有意义。\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 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data，dataType 无意义。\n dataType: string,\n // 传入的数据值\n value: number|Array\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge（边）上。\n }\n else {\n // 点击到了 graph 的 node（节点）上。\n }\n }\n }\n});\n</code></pre>\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // 组件 index\n <mainType>Name: string // 组件 name\n <mainType>Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type，如关系图中的 'node', 'edge'\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: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。\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: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('mouseup', {element: 'my_el'}, function () {\n // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function (params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code>'legendselectchanged'</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富有交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data，重绘折线图。\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // 表示不使用默认的『显示』『隐藏』触发规则。\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>这里使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\n<p>总结一下，全部的代码如下：</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\"><script src="echarts.min.js"></script>\n<script>\n // ...\n</script>\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\"><div id="main" style="width=100%; height = 400px"></div>\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n visualMap: {\n show: false\n min: 0,\n max: 1000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]\n }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code>coordinateSystem: 'calendar',</code>和<code>calendar: { range: '2017' }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width:100%;height:400px;"></div>\n <script type="text/javascript">\n var myChart = echarts.init(document.getElementById('main'));\n\n // 模拟数据\n function getVirtulData(year) {\n year = year || '2017';\n var date = +echarts.number.parseDate(year + '-01-01');\n var end = +echarts.number.parseDate(year + '-12-31');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time <= end; time += dayTime) {\n data.push([\n echarts.format.formatTime('yyyy-MM-dd', time),\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n }\n var option = {\n visualMap: {\n show: false,\n min: 0,\n max: 10000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2017)\n }\n };\n myChart.setOption(option);\n </script>\n</body>\n</html>\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>'sunburst'</code> 的系列，并且以树形结构声明其 <code>data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa'\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }]\n }, {\n name: 'C',\n value: 3\n }]\n }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>'#aaa'</code>，将最内层的颜色设为蓝色 <code>'blue'</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>'red'</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa',\n itemStyle: {\n color: 'red'\n }\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }],\n itemStyle: {\n color: 'red'\n }\n }, {\n name: 'C',\n value: 3\n }],\n itemStyle: {\n color: '#aaa'\n },\n levels: [{\n // 留给数据下钻的节点属性\n }, {\n itemStyle: {\n color: 'blue'\n }\n }]\n }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code>false</code> 关闭；或者将其设为 <code>'link'</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code>'descendant'</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>'ancestor'</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>'self'</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>'none'</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p><code>highlightPolicy</code> 为 <code>'descendant'</code> 或 <code>'ancestor'</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n // （但是注意，并不一定是按照 data 的顺序调用）\n\n // 这里进行一些处理，例如，坐标转换。\n // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n var categoryIndex = api.value(0);\n // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n var height = api.size([0, 1])[1] * 0.6;\n\n // shape 属性描述了这个矩形的像素位置和大小。\n // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n // 如果矩形完全被剪掉，会返回 undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // 矩形的位置和大小。\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // 当前坐标系的包围盒。\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n // 这里返回为这个 dataItem 构建的图形元素定义。\n return rectShape && {\n // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。\n type: 'rect',\n shape: rectShape,\n // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n // option 中 itemStyle 的配置和视觉映射得到的颜色。\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // 这是第一个 dataItem\n [53, 31, 21, 56], // 这是第二个 dataItem\n [71, 33, 10, 20], // 这是第三个 dataItem\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: 'green', stroke: 'yellow'})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n // data 中『维度0』对应到 Y 轴\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // 表示『维度2』和『维度3』要显示到 tooltip 中。\n tooltip: [2, 3]\n },\n // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n dimensions: [null, null, '年龄', '满意度'],\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 'weakFilter'。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = 'weakFilter'</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // 用户指定的信息，可以在 event handler 访问到。\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>'\\n'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>'middle'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\"><script src="lib/echarts.min.js"></script>\n<script src="lib/echarts-gl.min.js"></script>\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from 'echarts';\nimport 'echarts-gl';\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n // \b需要注意的是我们不能跟 grid 一样省略 grid3D\n grid3D: {},\n // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: 'category'</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n var exponent = -(\n ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n );\n return amplitude * Math.pow(Math.E, exponent);\n }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i < 1000; i++) {\n // x, y 随机分布\n var x = Math.random() * 100 - 50;\n var y = Math.random() * 100 - 50;\n var z = gaussian(x, y);\n data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数\b\u001c据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n ...\n]\n</code></pre>\n<p>每一项都包含了<code>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 100 },\n series: [{\n type: 'scatter3D',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n["Income", "Life Expectancy", "Population", "Country", "Year"],\n[815, 34.05, 351014, "Australia", 1800],\n[1314, 39, 645526, "Canada", 1800],\n[985, 32, 321675013, "China", 1800],\n[864, 32.2, 345043, "Cuba", 1800],\n[1244, 36.5731262, 977662, "Finland", 1800],\n...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get('data/asset/data/life-expectancy-table.json', function (data) {\n myChart.setOption({\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5\n }\n ]\n })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {},\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'category'\n },\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Year',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {\n viewControl: {\n // 使用正交投影。\n projection: 'orthographic'\n }\n },\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'log'\n },\n zAxis3D: {},\n visualMap: {\n calculable: true,\n max: 100,\n // 维度的名字默认就是表头的属性名\n dimension: 'Life Expectancy',\n inRange: {\n color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n }\n },\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Population',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y <= 50; y++) {\n for (var x = -50; x <= 50; x++) {\n var z = gaussian(x, y);\n data.push([x, y, z]);\n }\n}\noption = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 60 },\n series: [{\n type: 'surface',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"},"在微信小程序中使用 ECharts":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://github.com/ecomfe/echarts-for-weixin/raw/master/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>'pages/bar/index'</code>。</p>\n<p><code>index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n "usingComponents": {\n "ec-canvas": "../../ec-canvas/ec-canvas"\n }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code>pages/bar/index.wxml</code> 中使用 <code><ec-canvas></code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code><ec-canvas></code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\"><view class="container">\n <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>\n</view>\n</code></pre>\n<p>其中 <code>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height\n });\n canvas.setChart(chart);\n\n var option = {\n ...\n };\n chart.setOption(option);\n return chart;\n}\n\nPage({\n data: {\n ec: {\n onInit: initChart\n }\n }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"}}}}
\ No newline at end of file
+{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <!-- 引入 ECharts 文件 -->\n <script src="echarts.min.js"></script>\n</head>\n</html>\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code><body>\n <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <!-- 引入 echarts.js -->\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <!-- 为ECharts准备一个具备大小（宽高）的Dom -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n // 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n</body>\n</html>\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"/zh/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>我们也可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。可以用这几种方式自定义构建：</p>\n<ul>\n<li><a href=\"/zh/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from 'echarts';\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts')\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang <language shortcut or file path></code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code><cwd>/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>'umb'</code>（默认）、<code>'amd'</code>、<code>'iife'</code>、<code>'cjs'</code>、<code>'es'</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from 'echarts/src/echarts';\n// 引入饼图。\nimport 'echarts/src/chart/pie';\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n <!-- 引入 lib/echarts.custom.min.js -->\n <script src="lib/echarts.custom.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script>\n // 绘制图表。\n echarts.init(document.getElementById('main')).setOption({\n series: {\n type: 'pie',\n data: [\n {name: 'A', value: 1212},\n {name: 'B', value: 2323},\n {name: 'C', value: 1919}\n ]\n }\n });\n </script>\n</body>\n</html>\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from 'echarts/lib/echarts';\n// 引入折线图。\nimport 'echarts/lib/chart/line';\n// 引入提示框组件、标题组件、工具箱组件。\nimport 'echarts/lib/component/tooltip';\nimport 'echarts/lib/component/title';\nimport 'echarts/lib/component/toolbox';\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById('main')).setOption({\n title: {text: 'Line Chart'},\n tooltip: {},\n toolbox: {\n feature: {\n dataView: {},\n saveAsImage: {\n pixelRatio: 2\n },\n restore: {}\n }\n },\n xAxis: {},\n yAxis: {},\n series: [{\n type: 'line',\n smooth: true,\n data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import 'echarts/lib/chart/line';` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from 'rollup-plugin-node-resolve';\n// 用于压缩构建出的代码。\nimport uglify from 'rollup-plugin-uglify';\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang';\n\nexport default {\n name: 'myProject',\n // 入口代码文件，就是刚才所创建的文件。\n input: './line.js',\n plugins: [\n nodeResolve(),\n // ecLangPlugin({lang: 'en'}),\n // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n uglify()\n ],\n output: {\n // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n format: 'umd',\n // 输出 source map 便于调试。\n sourcemap: true,\n // 输出文件的路径。\n file: 'lib/line.min.js'\n }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>myProject</title>\n</head>\n<body>\n <!-- 为 echarts 准备一个具备大小（宽高）的Dom。 -->\n <div id="main" style="width: 600px;height:400px;"></div>\n <!-- 引入刚才构建好的文件。 -->\n <script src="lib/line.min.js"></script>\n</body>\n</html>\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require('echarts')</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require('echarts');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>默认使用 <code>require('echarts')</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require('echarts/lib/echarts');\n// 引入柱状图\nrequire('echarts/lib/chart/bar');\n// 引入提示框和标题组件\nrequire('echarts/lib/component/tooltip');\nrequire('echarts/lib/component/title');\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n});\n</code></pre>\n<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code>xAxis</code>，<code>yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n series : [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n data:[\n {value:235, name:'视频广告'},\n {value:274, name:'联盟广告'},\n {value:310, name:'邮件营销'},\n {value:335, name:'直接访问'},\n {value:400, name:'搜索引擎'}\n ]\n }\n ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: 'angle'\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 阴影的大小\n shadowBlur: 200,\n // 阴影水平方向上的偏移\n shadowOffsetX: 0,\n // 阴影垂直方向上的偏移\n shadowOffsetY: 0,\n // 阴影颜色\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n emphasis: {\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n backgroundColor: '#2c343c'\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n textStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n lineStyle: {\n color: 'rgba(255, 255, 255, 0.3)'\n }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n // 设置扇形的颜色\n color: '#c23531',\n shadowBlur: 200,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n value:400,\n name:'搜索引擎',\n itemStyle: {\n color: '#c23531'\n }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"#option.html#visualMap\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n // 不显示 visualMap 组件，只用于明暗度的映射\n show: false,\n // 映射的最小值为 80\n min: 80,\n // 映射的最大值为 600\n max: 600,\n inRange: {\n // 明暗度的范围是 0 到 1\n colorLightness: [0, 1]\n }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'light');\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, 'dark');\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"http://echarts.baidu.com/theme-builder/\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 "vintage"\n$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON))\n var chart = echarts.init(dom, 'vintage');\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n // 全局调色盘。\n color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],\n\n series: [{\n type: 'bar',\n // 此系列自己的调色盘。\n color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],\n ...\n }, {\n type: 'pie',\n // 此系列自己的调色盘。\n color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],\n ...\n }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function (data) {\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data:['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: []\n }]\n});\n\n// 异步加载数据\n$.get('data.json').done(function (data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [{\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }]\n });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option: {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {}\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n xAxis: {type: 'category'},\n // 声明一个 Y 轴，数值轴。\n yAxis: {},\n // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n },\n xAxis: {type: 'category'},\n yAxis: {},\n series: [\n {type: 'bar'},\n {type: 'bar'},\n {type: 'bar'}\n ]\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n {type: 'category', gridIndex: 0},\n {type: 'category', gridIndex: 1}\n ],\n yAxis: [\n {gridIndex: 0},\n {gridIndex: 1}\n ],\n grid: [\n {bottom: '55%'},\n {top: '55%'}\n ],\n series: [\n // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n {type: 'bar', seriesLayoutBy: 'row'},\n // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},\n {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}\n ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n dataset: {\n dimensions: [\n {name: 'score'},\n // 可以简写为 string，表示维度名。\n 'amount',\n // 可以在 type 中指定维度类型。\n {name: 'product', type: 'ordinal'}\n ],\n source: [...]\n },\n ...\n};\n\nvar option2 = {\n dataset: {\n source: [...]\n },\n series: {\n type: 'line',\n // 在系列中设置的 dimensions 会更优先采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n {name: 'product', type: 'ordinal'}\n ]\n },\n ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>'number'</code>: 默认，表示普通数据。</li>\n<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: {type: 'category'},\n series: [\n {\n type: 'bar',\n encode: {\n // 将 "amount" 列映射到 X 轴。\n x: 'amount',\n // 将 "product" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code>encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n encode: {x: 2, y: 4},\n ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {x: 2, y: 4},\n seriesLayoutBy: 'row',\n ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'\n }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n encode: {\n tooltip: [1, 2]\n ...\n },\n ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n}\n</code></pre>\n<p>问：如何把第四列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n min: 2, // 需要给出数值范围，最小数值。\n max: 15, // 需要给出数值范围，最大数值。\n inRange: {\n // 气泡尺寸：5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n source: [\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n ]\n}, {\n // 按列的 key-value 形式。\n source: {\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n }\n}]\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n dataset: [{\n // 序号为 0 的 dataset。\n source: [...],\n }, {\n // 序号为 1 的 dataset。\n source: [...]\n }, {\n // 序号为 2 的 dataset。\n source: [...]\n }],\n series: [{\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n }, {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }]\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code>dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n xAxis: {\n type: 'category'\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [{\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n }, {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n }, {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code>dataZoom</code> 组件是对 <code>数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p> 数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n },\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n series: [\n {\n type: 'scatter', // 这是个『散点图』\n itemStyle: {\n opacity: 0.8\n },\n symbolSize: function (val) {\n return val[2] * 40;\n },\n data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]\n }\n ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code>option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n { // 这个dataZoom组件，默认控制x轴。\n type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n },\n { // 这个dataZoom组件，也控制x轴。\n type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n start: 10, // 左边在 10% 的位置。\n end: 60 // 右边在 60% 的位置。\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n ...,\n dataZoom: [\n {\n type: 'slider',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'inside',\n xAxisIndex: 0,\n start: 10,\n end: 60\n },\n {\n type: 'slider',\n yAxisIndex: 0,\n start: 30,\n end: 80\n },\n {\n type: 'inside',\n yAxisIndex: 0,\n start: 30,\n end: 80\n }\n ],\n ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p> 单位是浏览器像素（px），用 <code>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p> 表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: '30%', bottom: '40%'}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: 'center'</code>，表示水平居中。</li>\n<li>可以设置 <code>top: 'middle'</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p> 是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p> 是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p> 在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>'horizontal'</code> 或者 <code>'vertical'</code>。</p>\n<p><br>\n<strong>与 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: 'right'</code>、<code>left: 'left'</code>、<code>top: 'bottom'</code>、<code>top: 'top'</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n baseOption: { // 这里是基本的『原子option』。\n title: {...},\n legend: {...},\n series: [{...}, {...}, ...],\n ...\n },\n media: [ // 这里定义了 media query 的逐条规则。\n {\n query: {...}, // 这里写规则。\n option: { // 这里写此规则满足下的option。\n legend: {...},\n ...\n }\n },\n {\n query: {...}, // 第二个规则。\n option: { // 第二个规则对应的option。\n legend: {...},\n ...\n }\n },\n { // 这条里没有写规则，表示『默认』，\n option: { // 即所有规则都不满足时，采纳这个option。\n legend: {...},\n ...\n }\n }\n ]\n};\n</code></pre>\n<p>上面的例子中，<code>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n minWidth: 200,\n maxHeight: 300,\n minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n ...,\n {\n query: {\n maxAspectRatio: 1 // 当长宽比小于1时。\n },\n option: {\n legend: { // legend 放在底部中间。\n right: 'center',\n bottom: 0,\n orient: 'horizontal' // legend 横向布局。\n },\n series: [ // 两个饼图左右布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '70%']\n }\n ]\n }\n },\n {\n query: {\n maxWidth: 500 // 当容器宽度小于 500 时。\n },\n option: {\n legend: {\n right: 10, // legend 放置在右侧中间。\n top: '15%',\n orient: 'vertical' // 纵向布局。\n },\n series: [ // 两个饼图上下布局。\n {\n radius: [20, '50%'],\n center: ['50%', '30%']\n },\n {\n radius: [30, '50%'],\n center: ['50%', '75%']\n }\n ]\n }\n },\n ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: 2323, // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n 1212, // 也可以直接是 dataItem 的 value，这更常见。\n 2323, // 每个 value 都是『一维』的。\n 4343,\n 3434\n ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n data: [\n { // 这里每一个项就是数据项（dataItem）\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）\n itemStyle: {...}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴，\n // 第二维度映射到y轴，\n // 第三维度映射到气泡半径（symbolSize）\n ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [ // 可以同时定义多个 visualMap 组件。\n { // 第一个 visualMap 组件\n type: 'continuous', // 定义为连续型 visualMap\n ...\n },\n { // 第二个 visualMap 组件\n type: 'piecewise', // 定义为分段型 visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code>visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n type: 'piecewise'\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度（即 value[3]）被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: { // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，\n // 数据最小值映射到'blue'上，\n // 最大值映射到'red'上，\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围，\n // 数据最小值映射到30上，\n // 最大值映射到100上，\n // 其余自动线性计算。\n },\n outOfRange: { // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n },\n ...\n ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n {\n ...,\n inRange: { // 选中范围中的视觉配置\n colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n symbolSize: [30, 100]\n },\n ...\n },\n ...\n ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"},"ECharts 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发<code>'legendselected'</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">'datazoom'</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、<code>'dblclick'</code>、<code>'mousedown'</code>、<code>'mousemove'</code>、<code>'mouseup'</code>、<code>'mouseover'</code>、<code>'mouseout'</code>、<code>'globalout'</code>、<code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]\n },\n yAxis: {},\n series: [{\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function (params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n // 当前点击的图形元素所属的组件名称，\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string,\n // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string,\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number,\n // 系列名称。当 componentType 为 'series' 时有意义。\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 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data，dataType 无意义。\n dataType: string,\n // 传入的数据值\n value: number|Array\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n }\n else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge（边）上。\n }\n else {\n // 点击到了 graph 的 node（节点）上。\n }\n }\n }\n});\n</code></pre>\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>\n<pre><code class=\"lang-js\">chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n</code></pre>\n<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n <mainType>Index: number // 组件 index\n <mainType>Name: string // 组件 name\n <mainType>Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type，如关系图中的 'node', 'edge'\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: 'uuu'\n // ...\n }]\n});\nchart.on('mouseover', {seriesName: 'uuu'}, function () {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。\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: 'xx', value: 121},\n {name: 'yy', value: 33}\n ]\n }]\n});\nchart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: [{\n type: 'graph',\n nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],\n edges: [{source: 0, target: 1}]\n }]\n});\nchart.on('click', {dataType: 'node'}, function () {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', {dataType: 'edge'}, function () {\n // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'group',\n children: [{\n type: 'circle',\n name: 'my_el',\n // ...\n }, {\n // ...\n }]\n }\n },\n data: [[12, 33]]\n }\n})\nchart.on('mouseup', {element: 'my_el'}, function () {\n // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on('click', function (parmas) {\n $.get('detail?q=' + params.name, function (detail) {\n myChart.setOption({\n series: [{\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }]\n });\n });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function (params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code>'legendselectchanged'</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"http://echarts.baidu.com/option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中，第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data，重绘折线图。\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener('resize', function () {\n // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n\n</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n ...,\n tooltip: {\n // 表示不使用默认的『显示』『隐藏』触发规则。\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n ...,\n // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n</code></pre>\n<p>这里使用了 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\n<p>总结一下，全部的代码如下：</p>\n<pre><code><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width: 600px;height:400px;"></div>\n <script type="text/javascript">\n\n var symbolSize = 20;\n var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n var myChart = echarts.init(document.getElementById('main'));\n\n myChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function (params) {\n return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);\n }\n },\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: {onZero: false}\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: {onZero: false}\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize,\n data: data\n }\n ],\n });\n\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: {\n r: symbolSize / 2\n },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n });\n\n window.addEventListener('resize', function () {\n myChart.setOption({\n graphic: echarts.util.map(data, function (item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n });\n\n function showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n }\n\n function hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n }\n\n function onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [{\n id: 'a',\n data: data\n }]\n });\n }\n\n</script>\n</body>\n</html>\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\"><script src="echarts.min.js"></script>\n<script>\n // ...\n</script>\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\"><div id="main" style="width=100%; height = 400px"></div>\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById('main'));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n visualMap: {\n show: false\n min: 0,\n max: 1000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]\n }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code>coordinateSystem: 'calendar',</code>和<code>calendar: { range: '2017' }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\"><!DOCTYPE html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>ECharts</title>\n <script src="echarts.min.js"></script>\n</head>\n<body>\n <div id="main" style="width:100%;height:400px;"></div>\n <script type="text/javascript">\n var myChart = echarts.init(document.getElementById('main'));\n\n // 模拟数据\n function getVirtulData(year) {\n year = year || '2017';\n var date = +echarts.number.parseDate(year + '-01-01');\n var end = +echarts.number.parseDate(year + '-12-31');\n var dayTime = 3600 * 24 * 1000;\n var data = [];\n for (var time = date; time <= end; time += dayTime) {\n data.push([\n echarts.format.formatTime('yyyy-MM-dd', time),\n Math.floor(Math.random() * 10000)\n ]);\n }\n return data;\n }\n var option = {\n visualMap: {\n show: false,\n min: 0,\n max: 10000\n },\n calendar: {\n range: '2017'\n },\n series: {\n type: 'heatmap',\n coordinateSystem: 'calendar',\n data: getVirtulData(2017)\n }\n };\n myChart.setOption(option);\n </script>\n</body>\n</html>\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>'sunburst'</code> 的系列，并且以树形结构声明其 <code>data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa'\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }]\n }, {\n name: 'C',\n value: 3\n }]\n }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>'#aaa'</code>，将最内层的颜色设为蓝色 <code>'blue'</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>'red'</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n series: {\n type: 'sunburst',\n data: [{\n name: 'A',\n value: 10,\n children: [{\n value: 3,\n name: 'Aa',\n itemStyle: {\n color: 'red'\n }\n }, {\n value: 5,\n name: 'Ab'\n }]\n }, {\n name: 'B',\n children: [{\n name: 'Ba',\n value: 4\n }, {\n name: 'Bb',\n value: 2\n }],\n itemStyle: {\n color: 'red'\n }\n }, {\n name: 'C',\n value: 3\n }],\n itemStyle: {\n color: '#aaa'\n },\n levels: [{\n // 留给数据下钻的节点属性\n }, {\n itemStyle: {\n color: 'blue'\n }\n }]\n }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code>false</code> 关闭；或者将其设为 <code>'link'</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code>'descendant'</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>'ancestor'</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>'self'</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>'none'</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p><code>highlightPolicy</code> 为 <code>'descendant'</code> 或 <code>'ancestor'</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // ...\n },\n data: data\n }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n // （但是注意，并不一定是按照 data 的顺序调用）\n\n // 这里进行一些处理，例如，坐标转换。\n // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n var categoryIndex = api.value(0);\n // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n var startPoint = api.coord([api.value(1), categoryIndex]);\n var endPoint = api.coord([api.value(2), categoryIndex]);\n // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n var height = api.size([0, 1])[1] * 0.6;\n\n // shape 属性描述了这个矩形的像素位置和大小。\n // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n // 如果矩形完全被剪掉，会返回 undefined.\n var rectShape = echarts.graphic.clipRectByRect({\n // 矩形的位置和大小。\n x: startPoint[0],\n y: startPoint[1] - height / 2,\n width: endPoint[0] - startPoint[0],\n height: height\n }, {\n // 当前坐标系的包围盒。\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n // 这里返回为这个 dataItem 构建的图形元素定义。\n return rectShape && {\n // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。\n type: 'rect',\n shape: rectShape,\n // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n // option 中 itemStyle 的配置和视觉映射得到的颜色。\n style: api.style()\n };\n },\n data: [\n [12, 44, 55, 60], // 这是第一个 dataItem\n [53, 31, 21, 56], // 这是第二个 dataItem\n [71, 33, 10, 20], // 这是第三个 dataItem\n ...\n ]\n }]\n}\n</code></pre>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: 'green', stroke: 'yellow'})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n // data 中『维度0』对应到 Y 轴\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [1, 2],\n y: 0,\n // 表示『维度2』和『维度3』要显示到 tooltip 中。\n tooltip: [2, 3]\n },\n // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n dimensions: [null, null, '年龄', '满意度'],\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 'weakFilter'。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataZoom: {\n xAxisIndex: 0,\n filterMode: 'weakFilter'\n },\n series: [{\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n // data 中『维度1』和『维度2』对应到 X 轴\n x: [1, 2],\n y: 0\n },\n data: [\n // 维度0 维度1 维度2 维度3\n [ 12, 44, 55, 60 ], // 这是第一个 dataItem\n [ 53, 31, 21, 56 ], // 这是第二个 dataItem\n [ 71, 33, 10, 20 ], // 这是第三个 dataItem\n ...\n ]\n }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = 'weakFilter'</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // 用户指定的信息，可以在 event handler 访问到。\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。\n console.log(params.info);\n});\n</code></pre>\n<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&edit=1&reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&edit=1&reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&edit=1&reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置：\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置：\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>'\\n'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>'middle'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。\n // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n</code></pre>\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import 'zrender/lib/svg/svg';\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: 'canvas'});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: 'svg'});\n</code></pre>\n"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是：{title}。'</code>，则如果包含标题 <code>'价格分布图'</code>，这部分的描述为 <code>'图表的标题是：价格分布图。'</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\"><script src="lib/echarts.min.js"></script>\n<script src="lib/echarts-gl.min.js"></script>\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from 'echarts';\nimport 'echarts-gl';\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n // \b需要注意的是我们不能跟 grid 一样省略 grid3D\n grid3D: {},\n // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: 'category'</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n var exponent = -(\n ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n );\n return amplitude * Math.pow(Math.E, exponent);\n }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i < 1000; i++) {\n // x, y 随机分布\n var x = Math.random() * 100 - 50;\n var y = Math.random() * 100 - 50;\n var z = gaussian(x, y);\n data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数\b\u001c据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n ...\n]\n</code></pre>\n<p>每一项都包含了<code>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 100 },\n series: [{\n type: 'scatter3D',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n["Income", "Life Expectancy", "Population", "Country", "Year"],\n[815, 34.05, 351014, "Australia", 1800],\n[1314, 39, 645526, "Canada", 1800],\n[985, 32, 321675013, "China", 1800],\n[864, 32.2, 345043, "Cuba", 1800],\n[1244, 36.5731262, 977662, "Finland", 1800],\n...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get('data/asset/data/life-expectancy-table.json', function (data) {\n myChart.setOption({\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5\n }\n ]\n })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {},\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'category'\n },\n zAxis3D: {},\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 2.5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Year',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n grid3D: {\n viewControl: {\n // 使用正交投影。\n projection: 'orthographic'\n }\n },\n xAxis3D: {\n // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。\n type: 'category'\n },\n yAxis3D: {\n type: 'log'\n },\n zAxis3D: {},\n visualMap: {\n calculable: true,\n max: 100,\n // 维度的名字默认就是表头的属性名\n dimension: 'Life Expectancy',\n inRange: {\n color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n }\n },\n dataset: {\n source: data\n },\n series: [\n {\n type: 'scatter3D',\n symbolSize: 5,\n encode: {\n // 维度的名字默认就是表头的属性名\n x: 'Country',\n y: 'Population',\n z: 'Income',\n tooltip: [0, 1, 2, 3, 4]\n }\n }\n ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y <= 50; y++) {\n for (var x = -50; x <= 50; x++) {\n var z = gaussian(x, y);\n data.push([x, y, z]);\n }\n}\noption = {\n grid3D: {},\n xAxis3D: {},\n yAxis3D: {},\n zAxis3D: { max: 60 },\n series: [{\n type: 'surface',\n data: data\n }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"},"在微信小程序中使用 ECharts":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://github.com/ecomfe/echarts-for-weixin/raw/master/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>'pages/bar/index'</code>。</p>\n<p><code>index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n "usingComponents": {\n "ec-canvas": "../../ec-canvas/ec-canvas"\n }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code>pages/bar/index.wxml</code> 中使用 <code><ec-canvas></code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code><ec-canvas></code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\"><view class="container">\n <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>\n</view>\n</code></pre>\n<p>其中 <code>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height\n });\n canvas.setChart(chart);\n\n var option = {\n ...\n };\n chart.setOption(option);\n return chart;\n}\n\nPage({\n data: {\n ec: {\n onInit: initChart\n }\n }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"}}}}
\ No newline at end of file
diff --git a/zh/download-extension.html b/zh/download-extension.html
index 8cd5485..9978abc 100644
--- a/zh/download-extension.html
+++ b/zh/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/download-map.html b/zh/download-map.html
index e6b5cc5..4e6e9cc 100644
--- a/zh/download-map.html
+++ b/zh/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/download-theme.html b/zh/download-theme.html
index 783d0e0..e1dbda9 100644
--- a/zh/download-theme.html
+++ b/zh/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/download.html b/zh/download.html
index 26707a1..40210a5 100644
--- a/zh/download.html
+++ b/zh/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>下载 - Apache ECharts (incubating)</title><script src="vendors/sweetalert.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一：从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法二：下载发布版本的编译产物，或下载源代码</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意：</strong>如果从镜像网站下载，请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话，建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络（web of trust）</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法三：选择需要的模块，在线定制下载</h3><a href="builder.html" class="btn btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div><div class="d-section-gl d-section"><h2>下载 ECharts GL 1.1.1</h2><p>ECharts GL 是 WebGL 的扩展包，提供了丰富的三维可视化组件以及常规图表的性能增强。</p><h4>选择需要的版本 <span class="warn">注：开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。</span></h4><div class="list-wrap row"><div class="col-xs-6 col-sm-3 col-sm-offset-3"><a target="_blank" href="dist/echarts-gl.min.js"><div class="circle-wrap"><span class="mode">压缩版</span><span class="size">637 KB</span></div></a></div><div class="col-xs-6 col-sm-3"><a target="_blank" href="dist/echarts-gl.js"><div class="circle-wrap"><span class="mode">源代码</span><span class="size">1.74 MB</span></div></a></div></div><a href="https://echarts.baidu.com/option-gl.html" class="btn btn-thirdary btn-two">查看 GL 文档</a><a href="https://echarts.baidu.com/examples.html#chart-type-globe" class="btn btn-thirdary btn-two">查看 GL 实例</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="js/log.js"></script><script src="js/download.js?_v_=1571170595532"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一：从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法二：下载发布版本的编译产物，或下载源代码</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意：</strong>如果从镜像网站下载，请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话，建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络（web of trust）</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法三：选择需要的模块，在线定制下载</h3><a href="builder.html" class="btn btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div><div class="d-section-gl d-section"><h2>下载 ECharts GL 1.1.1</h2><p>ECharts GL 是 WebGL 的扩展包，提供了丰富的三维可视化组件以及常规图表的性能增强。</p><h4>选择需要的版本 <span class="warn">注：开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。</span></h4><div class="list-wrap row"><div class="col-xs-6 col-sm-3 col-sm-offset-3"><a target="_blank" href="dist/echarts-gl.min.js"><div class="circle-wrap"><span class="mode">压缩版</span><span class="size">637 KB</span></div></a></div><div class="col-xs-6 col-sm-3"><a target="_blank" href="dist/echarts-gl.js"><div class="circle-wrap"><span class="mode">源代码</span><span class="size">1.74 MB</span></div></a></div></div><a href="https://echarts.baidu.com/option-gl.html" class="btn btn-thirdary btn-two">查看 GL 文档</a><a href="https://echarts.baidu.com/examples.html#chart-type-globe" class="btn btn-thirdary btn-two">查看 GL 实例</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="js/log.js"></script><script src="js/download.js?_v_=1571425310596"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
$('.download-echarts').click(function (e) {
var el = document.createElement('div');
el.innerHTML = '<div class="download-note"><i class="note-icon"><img src="./images/note.svg" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities. <br /> 当您在研发项目，研究论文，技术报告，新闻报告，书籍，演示文稿，教学，专利等中使用 ECharts 时，请引用以下论文。</div>\
diff --git a/zh/download3.html b/zh/download3.html
index 848ea04..e727580 100644
--- a/zh/download3.html
+++ b/zh/download3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>下载 - Apache ECharts (incubating)</title><script src="vendors/sweetalert.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一：从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法二：下载发布版本的编译产物，或下载源代码</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意：</strong>如果从镜像网站下载，请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话，建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络（web of trust）</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法三：选择需要的模块，在线定制下载</h3><a href="builder3.html" class="btn btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div><div class="d-section-gl d-section"><h2>下载 ECharts GL 1.1.1</h2><p>ECharts GL 是 WebGL 的扩展包，提供了丰富的三维可视化组件以及常规图表的性能增强。</p><h4>选择需要的版本 <span class="warn">注：开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。</span></h4><div class="list-wrap row"><div class="col-xs-6 col-sm-3 col-sm-offset-3"><a target="_blank" href="dist/echarts3/echarts-gl.min.js"><div class="circle-wrap"><span class="mode">压缩版</span><span class="size">637 KB</span></div></a></div><div class="col-xs-6 col-sm-3"><a target="_blank" href="dist/echarts3/echarts-gl.js"><div class="circle-wrap"><span class="mode">源代码</span><span class="size">1.74 MB</span></div></a></div></div><a href="https://echarts.baidu.com/option-gl.html" class="btn btn-thirdary btn-two">查看 GL 文档</a><a href="https://echarts.baidu.com/examples.html#chart-type-globe" class="btn btn-thirdary btn-two">查看 GL 实例</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="js/log.js"></script><script src="js/download.js?_v_=1571170595532"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="page-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一：从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法二：下载发布版本的编译产物，或下载源代码</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意：</strong>如果从镜像网站下载，请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话，建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络（web of trust）</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/incubator/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-incubating-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-incubating-src.zip</li><li>从 <a href="https://www.apache.org/dist/incubator/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-incubating-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-incubating-src.zip</li></ol><h4>License</h4><p>Apache ECharts (incubating) 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法三：选择需要的模块，在线定制下载</h3><a href="builder3.html" class="btn btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下载后……</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div><div class="d-section-gl d-section"><h2>下载 ECharts GL 1.1.1</h2><p>ECharts GL 是 WebGL 的扩展包，提供了丰富的三维可视化组件以及常规图表的性能增强。</p><h4>选择需要的版本 <span class="warn">注：开发环境建议选择源代码版本，该版本包含了常见的警告和错误提示。</span></h4><div class="list-wrap row"><div class="col-xs-6 col-sm-3 col-sm-offset-3"><a target="_blank" href="dist/echarts3/echarts-gl.min.js"><div class="circle-wrap"><span class="mode">压缩版</span><span class="size">637 KB</span></div></a></div><div class="col-xs-6 col-sm-3"><a target="_blank" href="dist/echarts3/echarts-gl.js"><div class="circle-wrap"><span class="mode">源代码</span><span class="size">1.74 MB</span></div></a></div></div><a href="https://echarts.baidu.com/option-gl.html" class="btn btn-thirdary btn-two">查看 GL 文档</a><a href="https://echarts.baidu.com/examples.html#chart-type-globe" class="btn btn-thirdary btn-two">查看 GL 实例</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="js/log.js"></script><script src="js/download.js?_v_=1571425310596"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
$('.download-echarts').click(function (e) {
var el = document.createElement('div');
el.innerHTML = '<div class="download-note"><i class="note-icon"><img src="./images/note.svg" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities. <br /> 当您在研发项目，研究论文，技术报告，新闻报告，书籍，演示文稿，教学，专利等中使用 ECharts 时，请引用以下论文。</div>\
diff --git a/zh/examples.html b/zh/examples.html
index 0a6e157..e3176c7 100644
--- a/zh/examples.html
+++ b/zh/examples.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/faq.html b/zh/faq.html
index 90a3b6a..41adc54 100644
--- a/zh/faq.html
+++ b/zh/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/feature.html b/zh/feature.html
index ffe812c..0f202c6 100644
--- a/zh/feature.html
+++ b/zh/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/index.html b/zh/index.html
index 34dc0e5..ebee9ab 100644
--- a/zh/index.html
+++ b/zh/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -17,7 +17,7 @@
</script><section id="feature-section"><div class="container"><div class="row features"><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="33px" viewbox="0 0 36 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-320.000000, -826.000000)" stroke="#333743" stroke-width="2"><g id="Group-7" transform="translate(321.000000, 827.387847)"><path id="Oval-1-Copy-2" d="M17,29.5876845 C17,29.5876845 0.5,15.970603 0.5,10.4351463 C0.5,4.89968971 5.02192403,0.41231548 10.6,0.41231548 C13.0289902,0.41231548 17,3.27642672 17,3.27642672 C17,3.27642672 20.9710098,0.41231548 23.4,0.41231548 C28.978076,0.41231548 33.5,4.89968971 33.5,10.4351463 C33.5,15.970603 17,29.5876845 17,29.5876845 Z"></path><path id="Path-4" d="M8.97721839,4.43098465 C8.97721839,4.43098465 4.65711371,4.98291942 5.76387751,8.9986647"></path></g></g></g></svg></div><h3>开源免费</h3><p>遵循 Apache-2.0 开源协议，免费商用</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="37px" height="36px" viewbox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><defs><rect id="path-1" x="0.402989808" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-2" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-1"></use></mask><rect id="path-3" x="0.402989808" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-4" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-3"></use></mask><rect id="path-5" x="20.0265472" y="0.675409258" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-6" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-5"></use></mask><rect id="path-7" x="20.0265472" y="19.9416819" width="15.7021285" height="15.4476654" rx="3.4507722"></rect><mask id="mask-8" maskcontentunits="userSpaceOnUse" maskunits="objectBoundingBox" x="0" y="0" width="15.7021285" height="15.4476654" fill="white"><use xlink:href="#path-7"></use></mask></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-701.000000, -824.000000)"><g id="Group-12" transform="translate(702.000000, 824.000000)"><use id="Rectangle-2" stroke="#333743" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use><path id="Line" d="M16.6179041,10.4063517 L0.445091444,10.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-3" d="M16.6179041,5.4063517 L0.445091444,5.4063517" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy" d="M6,1.07200204 L6,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path id="Line-Copy-2" d="M11,1.07200204 L11,16.2280375" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><use id="Rectangle-2-Copy-2" stroke="#333743" mask="url(#mask-4)" stroke-width="4" xlink:href="#path-3"></use><use id="Rectangle-2-Copy" stroke="#333743" mask="url(#mask-6)" stroke-width="4" xlink:href="#path-5"></use><use id="Rectangle-2-Copy-3" stroke="#333743" mask="url(#mask-8)" stroke-width="4" xlink:href="#path-7"></use></g></g></g></svg></div><h3>功能丰富</h3><p>涵盖各行业图表，满足各种需求</p></div><div class="col-sm-4"><div class="feature-icon-panel"><svg width="36px" height="31px" viewbox="0 0 36 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="feature-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-标注" transform="translate(-1084.000000, -827.000000)" fill="#333743"><g id="Group-38" transform="translate(1057.000000, 797.000000)"><path id="Shape" d="M63,56.361686 C63,51.671658 60.3077922,47.6639411 56.5050056,46.0305295 C58.3479474,44.7003672 59.5616758,42.4363346 59.5616758,39.8656065 C59.5616758,36.354116 57.2992585,33.4181102 54.2632182,32.6530946 C54.2357116,32.6462026 54.2082051,32.6496486 54.1841368,32.6599867 C54.1497535,32.6565406 54.1153703,32.6496486 54.0809871,32.6496486 C53.4311438,32.6496486 52.9050802,33.2182413 52.9050802,33.9177826 C52.9050802,34.5518495 53.3348707,35.068752 53.8953176,35.1652404 C53.995029,35.2100386 54.1256853,35.2410528 54.1325619,35.2444988 C55.8895456,35.8889038 57.1582872,37.6842783 57.1582872,39.8001322 C57.1582872,42.1606533 55.5835347,44.1214365 53.5067869,44.5315124 C53.5033486,44.5315124 53.4999103,44.5384045 53.4999103,44.5384045 C52.8088071,44.5866487 52.2586752,45.2000396 52.2586752,45.9581631 C52.2586752,46.7266247 52.8225604,47.3503537 53.5274169,47.3813678 C53.5308552,47.3848138 53.5377318,47.3917059 53.5411702,47.3917059 C57.718734,47.850026 60.6791312,51.688888 60.6791312,56.361686 C60.6791312,57.0543353 61.1983181,57.6160359 61.8412847,57.6160359 C62.4670598,57.6160359 62.9724934,57.0819034 62.9965617,56.4133762 C62.9965617,56.4064842 63,56.4030382 63,56.3961462 L63,56.3892541 L63,56.361686 L63,56.361686 Z M27,55.9123667 C27,51.2223386 29.6922078,47.2146218 33.4949944,45.5812101 C31.6520526,44.2510479 30.4383242,41.9870152 30.4383242,39.4162872 C30.4383242,35.9047967 32.7007415,32.9687909 35.7367818,32.2037753 C35.7642884,32.1968832 35.7917949,32.2003293 35.8158632,32.2106673 C35.8502465,32.2072213 35.8846297,32.2003293 35.9190129,32.2003293 C36.5688562,32.2003293 37.0949198,32.7689219 37.0949198,33.4684632 C37.0949198,34.1025302 36.6651293,34.6194326 36.1046824,34.7159211 C36.004971,34.7607193 35.8743147,34.7917334 35.8674381,34.7951795 C34.1104544,35.4395845 32.8417128,37.2349589 32.8417128,39.3508129 C32.8417128,41.7113339 34.4164653,43.6721172 36.4932131,44.0821931 C36.4966514,44.0821931 36.5000897,44.0890851 36.5000897,44.0890851 C37.1911929,44.1373293 37.7413248,44.7507202 37.7413248,45.5088438 C37.7413248,46.2773054 37.1774396,46.9010343 36.4725831,46.9320485 C36.4691448,46.9354945 36.4622682,46.9423865 36.4588298,46.9423865 C32.281266,47.4007067 29.3208688,51.2395687 29.3208688,55.9123667 C29.3208688,56.6050159 28.8016819,57.1667165 28.1587153,57.1667165 C27.5329402,57.1667165 27.0275066,56.632584 27.0034383,55.9640569 C27.0034383,55.9571649 27,55.9537189 27,55.9468268 L27,55.9399348 L27,55.9123667 L27,55.9123667 Z M49.0919787,46.2372904 C51.2925061,44.645231 52.7434789,41.9401083 52.7434789,38.8662618 C52.7434789,33.9694728 49.0644721,29.9996622 44.5258841,29.9996622 C39.9872962,29.9996622 36.3082893,33.9694728 36.3082893,38.8662618 C36.3082893,41.9401083 37.7592621,44.645231 39.9597896,46.2372904 C35.4074484,48.1980736 32.1926153,52.9914822 32.1926153,58.6015965 C32.1926153,58.91863 32.2098069,59.2287715 32.2304368,59.5389129 L32.2338752,59.5389129 C32.2338752,60.2212241 32.7461855,60.7760327 33.3788371,60.7760327 C34.0114888,60.7760327 34.5237991,60.2246701 34.5237991,59.5389129 C34.5237991,59.5010067 34.5169224,59.4631006 34.5134841,59.4251944 C34.4928542,59.1529591 34.4722242,58.8807238 34.4722242,58.6015965 C34.4722242,52.6089744 38.9729906,47.7535376 44.5224458,47.7535376 C50.0753394,47.7535376 54.5761057,52.6089744 54.5761057,58.6015965 C54.5761057,58.8910619 54.5554758,59.1736352 54.5348458,59.4562085 C54.5348458,59.4699926 54.5314075,59.4837767 54.5314075,59.4975607 L54.5314075,59.5354669 L54.5348458,59.5354669 C54.5554758,60.200548 55.0574711,60.7346805 55.6763695,60.7346805 C56.2952678,60.7346805 56.7972632,60.200548 56.8178931,59.5354669 L56.8213314,59.5354669 C56.8419614,59.2253255 56.859153,58.915184 56.859153,58.6015965 C56.8557147,52.9914822 53.6374432,48.1980736 49.0919787,46.2372904 L49.0919787,46.2372904 Z M44.5224458,45.2379457 C41.2629145,45.2379457 38.6188432,42.3846443 38.6188432,38.8662618 C38.6188432,35.3478793 41.2629145,32.4945779 44.5224458,32.4945779 C47.7819771,32.4945779 50.4260484,35.3478793 50.4260484,38.8662618 C50.4260484,42.3846443 47.7819771,45.2379457 44.5224458,45.2379457 L44.5224458,45.2379457 Z"></path></g></g></g></svg></div><h3>社区活跃</h3><p><a class="github-button" href="https://github.com/apache/incubator-echarts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star apache/incubator-echarts on GitHub">GitHub Stars</a></p></div></div><div id="feature-4" class="row feature-detail"><div class="col-sm-4 col"><h2>全新 4.0</h2><h3 style="color:#000;font-weight:bold;margin-bottom:20px;">八项新科技</h3><p>千万级数据可视化渲染能力</p><p>SVG + Canvas 双引擎动力更佳</p><p>数据样式分离及扁平配置让开发更便捷</p><p>首创无障碍访问支持</p><p>微信小程序、PPT，哪里都能用</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><video id="video-feature-4" autoplay="true" loop="true" muted="true" data-src="video/feature-4.mp4" poster="video/feature-4.jpg" class="lazy feature-video"></video></div></div><div id="feature-dimension" class="row feature-detail"><div class="col-sm-4 col mobile"><h2>多维度数据分析</h2><h3>数据自由刷选</h3><p>自由选择数据，发掘数据背后的更多秘密</p><h3>多图表联动查看</h3><p>对多个图表数据联动查看，进行多维有效分析</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="images/feature-1.png" class="lazy"><video id="video-feature-1" autoplay="true" loop="true" muted="true" data-src="video/feature-1.mp4" poster="video/feature-2.jpg" class="lazy feature-video"></video></div></div><div id="col-analysis" class="col-sm-4 col pc"><h2>多维度数据分析</h2><h3>数据自由刷选</h3><p>自由选择数据，发掘数据背后的更多秘密</p><h3>多图表联动查看</h3><p>对多个图表数据联动查看，进行多维有效分析</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div></div><div class="row feature-detail"><div id="col-data" class="col-sm-4 col"><h2>多设备随意展示</h2><h3>电脑／手机／平板／大屏 …</h3><p>兼容多种设备，可随时随地任性展示</p><div class="feature-btn"><a href="feature.html">了解更多<svg width="10px" height="13px" viewbox="0 0 10 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="more-icon"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="01-首页-设计稿" transform="translate(-1082.000000, -1417.000000)" fill="#3AADE3"><g id="Group-44" transform="translate(1006.000000, 1161.000000)"><g id="Group-16"><g id="Group-35" transform="translate(4.000000, 255.947089)"><polygon id="Shape" transform="translate(77.000000, 7.000000) scale(-1, 1) translate(-77.000000, -7.000000) " points="82 1.80411203 80.8773864 1 72 6.99980583 80.8773864 13 82 12.1957262 74.3133589 6.99980583"></polygon></g></g></g></g></g></svg></a></div></div><div class="col-sm-8 col"><div id="col-desktop"><img data-src="images/index-feature.jpg" class="lazy"></div></div></div></div></section><section id="publication"><div class="container"><div class="col-sm-8 col"><h2>ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note"><i class="note-icon"><img classs="lazy" data-src="./images/note.svg" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><p class="link">Visual Informatics, 2018<a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf">[PDF]</a></p></div><div class="col-sm-4 col"><div class="img-container"><img data-src="./images/pipeline.jpg" alt="" class="lazy"></div></div></div></section><section class="container"><div class="companies"><img data-src="images/company/company1.jpg" class="lazy"><img data-src="images/company/company2.jpg" class="lazy"><img data-src="images/company/company3.jpg" class="lazy"><img data-src="images/company/company4.jpg" class="lazy"><img data-src="images/company/company5.jpg" class="lazy"><img data-src="images/company/company6.jpg" class="lazy"><img data-src="images/company/company7.jpg" class="lazy"><img data-src="images/company/company8.jpg" class="lazy"><img data-src="images/company/company9.jpg" class="lazy"><img data-src="images/company/company10.jpg" class="lazy"><img data-src="images/company/company11.jpg" class="lazy"><img data-src="images/company/company12.jpg" class="lazy"><img data-src="images/company/company13.jpg" class="lazy"><img data-src="images/company/company14.jpg" class="lazy"><img data-src="images/company/company15.jpg" class="lazy"><img data-src="images/company/company16.jpg" class="lazy"><img data-src="images/company/company17.jpg" class="lazy"><img data-src="images/company/company18.jpg" class="lazy"><img data-src="images/company/company19.jpg" class="lazy"><img data-src="images/company/company20.jpg" class="lazy"><img data-src="images/company/company21.jpg" class="lazy"><img data-src="images/company/company22.jpg" class="lazy"><img data-src="images/company/company23.jpg" class="lazy"><img data-src="images/company/company24.jpg" class="lazy"></div></section><section id="about-section" class="normal"><div class="container"><h3>关注我们</h3><p>可以通过以下渠道关注 ECharts，及时获得更多最新动态</p><div class="btn-panel"><a href="https://github.com/ecomfe/echarts" class="btn btn-blue"><img data-src="images/btn-github.png" class="lazy"><span>GitHub</span></a><a href="https://weibo.com/echarts" class="btn btn-red"><img data-src="images/btn-weibo.png" class="lazy"><span>微博</span></a></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p><p>Copyright © 2017-2019, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="images/asf_logo.svg" class="footer-apache-logo"></a><div class="icon-panel"><a href="mailto:dev@echarts.apache.com?Body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/ecomfe/echarts/issues%20.%29" class="footer-icon"><img src="images/icon-email.png"></a><a href="https://twitter.com/EChartsJs" class="footer-icon"><img src="images/icon-twitter.png"></a><a href="https://weibo.com/u/5160877841" class="footer-icon"><img src="images/icon-weibo.png"></a><a href="https://github.com/ecomfe/echarts" class="footer-icon"><img src="images/icon-github.png"></a></div></div></div></div></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script>window.lazyLoadOptions = {
elements_selector: ".lazy"
-};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="./js/index.js?_v_=1571170595532"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="./js/index.js?_v_=1571425310596"></script><script async defer src="https://buttons.github.io/buttons.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
diff --git a/zh/maillist.html b/zh/maillist.html
index 62393c8..6648818 100644
--- a/zh/maillist.html
+++ b/zh/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
diff --git a/zh/option-gl.html b/zh/option-gl.html
index 598aeb9..791db8c 100644
--- a/zh/option-gl.html
+++ b/zh/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'option-gl',
initHash: 'globe',
@@ -16,7 +16,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -43,7 +43,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/zh/option.html b/zh/option.html
index be924aa..6ae0e00 100644
--- a/zh/option.html
+++ b/zh/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="doc-version-change"><a href="option3.html">前往 v3.x 文档</a><a href="https://echarts.baidu.com/echarts2/">前往 v2.x 文档</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'option',
initHash: 'title',
@@ -16,7 +16,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -43,7 +43,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/zh/option3.html b/zh/option3.html
index 0cc7970..d5040eb 100644
--- a/zh/option3.html
+++ b/zh/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="doc-version-change"><a href="option.html">前往 v4.x 文档</a><a href="https://echarts.baidu.com/echarts2/">前往 v2.x 文档</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'option',
schemaName: 'option3',
@@ -17,7 +17,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -44,7 +44,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
diff --git a/zh/spreadsheet.html b/zh/spreadsheet.html
index 5717db5..df667f5 100644
--- a/zh/spreadsheet.html
+++ b/zh/spreadsheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,13 +6,13 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>Spreadsheet Tool - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=1.0.0"><link rel="stylesheet" type="text/css" href="css/spreadsheet.css?_v_=1571170595532"><script src="js/log.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>Spreadsheet Tool - Apache ECharts (incubating)</title><link rel="stylesheet" type="text/css" href="vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=1.0.0"><link rel="stylesheet" type="text/css" href="css/spreadsheet.css?_v_=1571425310596"><script src="js/log.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script type="text/javascript">document.getElementById('nav-tool').className = 'active';
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './'
}, window.globalArgsExtra || {}));
@@ -31,7 +31,7 @@
numeral: vendorPath + '/numeral/1.4.7/numeral.min',
immutable: vendorPath + '/immutable/3.7.4/dist/immutable'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['spreadsheet/spreadsheet'], function (spreadsheet) {
diff --git a/zh/tutorial.html b/zh/tutorial.html
index eebd6eb..3f82a9c 100644
--- a/zh/tutorial.html
+++ b/zh/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571170595532"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1571425310596"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,7 +6,7 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571170595532"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
+</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1571425310596"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。</p><p>我们正在处理将本站跳转到 <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a> 的迁移工作。您可以现在就前往我们的 Apache 官网。</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/option-gl.html">GL 配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/zh/index.html">官方实例</a></li><li><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-globe">GL 实例</a></li></ul></li><li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://gallery.echartsjs.com">Gallery</a></li><li><a href="https://efe.baidu.com/tags/ECharts/">博客</a></li></ul></li><li id="nav-tool"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.baidu.com/theme-builder/">主题构建工具</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">贡献<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">源码（GitHub）</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issues</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://www.apache.org/licenses/">版权声明</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://echarts.apache.org/zh/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('en')">EN</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">$('#main').addClass('tutorial');
window.globalArgsExtra = {
@@ -30,7 +30,7 @@
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1571170595532',
+ version: '1571425310596',
basePath: './',
// Schema url is added by each doc page
schemaUrl: '',
@@ -57,7 +57,7 @@
hasher: vendorPath + '/hasher/1.2.0/hasher.min',
perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
},
- urlArgs: '_v_=1571170595532'
+ urlArgs: '_v_=1571425310596'
});
require(['docTool/main'], function (main) {
