| { |
| "init": { |
| "desc": "<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 locale?: 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 class=\"codespan\">dom</code></p>\n<p> Instance container, usually is a <code class=\"codespan\">div</code> element with height and width defined.</p>\n<p> <strong>Attention: </strong>If <code class=\"codespan\">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 class=\"codespan\">style.width</code> and <code class=\"codespan\">style.height</code> of <code class=\"codespan\">div</code>, or manually call <a href=\"#echartsInstance.resize\">echartsInstance.resize</a> after showing <code class=\"codespan\">div</code>.</p>\n<p> ECharts 3 supports using <code class=\"codespan\">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 class=\"codespan\">theme</code></p>\n<p> Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>.</p>\n</li>\n<li><p><code class=\"codespan\">opts</code></p>\n<p> Optional chart configurations; which may contain:</p>\n<ul>\n<li><code class=\"codespan\">devicePixelRatio</code> Ratio of one physical pixel to the size of one device independent pixels. Browser's <code class=\"codespan\">window.devicePixelRatio</code> is used by default.</li>\n<li><code class=\"codespan\">renderer</code> Supports <code class=\"codespan\">'canvas'</code> or <code class=\"codespan\">'svg'</code>. See <a href=\"tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</li>\n<li><code class=\"codespan\">width</code> Specify width explicitly, in pixel. If setting to <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">'auto'</code>, width of <code class=\"codespan\">dom</code> (instance container) will be used.</li>\n<li><code class=\"codespan\">height</code> Specify height explicitly, in pixel. If setting to <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">'auto'</code>, height of <code class=\"codespan\">dom</code> (instance container) will be used.</li>\n<li><code class=\"codespan\">locale</code> Specify the locale. There are two builtins: <code class=\"codespan\">'ZH'</code> and <code class=\"codespan\">'EN'</code>. Or you can use <a href=\"#echarts.registerLocale\">echarts.registerLocale</a> to register a new locale. Or supported locales can be referenced in <a href=\"https://github.com/apache/incubator-echarts/tree/release/src/i18n\" target=\"_blank\">src/i18n</a></li>\n</ul>\n</li>\n</ul>\n" |
| }, |
| "connect": { |
| "desc": "<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 class=\"codespan\">group</code>\n Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-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": { |
| "desc": "<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 class=\"codespan\">group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">group</code></p>\n<p> group id.</p>\n</li>\n</ul>\n" |
| }, |
| "dispose": { |
| "desc": "<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": { |
| "desc": "<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) => ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n" |
| }, |
| "registerMap": { |
| "desc": "<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 class=\"codespan\">mapName</code></p>\n<p> Map name, referring to <code class=\"codespan\">map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code class=\"codespan\">geoJson</code></p>\n<p> Data in GeoJson format. See <a href=\"https://geojson.org/\" target=\"_blank\">https://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code class=\"codespan\">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/next/examples/en/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": { |
| "desc": "<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": { |
| "desc": "<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" |
| }, |
| "registerLocale": { |
| "desc": "<pre><code class=\"lang-js\">(locale: string, localeCfg: Object)\n</code></pre>\n<p>Registers a locale, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>. See the format in <a href=\"https://github.com/apache/incubator-echarts/blob/release/src/i18n/langEN.ts\" target=\"_blank\">src/i18n/langEN.ts</a></p>\n" |
| }, |
| "graphic": { |
| "desc": "<p>Util methods about graphics.</p>\n" |
| }, |
| "graphic.extendShape": { |
| "desc": "<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 class=\"codespan\">opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n" |
| }, |
| "graphic.registerShape": { |
| "desc": "<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 class=\"codespan\">ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code class=\"codespan\">registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code class=\"codespan\">name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code class=\"codespan\">{type: name}</code>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-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" |
| }, |
| "graphic.getShapeClass": { |
| "desc": "<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 class=\"codespan\">'circle'</code>, <code class=\"codespan\">'sector'</code>, <code class=\"codespan\">'ring'</code>, <code class=\"codespan\">'polygon'</code>, <code class=\"codespan\">'polyline'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'line'</code>, <code class=\"codespan\">'bezierCurve'</code>, <code class=\"codespan\">'arc'</code>.</p>\n" |
| }, |
| "graphic.clipPointsByRect": { |
| "desc": "<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" |
| }, |
| "graphic.clipRectByRect": { |
| "desc": "<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 class=\"codespan\">undefined</code>.</p>\n" |
| } |
| } |
