1 | // Type definitions for ECharts 4.9.0
|
2 | // Project: http://echarts.apache.org
|
3 | // Definitions by: Xie Jingyang <https://github.com/xieisabug>
|
4 | // AntiMoron <https://github.com/AntiMoron>
|
5 | // Liveangela <https://github.com/liveangela>
|
6 | // Ovilia <https://github.com/Ovilia>
|
7 | // Roman <https://github.com/iRON5>
|
8 | // Bilal <https://github.com/bilalucar>
|
9 | // TMTron <https://github.com/tmtron>
|
10 | // dwhitney <https://github.com/dwhitney>
|
11 | // Ruixuel <https://github.com/ruixuel>
|
12 | // trajnisz <https://github.com/trajnisz>
|
13 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
14 | // TypeScript Version: 2.3
|
15 |
|
16 | /// <reference types="zrender" />
|
17 | /// <reference path="./options/index.d.ts" />
|
18 |
|
19 | declare namespace echarts {
|
20 | /**
|
21 | * Creates an ECharts instance, and returns an echartsInstance. You shall
|
22 | * not initialize multiple ECharts instances on a single container.
|
23 | *
|
24 | * @param {HTMLDivElement | HTMLCanvasElement} dom Instance container,
|
25 | * usually is a `div` element with height and width defined.
|
26 | * @param {object | string} [theme] Theme to be applied.
|
27 | * This can be a configuring object of a theme, or a theme name
|
28 | * registered through [echarts.registerTheme](https://echarts.apache.org/api.html#echarts.registerTheme).
|
29 | * @param {object} [opts] Chart configurations.
|
30 | * @param {number} [opts.devicePixelRatio] Ratio of one physical pixel to
|
31 | * the size of one device independent pixels. Browser's
|
32 | * `window.devicePixelRatio` is used by default.
|
33 | * @param {string} [opts.renderer] Supports `'canvas'` or `'svg'`.
|
34 | * See [Render by Canvas or SVG](https://echarts.apache.org/tutorial.html#Render%20by%20Canvas%20or%20SVG).
|
35 | * @param {number} [opts.width] Specify width explicitly, in pixel.
|
36 | * If setting to `null`/`undefined`/`'auto'`, width of `dom`
|
37 | * (instance container) will be used.
|
38 | * @param {number} [opts.height] Specify height explicitly, in pixel.
|
39 | * If setting to `null`/`undefined`/`'auto'`, height of `dom`
|
40 | * (instance container) will be used.
|
41 | */
|
42 | function init(
|
43 | dom: HTMLDivElement | HTMLCanvasElement,
|
44 | theme?: object | string,
|
45 | opts?: {
|
46 | devicePixelRatio?: number | undefined;
|
47 | renderer?: string | undefined;
|
48 | width?: number | string | undefined;
|
49 | height?: number | string | undefined;
|
50 | },
|
51 | ): ECharts;
|
52 |
|
53 | /**
|
54 | * Connects interaction of multiple chart series. For example:
|
55 | *
|
56 | ```js
|
57 | // set group id of each instance respectively.
|
58 | chart1.group = 'group1';
|
59 | chart2.group = 'group1';
|
60 | echarts.connect('group1');
|
61 | // or incoming instance array that need to be linked.
|
62 | echarts.connect([chart1, chart2]);
|
63 | ```
|
64 | *
|
65 | * @param group Group id in string, or array of chart instance.
|
66 | */
|
67 | function connect(group: string | ECharts[]): void;
|
68 |
|
69 | /**
|
70 | * Disconnects interaction of multiple chart series. To have one single
|
71 | * instance to be removed, you can set `group` of chart instance to be null.
|
72 | *
|
73 | * @param {string} group Group id in string.
|
74 | */
|
75 | function disConnect(group: string): void;
|
76 |
|
77 | /**
|
78 | * Destroys chart instance, after which the instance cannot be used any
|
79 | * more.
|
80 | *
|
81 | * @param target Chart instance or container.
|
82 | */
|
83 | function dispose(target: ECharts | HTMLDivElement | HTMLCanvasElement): void;
|
84 |
|
85 | /**
|
86 | * Returns chart instance of dom container.
|
87 | *
|
88 | * @param target Chart container.
|
89 | */
|
90 | function getInstanceByDom(target: HTMLDivElement | HTMLCanvasElement): ECharts;
|
91 |
|
92 | /**
|
93 | * Registers available maps. This can only be used after including
|
94 | * [geo](https://echarts.apache.org/option.html#geo)
|
95 | * component or chart series of
|
96 | * [map](https://echarts.apache.org/option.html#series-map).
|
97 | *
|
98 | * @param {string} mapName Map name, referring to `map` value set in
|
99 | * [geo](https://echarts.apache.org/option.html#geo)
|
100 | * component or
|
101 | * [map](https://echarts.apache.org/option.html#series-map).
|
102 | * @param {object} geoJson Data in GeoJson format. See
|
103 | * [http://geojson.org/](http://geojson.org/) for more format information.
|
104 | * @param {object} [specialAreas] Zoomed part of a specific area in the map
|
105 | * for better visual effect.
|
106 | * See [USA Population Estimates example](https://echarts.apache.org/examples/en/editor.html?c=map-usa).
|
107 | */
|
108 | function registerMap(mapName: string, geoJson: object, specialAreas?: object): void;
|
109 |
|
110 | /**
|
111 | * Registers a theme, should be specified when
|
112 | * [initialize the chart instance](https://echarts.apache.org/api.html#echarts.init).
|
113 | *
|
114 | * @param {string} themeName Theme name.
|
115 | * @param {object} theme Theme configurations.
|
116 | */
|
117 | function registerTheme(themeName: string, theme: object): void;
|
118 |
|
119 | interface MapObj {
|
120 | /**
|
121 | * geoJson data for map
|
122 | */
|
123 | geoJson: object;
|
124 | /**
|
125 | * special areas fro map
|
126 | */
|
127 | specialAreas: object;
|
128 | }
|
129 |
|
130 | /**
|
131 | * Get a registed map.
|
132 | *
|
133 | * @param {string} mapName Map name.
|
134 | * @return {MapObj} Map data.
|
135 | */
|
136 | function getMap(mapName: string): MapObj;
|
137 |
|
138 | /**
|
139 | * Util methods about graphics.
|
140 | */
|
141 | const graphic: Graphic;
|
142 |
|
143 | interface Graphic {
|
144 | /**
|
145 | * x, y, x2, y2 are all percent from 0 to 1
|
146 | */
|
147 | LinearGradient: zrender.LinearGradient;
|
148 |
|
149 | /**
|
150 | * Clip the given points by the given rectangular.
|
151 | *
|
152 | * @param {number[][]} points The points to be clipped,
|
153 | * like [[23, 44], [12, 15], ...].
|
154 | * @param {ERectangle} rect The rectangular that is used to clip points.
|
155 | */
|
156 | clipPointsByRect(points: number[][], rect: ERectangle): number[][];
|
157 |
|
158 | /**
|
159 | * Clip the first input rectangular by the second input rectangular.
|
160 | *
|
161 | * @param {ERectangle} targetRect The rectangular to be clipped.
|
162 | * @param {ERectangle} rect The rectangular that is used to clip
|
163 | * targetRect.
|
164 | */
|
165 | clipRectByRect(targetRect: ERectangle, rect: ERectangle): ERectangle;
|
166 | }
|
167 |
|
168 | interface ECharts {
|
169 | /**
|
170 | * Group name to be used in chart connection
|
171 | */
|
172 | group: string;
|
173 |
|
174 | /**
|
175 | * Configuration item, data, universal interface, all parameters and
|
176 | * data can all be modified through `setOption`. ECharts will merge
|
177 | * new parameters and data, and then refresh chart.
|
178 | *
|
179 | * @param {EChartOption} option Configuration item and data. Please
|
180 | * refer to [configuration item manual](https://echarts.apache.org/option.html)
|
181 | * for more information.
|
182 | * @param {boolean} [notMerge=false] Whether not to merge with previous
|
183 | * `option`
|
184 | * @param {boolean} [lazyUpdate=false] Whether not to update chart
|
185 | * immediately
|
186 | */
|
187 | setOption(option: EChartOption | EChartsResponsiveOption, notMerge?: boolean, lazyUpdate?: boolean): void;
|
188 |
|
189 | /**
|
190 | * Configuration item, data, universal interface, all parameters and
|
191 | * data can all be modified through `setOption`. ECharts will merge
|
192 | * new parameters and data, and then refresh chart.
|
193 | *
|
194 | * @param {EChartOption} option Configuration item and data. Please
|
195 | * refer to [configuration item manual](https://echarts.apache.org/option.html)
|
196 | * for more information.
|
197 | * @param {EChartsOptionConfig} [opts] Options about how to setOption
|
198 | */
|
199 | setOption(option: EChartOption, opts?: EChartsOptionConfig): void;
|
200 |
|
201 | /**
|
202 | * Gets width of ECharts instance container.
|
203 | *
|
204 | * @return {number} Width.
|
205 | */
|
206 | getWidth(): number;
|
207 |
|
208 | /**
|
209 | * Gets height of ECharts instance container.
|
210 | *
|
211 | * @return {number} Height.
|
212 | */
|
213 | getHeight(): number;
|
214 |
|
215 | /**
|
216 | * Gets DOM element of ECharts instance container.
|
217 | *
|
218 | * @return {HTMLCanvasElement|HTMLDivElement} DOM container.
|
219 | */
|
220 | getDom(): HTMLCanvasElement | HTMLDivElement;
|
221 |
|
222 | /**
|
223 | * Gets `option` object maintained in current instance, which contains
|
224 | * configuration item and data merged from previous `setOption`
|
225 | * operations by users, along with user interaction states.
|
226 | * For example, switching of legend, zooming area of data zoom,
|
227 | * and so on. Therefore, a new instance that is exactly the same
|
228 | * can be recovered from this option.
|
229 | */
|
230 | getOption(): EChartOption;
|
231 |
|
232 | /**
|
233 | * Resizes chart, which should be called manually when container size
|
234 | * changes. When `opts` is not provided, DOM size is used.
|
235 | *
|
236 | * @param {EChartsResizeOption} opts Specify parameters explicitly.
|
237 | */
|
238 | resize(opts?: EChartsResizeOption): void;
|
239 |
|
240 | /**
|
241 | * Triggers chart action, like chart switch `legendToggleSelect`,
|
242 | * zoom data area `dataZoom`, show tooltip `showTip` and so on.
|
243 | * See [action](https://echarts.apache.org/api.html#action) and
|
244 | * [events](https://echarts.apache.org/api.html#events)
|
245 | * for more information.
|
246 | *
|
247 | * @param payload Trigger multiple actions through `batch` attribute.
|
248 | */
|
249 | dispatchAction(payload: object): void;
|
250 |
|
251 | /**
|
252 | * Binds event-handling function.
|
253 | * There are two kinds of events in ECharts, one of which is mouse
|
254 | * events, which will be triggered when the mouse clicks certain
|
255 | * element in the chart, the other kind will be triggered after
|
256 | * `dispatchAction` is called. Every action has a corresponding
|
257 | * event.
|
258 | * If event is triggered externally by `dispatchAction`, and there
|
259 | * is batch attribute in action to trigger batch action, then the
|
260 | * corresponding response event parameters be in batch.
|
261 | *
|
262 | * @param {string} eventName Event names are all in lower-cases,
|
263 | * for example, `'click'`, `'mousemove'`, `'legendselected'`
|
264 | * @param {Function} handler Event-handling function, whose format
|
265 | * is as following:
|
266 | ```js
|
267 | (event: object)
|
268 | ```
|
269 | * @param {object} [context] context of callback function, what
|
270 | * `this` refers to.
|
271 | */
|
272 | on(eventName: string, handler: Function, context?: object): void;
|
273 |
|
274 | /**
|
275 | * Binds event-handling function.
|
276 | * There are two kinds of events in ECharts, one of which is mouse
|
277 | * events, which will be triggered when the mouse clicks certain
|
278 | * element in the chart, the other kind will be triggered after
|
279 | * `dispatchAction` is called. Every action has a corresponding
|
280 | * event.
|
281 | * If event is triggered externally by `dispatchAction`, and there
|
282 | * is batch attribute in action to trigger batch action, then the
|
283 | * corresponding response event parameters be in batch.
|
284 | *
|
285 | * @param {string} eventName Event names are all in lower-cases,
|
286 | * for example, `'click'`, `'mousemove'`, `'legendselected'`
|
287 | * @param {string | Object} query Condition for filtering, optional.
|
288 | * `query` enables only call handlers on graphic elements of
|
289 | * specified components. Can be `string` or `Object`.
|
290 | * If `string`, the formatter can be 'mainType' or 'mainType.subType'.
|
291 | * For example:
|
292 | * ```ts
|
293 | * chart.on('click', 'series', function () {...});
|
294 | * chart.on('click', 'series.line', function () {...});
|
295 | * chart.on('click', 'dataZoom', function () {...});
|
296 | * chart.on('click', 'xAxis.category', function () {...});
|
297 | * ```
|
298 | * If `Object`, one or more properties below can be included,
|
299 | * and any of them is optional.
|
300 | * ```ts
|
301 | * {
|
302 | * <mainType>Index: number // component index
|
303 | * <mainType>Name: string // component name
|
304 | * <mainType>Id: string // component id
|
305 | * dataIndex: number // data item index
|
306 | * name: string // data item name
|
307 | * dataType: string // data item type, e.g.,
|
308 | * // 'node' and 'edge' in graph.
|
309 | * element: string // element name in custom series
|
310 | * }
|
311 | * ```
|
312 | * For example:
|
313 | * ```ts
|
314 | * chart.setOption({
|
315 | * // ...
|
316 | * series: [{
|
317 | * name: 'uuu'
|
318 | * // ...
|
319 | * }]
|
320 | * });
|
321 | * chart.on('mouseover', {seriesName: 'uuu'}, function () {
|
322 | * // When the graphic elements in the series with name 'uuu' mouse
|
323 | * // overed, this method is called.
|
324 | * });
|
325 | * ```
|
326 | * For example:
|
327 | * ```ts
|
328 | * chart.setOption({
|
329 | * // ...
|
330 | * series: [{
|
331 | * type: 'graph',
|
332 | * nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
|
333 | * edges: [{source: 0, target: 1}]
|
334 | * }]
|
335 | * });
|
336 | * chart.on('click', {dataType: 'node'}, function () {
|
337 | * // When the nodes of the graph clicked, this method is called.
|
338 | * });
|
339 | * chart.on('click', {dataType: 'edge'}, function () {
|
340 | * // When the edges of the graph clicked, this method is called.
|
341 | * });
|
342 | * ```
|
343 | * For example
|
344 | * ```ts
|
345 | * chart.setOption({
|
346 | * // ...
|
347 | * series: {
|
348 | * // ...
|
349 | * type: 'custom',
|
350 | * renderItem: function (params, api) {
|
351 | * return {
|
352 | * type: 'group',
|
353 | * children: [{
|
354 | * type: 'circle',
|
355 | * name: 'my_el',
|
356 | * // ...
|
357 | * }, {
|
358 | * // ...
|
359 | * }]
|
360 | * }
|
361 | * },
|
362 | * data: [[12, 33]]
|
363 | * }
|
364 | * })
|
365 | * chart.on('click', {targetName: 'my_el'}, function () {
|
366 | * // When the element with name 'my_el' clicked, this method is called.
|
367 | * });
|
368 | * ```
|
369 | * @param {Function} handler Event-handling function, whose format
|
370 | * is as following:
|
371 | ```js
|
372 | (event: object)
|
373 | ```
|
374 | * @param {object} [context] context of callback function, what
|
375 | * `this` refers to.
|
376 | */
|
377 | on(eventName: string, query: string | Object, handler: Function, context?: object): void;
|
378 |
|
379 | /**
|
380 | * Unbind event-handler function.
|
381 | *
|
382 | * @param {string} eventName Event names are all in lower-cases,
|
383 | * for example, `'click'`, `'mousemove'`, `'legendselected'`
|
384 | * @param {Function} [handler] The function to be unbound could be
|
385 | * passed. Otherwise, all event functions of this type will be
|
386 | * unbound.
|
387 | */
|
388 | off(eventName: string, handler?: Function): void;
|
389 |
|
390 | /**
|
391 | * Convert a point from logical coordinate (e.g., in geo, cartesian,
|
392 | * graph, ...) to pixel coordinate.
|
393 | *
|
394 | * @param {EChartsConvertFinder} finder Indicate in which coordinate
|
395 | * system conversion is performed.
|
396 | * Generally, index or id or name can be used to specify
|
397 | * coordinate system.
|
398 | * @param {string | any[]} value The value to be converted.
|
399 | */
|
400 | convertToPixel(finder: EChartsConvertFinder, value: string | any[]): string | any[];
|
401 |
|
402 | /**
|
403 | * Convert a point from pixel coordinate to logical coordinate
|
404 | * (e.g., in geo, cartesian, graph, ...).
|
405 | *
|
406 | * @param {EChartsConvertFinder} finder Indicate in which coordinate
|
407 | * system conversion is performed.
|
408 | * Generally, index or id or name can be used to specify
|
409 | * coordinate system.
|
410 | * @param {string | any[]} value The value to be converted.
|
411 | */
|
412 | convertFromPixel(finder: EChartsConvertFinder, value: any[] | string): any[] | string;
|
413 |
|
414 | /**
|
415 | * Determine whether the given point is in the given coordinate systems or series.
|
416 | *
|
417 | * @param {EChartsConvertFinder} finder Indicate in which coordinate
|
418 | * system conversion is performed.
|
419 | * Generally, index or id or name can be used to specify
|
420 | * coordinate system.
|
421 | * @param {string | any[]} value The value to be judged, in pixel
|
422 | * coordinate system.
|
423 | */
|
424 | containPixel(finder: EChartsConvertFinder, value: any[]): boolean;
|
425 |
|
426 | /**
|
427 | * Shows loading animation. You can call this interface manually before
|
428 | * data is loaded, and call `hideLoading` to hide loading animation
|
429 | * after data is loaded.
|
430 | *
|
431 | * @param {string} [type='default']
|
432 | * @param {EChartsLoadingOption} [opts]
|
433 | */
|
434 | showLoading(type?: string, opts?: EChartsLoadingOption): void;
|
435 |
|
436 | /**
|
437 | * Hides animation loading effect.
|
438 | */
|
439 | hideLoading(): void;
|
440 |
|
441 | /**
|
442 | * Exports chart image; returns a base64 URL; can be set to `src` of
|
443 | * `Image`.
|
444 | *
|
445 | * @param opts Options.
|
446 | */
|
447 | getDataURL(opts: {
|
448 | // Exporting format, can be either png, or jpeg
|
449 | type?: string | undefined;
|
450 | // Resolution ratio of exporting image, 1 by default.
|
451 | pixelRatio?: number | undefined;
|
452 | // Background color of exporting image, use backgroundColor in
|
453 | // option by default.
|
454 | backgroundColor?: string | undefined;
|
455 | // Excluded components list. e.g. ['toolbox']
|
456 | excludeComponents?: string[] | undefined;
|
457 | }): string;
|
458 |
|
459 | /**
|
460 | * Exports connected chart image; returns a base64 url; can be set to
|
461 | * `src` of `Image`. Position of charts in exported image are
|
462 | * related to that of the container.
|
463 | *
|
464 | * @param opts Options.
|
465 | */
|
466 | getConnectedDataURL(opts: {
|
467 | // Exporting format, can be either png, or jpeg
|
468 | type: string;
|
469 | // Resolution ratio of exporting image, 1 by default.
|
470 | pixelRatio: number;
|
471 | // Background color of exporting image, use backgroundColor in
|
472 | // option by default.
|
473 | backgroundColor: string;
|
474 | // Excluded components list. e.g. ['toolbox']
|
475 | excludeComponents?: string[] | undefined;
|
476 | }): string;
|
477 |
|
478 | /**
|
479 | * The method is used in rendering millions of data
|
480 | * (e.g. rendering geo data). In these scenario, the entire size of
|
481 | * data is probably up to 10 or 100 MB, even using binary format.
|
482 | * So chunked load data and rendering is required. When using
|
483 | * `appendData`, the graphic elements that have been rendered will
|
484 | * not be cleared, but keep rendering new graphic elements.
|
485 | *
|
486 | * @param opts Data options.
|
487 | */
|
488 | appendData(opts: {
|
489 | // Specify which series the data will be appended to.
|
490 | seriesIndex?: string | undefined;
|
491 | // The data to be appended.
|
492 | data?: any[] | TypedArray | undefined;
|
493 | }): void;
|
494 |
|
495 | /**
|
496 | * Clears current instance; removes all components and charts in
|
497 | * current instance.
|
498 | */
|
499 | clear(): void;
|
500 |
|
501 | /**
|
502 | * Returns whether current instance has been disposed.
|
503 | *
|
504 | * @return {boolean} Whether has been disposed.
|
505 | */
|
506 | isDisposed(): boolean;
|
507 |
|
508 | /**
|
509 | * Disposes instance. Once disposed, the instance can not be used again.
|
510 | */
|
511 | dispose(): void;
|
512 | }
|
513 |
|
514 | type TypedArray =
|
515 | | Int8Array
|
516 | | Uint8Array
|
517 | | Int16Array
|
518 | | Uint16Array
|
519 | | Int32Array
|
520 | | Uint32Array
|
521 | | Uint8ClampedArray
|
522 | | Float32Array
|
523 | | Float64Array;
|
524 |
|
525 | interface EChartsConvertFinder {
|
526 | seriesIndex?: number | undefined;
|
527 | seriesId?: string | undefined;
|
528 | seriesName?: string | undefined;
|
529 | geoIndex?: number | undefined;
|
530 | geoId?: string | undefined;
|
531 | geoName?: string | undefined;
|
532 | xAxisIndex?: number | undefined;
|
533 | xAxisId?: string | undefined;
|
534 | xAxisName?: string | undefined;
|
535 | yAxisIndex?: number | undefined;
|
536 | yAxisId?: string | undefined;
|
537 | yAxisName?: string | undefined;
|
538 | gridIndex?: number | undefined;
|
539 | gridId?: string | undefined;
|
540 | gridName?: string | undefined;
|
541 | }
|
542 |
|
543 | interface ERectangle {
|
544 | x: number;
|
545 | y: number;
|
546 | width: number;
|
547 | height: number;
|
548 | }
|
549 |
|
550 | type EChartsSeriesType =
|
551 | | 'line'
|
552 | | 'bar'
|
553 | | 'pie'
|
554 | | 'scatter'
|
555 | | 'effectScatter'
|
556 | | 'radar'
|
557 | | 'tree'
|
558 | | 'treemap'
|
559 | | 'sunburst'
|
560 | | 'boxplot'
|
561 | | 'candlestick'
|
562 | | 'heatmap'
|
563 | | 'map'
|
564 | | 'parallel'
|
565 | | 'lines'
|
566 | | 'graph'
|
567 | | 'sankey'
|
568 | | 'funnel'
|
569 | | 'gauge'
|
570 | | 'pictorialBar'
|
571 | | 'themeRiver'
|
572 | | 'custom';
|
573 |
|
574 | interface EChartOption<TSeries = EChartOption.Series> {
|
575 | /**
|
576 | * Title component, including main title and subtitle.
|
577 | * In ECharts 2.x, a single instance of ECharts could contains
|
578 | * one title component at most.
|
579 | * However, in ECharts 3, there could be one or more
|
580 | * than one title components.
|
581 | * It is more useful when multiple diagrams in one instance all need titles.
|
582 | *
|
583 | * @see https://echarts.apache.org/en/option.html#title
|
584 | */
|
585 | title?: EChartTitleOption | EChartTitleOption[] | undefined;
|
586 |
|
587 | /**
|
588 | * Legend component.
|
589 | * Legend component shows symbol, color and name of different series.
|
590 | * You can click legends to toggle displaying series in the chart.
|
591 | * In ECharts 3, a single echarts instance may contain multiple
|
592 | * legend components, which makes it easier for the layout of multiple
|
593 | * legend components.
|
594 | * If there have to be too many legend items, `vertically scrollable` legend
|
595 | * or `horizontally scrollable` legend are options to paginate them.
|
596 | * Check `legend.type` please.
|
597 | *
|
598 | * @see https://echarts.apache.org/en/option.html#legend
|
599 | */
|
600 | legend?: EChartOption.Legend | undefined;
|
601 |
|
602 | /**
|
603 | * Drawing grid in rectangular coordinate.
|
604 | * In a single grid, at most two X and Y axes each is allowed.
|
605 | * `Line chart`, `bar chart`, and `scatter chart (bubble chart)`
|
606 | * can be drawn in grid.
|
607 | * In ECharts 2.x, there could only be one single grid component
|
608 | * at most in a single echarts instance.
|
609 | * But in ECharts 3, there is no limitation.
|
610 | *
|
611 | * @see https://echarts.apache.org/en/option.html#grid
|
612 | */
|
613 | grid?: EChartOption.Grid | EChartOption.Grid[] | undefined;
|
614 |
|
615 | /**
|
616 | * The x axis in cartesian(rectangular) coordinate.
|
617 | * Usually a single grid component can place at most 2 x axis,
|
618 | * one on the bottom and another on the top.
|
619 | * offset can be used to avoid overlap when you need to put more
|
620 | * than two x axis.
|
621 | *
|
622 | * @see https://echarts.apache.org/en/option.html#xAxis
|
623 | */
|
624 | xAxis?: EChartOption.XAxis | EChartOption.XAxis[] | undefined;
|
625 |
|
626 | /**
|
627 | * The y axis in cartesian(rectangular) coordinate.
|
628 | * Usually a single grid component can place at most 2 y axis,
|
629 | * one on the left and another on the right. offset can be used
|
630 | * to avoid overlap when you need to put more than two y axis.
|
631 | *
|
632 | * @see https://echarts.apache.org/en/option.html#yAxis
|
633 | */
|
634 | yAxis?: EChartOption.YAxis | EChartOption.YAxis[] | undefined;
|
635 |
|
636 | /**
|
637 | * Polar coordinate can be used in scatter and line chart.
|
638 | * Every polar coordinate has an `angleAxis` and a `radiusAxis`.
|
639 | *
|
640 | * @see https://echarts.apache.org/en/option.html#polar
|
641 | */
|
642 | polar?: object | undefined;
|
643 |
|
644 | /**
|
645 | * Radial axis of polar coordinate.
|
646 | *
|
647 | * @see https://echarts.apache.org/en/option.html#radiusAxis
|
648 | */
|
649 | radiusAxis?: object | undefined;
|
650 |
|
651 | /**
|
652 | * The angle axis in Polar Coordinate.
|
653 | *
|
654 | * @see https://echarts.apache.org/en/option.html#angleAxis
|
655 | */
|
656 | angleAxis?: object | undefined;
|
657 |
|
658 | /**
|
659 | * Coordinate for `radar charts`.
|
660 | * This component is equal to the polar component in ECharts 2.
|
661 | * Because the polar component in the echarts 3 is reconstructed
|
662 | * to be the standard polar coordinate component,
|
663 | * this component is renamed to be radar to avoid confusion.
|
664 | * Radar chart coordinate is different from polar coordinate,
|
665 | * in that every axis indicator of the radar chart coordinate
|
666 | * is an individual dimension.
|
667 | * The style of indicator coordinate axis could be configured
|
668 | * through the following configuration items,
|
669 | * including `name`, `axisLine`, `axisTick`, `axisLabel`,
|
670 | * `splitLine`, `splitArea`.
|
671 | *
|
672 | * @see https://echarts.apache.org/en/option.html#radar
|
673 | */
|
674 | radar?: object | undefined;
|
675 |
|
676 | /**
|
677 | * `dataZoom` component is used for zooming a specific area,
|
678 | * which enables user to investigate data in detail,
|
679 | * or get an overview of the data,
|
680 | * or get rid of outlier points.
|
681 | * These types of `dataZoom` component are supported:
|
682 | * + `dataZoomInside`: Data zoom functionalities is embeded
|
683 | * inside coordinate systems, enable user to zoom
|
684 | * or roam coordinate system by mouse dragging,
|
685 | * mouse move or finger touch (in touch screen).
|
686 | * + `dataZoomSlider`: A special slider bar is provided,
|
687 | * on which coordinate systems can be zoomed or roamed
|
688 | * by mouse dragging or finger touch (in touch screen).
|
689 | * + `dataZoomSelect`: A marquee tool is provided for zooming
|
690 | * or roaming coordinate system.
|
691 | * That is `toolbox.feature.dataZoom`, which can only be configured
|
692 | * in toolbox.
|
693 | *
|
694 | * @see https://echarts.apache.org/en/option.html#dataZoom
|
695 | */
|
696 | dataZoom?: EChartOption.DataZoom[] | undefined;
|
697 |
|
698 | /**
|
699 | * `visualMap` is a type of component for visual encoding,
|
700 | * which maps the data to visual channels, including:
|
701 | * + symbol: Type of symbol.
|
702 | * + symbolSize: Symbol size.
|
703 | * + color: Symbol color.
|
704 | * + colorAlpha: Symbol alpha channel.
|
705 | * + opacity: Opacity of symbol and others (like labels).
|
706 | * + colorLightness: Lightness in HSL.
|
707 | * + colorSaturation: Saturation in HSL.
|
708 | * + colorHue: Hue in HSL.
|
709 | * Myltiple `visualMap` component could be defined in a chart instance,
|
710 | * which enable that different dimensions
|
711 | * of a series data are mapped to different visual channels.
|
712 | * `visualMap` could be defined as `Piecewise (visualMapPiecewise)`
|
713 | * or `Continuous (visualMapContinuous)`,
|
714 | * which is distinguished by the property type.
|
715 | *
|
716 | * @example
|
717 | * option = {
|
718 | * visualMap: [
|
719 | * { // the first visualMap component
|
720 | * type: 'continuous', // defined to be continuous viusalMap
|
721 | * ...
|
722 | * },
|
723 | * { // the sencond visualMap component
|
724 | * type: 'piecewise', // defined to be piecewise visualMap
|
725 | * ...
|
726 | * }
|
727 | * ],
|
728 | * ...
|
729 | * };
|
730 | *
|
731 | * @see https://echarts.apache.org/en/option.html#visualMap
|
732 | */
|
733 | visualMap?: EChartOption.VisualMap[] | undefined;
|
734 |
|
735 | /**
|
736 | * Tooltip component.
|
737 | * It can be configured on different places:
|
738 | * + Configured on global: `tooltip`
|
739 | * + Configured in a coordinate system: `grid.tooltip`,
|
740 | * `polar.tooltip`, `single.tooltip`
|
741 | * + Configured in a series: `series.tooltip`
|
742 | * + Configured in each item of `series.data`: `series.data.tooltip`
|
743 | *
|
744 | * @see https://echarts.apache.org/en/option.html#tooltip
|
745 | */
|
746 | tooltip?: EChartOption.Tooltip | undefined;
|
747 |
|
748 | /**
|
749 | * `axisPointer` is a tool for displaying reference line and axis value
|
750 | * under mouse pointer.
|
751 | *
|
752 | * @see https://echarts.apache.org/en/option.html#axisPointer
|
753 | */
|
754 | axisPointer?: EChartOption.AxisPointer | undefined;
|
755 |
|
756 | /**
|
757 | * A group of utility tools, which includes `export`, `data view`,
|
758 | * `dynamic type switching`, `data area zooming`, and `reset`.
|
759 | *
|
760 | * @see https://echarts.apache.org/en/option.html#toolbox
|
761 | */
|
762 | toolbox?: object | undefined;
|
763 |
|
764 | /**
|
765 | * `brush` is an area-selecting component, with which user can select
|
766 | * part of data from a chart to display in detail, or doing calculations
|
767 | * with them.
|
768 | *
|
769 | * @see https://echarts.apache.org/en/option.html#brush
|
770 | */
|
771 | brush?: object | undefined;
|
772 |
|
773 | /**
|
774 | * Geographic coorinate system component.
|
775 | * Geographic coorinate system component is used to draw maps,
|
776 | * which also supports `scatter series`, and `line series`.
|
777 | *
|
778 | * @see https://echarts.apache.org/en/option.html#geo
|
779 | */
|
780 | geo?: object | undefined;
|
781 |
|
782 | /**
|
783 | * `Parallel Coordinates` is a common way of visualizing high-dimensional
|
784 | * geometry and analyzing multivariate data.
|
785 | * For example, `series-parallel.data` is the following data:
|
786 | *
|
787 | * @example
|
788 | * [
|
789 | * [1, 55, 9, 56, 0.46, 18, 6, 'good'],
|
790 | * [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],
|
791 | * [3, 56, 7, 63, 0.3, 14, 5, 'good'],
|
792 | * [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],
|
793 | * { // Data item can also be an Object,
|
794 | * // so that perticular settings of its line can be set here.
|
795 | * value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']
|
796 | * lineStyle: {...},
|
797 | * }
|
798 | * ...
|
799 | * ]
|
800 | *
|
801 | * @see https://echarts.apache.org/en/option.html#parallel
|
802 | */
|
803 | parallel?: object | undefined;
|
804 |
|
805 | /**
|
806 | * This component is the coordinate axis for parallel coordinate.
|
807 | *
|
808 | * @see https://echarts.apache.org/en/option.html#parallelAxis
|
809 | */
|
810 | parallelAxis?: object | undefined;
|
811 |
|
812 | /**
|
813 | * An axis with a single dimension. It can be used to display data
|
814 | * in one dimension.
|
815 | *
|
816 | * @see https://echarts.apache.org/en/option.html#singleAxis
|
817 | */
|
818 | singleAxis?: EChartOption.SingleAxis | EChartOption.SingleAxis[] | undefined;
|
819 |
|
820 | /**
|
821 | * `timeline` component, which provides functions like switching and playing
|
822 | * between multiple ECharts `options`.
|
823 | *
|
824 | * @see https://echarts.apache.org/en/option.html#timeline
|
825 | */
|
826 | timeline?: object | undefined;
|
827 |
|
828 | /**
|
829 | * `graphic` component enable creating graphic elements in echarts.
|
830 | * Those graphic type are supported.
|
831 | * `image`, `text`, `circle`, `sector`, `ring`, `polygon`,
|
832 | * `polyline`, `rect`, `line`, `bezierCurve`, `arc`, `group`,
|
833 | *
|
834 | * @see https://echarts.apache.org/en/option.html#graphic
|
835 | */
|
836 | graphic?: object | object[] | undefined;
|
837 |
|
838 | /**
|
839 | * Calendar coordinates.
|
840 | * In ECharts, we are very creative to achieve the calendar chart,
|
841 | * by using the calendar coordinates
|
842 | * to achieve the calendar chart, as shown in the following example,
|
843 | * we can use calendar coordinates
|
844 | * in `heatmap`, `scatter`, `effectScatter`, and `graph`.
|
845 |
|
846 | * @see https://echarts.apache.org/en/option.html#calendar
|
847 | */
|
848 | calendar?: EChartOption.Calendar | EChartOption.Calendar[] | undefined;
|
849 |
|
850 | /**
|
851 | * @see https://echarts.apache.org/en/option.html#dataset
|
852 | */
|
853 | dataset?: EChartOption.Dataset | EChartOption.Dataset[] | undefined;
|
854 |
|
855 | /**
|
856 | * `dataset` component is published since ECharts 4.
|
857 | * `dataset` brings convenience in data management separated with styles
|
858 | * and enables data reuse by different series.
|
859 | * More importantly, is enables data encoding from data to visual,
|
860 | * which brings convenience in some scenarios.
|
861 | * More details about `dataset` can be checked in the tutorial.
|
862 | * @see https://echarts.apache.org/en/option.html#aria
|
863 | */
|
864 | aria?: object | undefined;
|
865 |
|
866 | /**
|
867 | * @see https://echarts.apache.org/en/option.html#series
|
868 | */
|
869 | series?: TSeries[] | undefined;
|
870 |
|
871 | /**
|
872 | * The color list of palette.
|
873 | * If no color is set in series, the colors would be adopted sequentially
|
874 | * and circularly from this list
|
875 | * as the colors of series.
|
876 | * @default
|
877 | * [
|
878 | * '#c23531','#2f4554','#61a0a8','#d48265','#91c7ae',
|
879 | * '#749f83', '#ca8622','#bda29a','#6e7074','#546570',
|
880 | * '#c4ccd3'
|
881 | * ]
|
882 | *
|
883 | * @see https://echarts.apache.org/en/option.html#color
|
884 | */
|
885 | color?: string[] | undefined;
|
886 |
|
887 | /**
|
888 | * Background color. Defaults to have no background.
|
889 | *
|
890 | * @see https://echarts.apache.org/en/option.html#backgroundColor
|
891 | */
|
892 | backgroundColor?: EChartOption.Color | undefined;
|
893 |
|
894 | /**
|
895 | * Global font style.
|
896 | *
|
897 | * @see https://echarts.apache.org/en/option.html#textStyle
|
898 | */
|
899 | textStyle?: (EChartOption.BaseTextStyle & EChartOption.BaseTextStyleWithRich) | undefined;
|
900 |
|
901 | /**
|
902 | * Whether to enable animation.
|
903 | *
|
904 | * @see https://echarts.apache.org/en/option.html#animation
|
905 | */
|
906 | animation?: boolean | undefined;
|
907 |
|
908 | /**
|
909 | * Whether to set graphic number threshold to animation.
|
910 | * Animation will be disabled when graphic number is larger than threshold.
|
911 | *
|
912 | * @see https://echarts.apache.org/en/option.html#animationThreshold
|
913 | */
|
914 | animationThreshold?: number | undefined;
|
915 |
|
916 | /**
|
917 | * Duration of the first animation, which supports callback function
|
918 | * for different data to have different animation effect
|
919 | *
|
920 | * @example
|
921 | * animationDuration: function (idx) {
|
922 | * // delay for later data is larger
|
923 | * return idx * 100;
|
924 | * }
|
925 | * @see https://echarts.apache.org/en/option.html#animationDuration
|
926 | */
|
927 | animationDuration?: number | undefined;
|
928 |
|
929 | /**
|
930 | * Easing method used for the first animation.
|
931 | * Varied easing effects can be found at `easing effect example`.
|
932 | *
|
933 | * @see https://echarts.apache.org/en/option.html#animationEasing
|
934 | */
|
935 | animationEasing?: string | undefined;
|
936 |
|
937 | /**
|
938 | * Delay before updating the first animation, which supports
|
939 | * callback function for different data
|
940 | * to have different animation effect.
|
941 | *
|
942 | * @example
|
943 | * animationDelay: function (idx) {
|
944 | * // delay for later data is larger
|
945 | * return idx * 100;
|
946 | * }
|
947 | * @see https://echarts.apache.org/en/option.html#animationDelay
|
948 | */
|
949 | animationDelay?: number | Function | undefined;
|
950 |
|
951 | /**
|
952 | * Time for animation to complete, which supports callback function
|
953 | * for different data to have different animation effect
|
954 | *
|
955 | * @example
|
956 | * animationDurationUpdate: function (idx) {
|
957 | * // delay for later data is larger
|
958 | * return idx * 100;
|
959 | * }
|
960 | * @see https://echarts.apache.org/en/option.html#animationDurationUpdate
|
961 | */
|
962 | animationDurationUpdate?: number | Function | undefined;
|
963 |
|
964 | /**
|
965 | * Easing method used for animation.
|
966 | *
|
967 | * @see https://echarts.apache.org/en/option.html#animationEasingUpdate
|
968 | */
|
969 | animationEasingUpdate?: string | undefined;
|
970 |
|
971 | /**
|
972 | * Delay before updating animation, which supports callback function
|
973 | * for different data to have different animation effect.
|
974 | *
|
975 | * @example
|
976 | * animationDelayUpdate: function (idx) {
|
977 | * // delay for later data is larger
|
978 | * return idx * 100;
|
979 | * }
|
980 | * @see https://echarts.apache.org/en/option.html#animationDelayUpdate
|
981 | */
|
982 | animationDelayUpdate?: number | Function | undefined;
|
983 |
|
984 | /**
|
985 | * Configuration for progressive/incremental rendering
|
986 | *
|
987 | * @default 400
|
988 | */
|
989 | progressive?: number | undefined;
|
990 |
|
991 | /**
|
992 | * Configuration for progressive/incremental rendering
|
993 | *
|
994 | * @default 3000
|
995 | */
|
996 | progressiveThreshold?: number | undefined;
|
997 |
|
998 | /**
|
999 | * Equal to CanvasRenderingContext2D.globalCompositeOperation
|
1000 | *
|
1001 | * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
1002 | *
|
1003 | */
|
1004 | blendMode?: string | undefined;
|
1005 |
|
1006 | /**
|
1007 | * Threshold of if use single hover layer to optimize.
|
1008 | * It is recommended that `hoverLayerThreshold` is equivalent to or less than
|
1009 | * `progressiveThreshold`, otherwise hover will cause restart of progressive,
|
1010 | * which is unexpected.
|
1011 | * see example <echarts/test/heatmap-large.html>.
|
1012 | *
|
1013 | * @default 3000
|
1014 | */
|
1015 | hoverLayerThreshold?: number | undefined;
|
1016 |
|
1017 | /**
|
1018 | * Whether to use UTC in display.
|
1019 | * - `true`: When `axis.type` is `'time'`, ticks is determined
|
1020 | * according to UTC, and `axisLabel` and `tooltip` use UTC by default.
|
1021 | * - `false`: When `axis.type` is `'time'`, ticks is determined
|
1022 | * according to local time, and `axisLabel` and `tooltip` use local time
|
1023 | * by default.
|
1024 | *
|
1025 | * The default value of useUTC is false, for sake of considering:
|
1026 | * - In many cases, labels should be displayed in local time
|
1027 | * (whether the time is stored in server in local time or UTC).
|
1028 | * - If user uses time string (like '2012-01-02') in data,
|
1029 | * it usually means local time if time zone is not specified.
|
1030 | * Time should be displayed in its original time zone by default.
|
1031 | *
|
1032 | * Notice: the setting only effects 'display time', but not 'parse time'.
|
1033 | * About how time value (like `1491339540396`, `'2013-01-04'`, ...)
|
1034 | * is parsed in echarts, see `the time part in date`.
|
1035 | *
|
1036 | * @see https://echarts.apache.org/en/option.html#useUTC
|
1037 | */
|
1038 | useUTC?: boolean | undefined;
|
1039 | }
|
1040 |
|
1041 | type EChartsMediaOption = {
|
1042 | query: {
|
1043 | width?: number | undefined;
|
1044 | height?: number | undefined;
|
1045 | aspectRatio?: number | undefined;
|
1046 | minWidth?: number | undefined;
|
1047 | minHeight?: number | undefined;
|
1048 | minAspectRatio?: number | undefined;
|
1049 | maxWidth?: number | undefined;
|
1050 | maxHeight?: number | undefined;
|
1051 | maxAspectRatio?: number | undefined;
|
1052 | };
|
1053 | option: EChartOption;
|
1054 | };
|
1055 |
|
1056 | interface EChartsResponsiveOption {
|
1057 | baseOption?: EChartOption | undefined;
|
1058 | media?: EChartsMediaOption[] | undefined;
|
1059 | }
|
1060 |
|
1061 | interface EChartsOptionConfig {
|
1062 | notMerge?: boolean | undefined;
|
1063 | lazyUpdate?: boolean | undefined;
|
1064 | silent?: boolean | undefined;
|
1065 | }
|
1066 |
|
1067 | interface EChartsResizeOption {
|
1068 | /**
|
1069 | * Chart width.
|
1070 | */
|
1071 | width?: number | string | undefined;
|
1072 |
|
1073 | /**
|
1074 | * Chart height.
|
1075 | */
|
1076 | height?: number | string | undefined;
|
1077 |
|
1078 | /**
|
1079 | * Specify whether or not to prevent triggering events.
|
1080 | */
|
1081 | silent?: boolean | undefined;
|
1082 | }
|
1083 |
|
1084 | interface EChartTitleOption {
|
1085 | show?: boolean | undefined;
|
1086 | text?: string | undefined;
|
1087 | link?: string | undefined;
|
1088 | target?: string | undefined;
|
1089 | textStyle?: EChartOption.TextStyleWithRich | undefined;
|
1090 | subtext?: string | undefined;
|
1091 | sublink?: string | undefined;
|
1092 | subtarget?: string | undefined;
|
1093 | subtextStyle?: EChartOption.TextStyleWithRich | undefined;
|
1094 | textAlign?: string | undefined;
|
1095 | textVerticalAlign?: string | undefined;
|
1096 | triggerEvent?: boolean | undefined;
|
1097 | /**
|
1098 | * Title space around content. The unit is `px`.
|
1099 | * Default values for each position are 5.
|
1100 | * And they can be set to different values with left, right, top, and bottom.
|
1101 | */
|
1102 | padding?: number | number[] | undefined;
|
1103 | itemGap?: number | undefined;
|
1104 | zlevel?: number | undefined;
|
1105 | z?: number | undefined;
|
1106 | left?: string | number | undefined;
|
1107 | top?: string | number | undefined;
|
1108 | right?: string | number | undefined;
|
1109 | bottom?: string | number | undefined;
|
1110 | backgroundColor?: string | undefined;
|
1111 | borderColor?: string | undefined;
|
1112 | borderWidth?: number | undefined;
|
1113 | borderRadius?: number | number[] | undefined;
|
1114 | shadowBlur?: number | undefined;
|
1115 | shadowColor?: number | undefined;
|
1116 | shadowOffsetX?: number | undefined;
|
1117 | shadowOffsetY?: number | undefined;
|
1118 | }
|
1119 |
|
1120 | /**
|
1121 | * Options for `echartsInstance.showLoading` method
|
1122 | * {@link https://echarts.apache.org/en/api.html#echartsInstance.showLoading}
|
1123 | */
|
1124 | interface EChartsLoadingOption {
|
1125 | /**
|
1126 | * Loading text.
|
1127 | * @default 'loading'
|
1128 | */
|
1129 | text?: string | undefined;
|
1130 |
|
1131 | /**
|
1132 | * Loading circle color.
|
1133 | * @default '#c23531'
|
1134 | */
|
1135 | color?: string | undefined;
|
1136 |
|
1137 | /**
|
1138 | * Loading text color.
|
1139 | * @default '#000'
|
1140 | */
|
1141 | textColor?: string | undefined;
|
1142 |
|
1143 | /**
|
1144 | * Mask background color.
|
1145 | * @default 'rgba(255, 255, 255, 0.8)'
|
1146 | */
|
1147 | maskColor?: string | undefined;
|
1148 |
|
1149 | /**
|
1150 | * Zlevel of loading. If not 0, it creates a new canvas for loading.
|
1151 | * @default 0
|
1152 | */
|
1153 | zlevel?: number | undefined;
|
1154 |
|
1155 | /**
|
1156 | * Font size.
|
1157 | * @default 12
|
1158 | * @since 4.8.0
|
1159 | */
|
1160 | fontSize?: number | undefined;
|
1161 |
|
1162 | /**
|
1163 | * Show an animated "spinner" or not.
|
1164 | * @default true
|
1165 | * @since 4.8.0
|
1166 | */
|
1167 | showSpinner?: boolean | undefined;
|
1168 |
|
1169 | /**
|
1170 | * Radius of the "spinner".
|
1171 | * @default 10
|
1172 | * @since 4.8.0
|
1173 | */
|
1174 | spinnerRadius?: number | undefined;
|
1175 |
|
1176 | /**
|
1177 | * Line width of the "spinner".
|
1178 | * @default 5
|
1179 | * @since 4.8.0
|
1180 | */
|
1181 | lineWidth?: number | undefined;
|
1182 | }
|
1183 |
|
1184 | namespace EChartOption {
|
1185 | type Series =
|
1186 | | SeriesLine
|
1187 | | SeriesBar
|
1188 | | SeriesPie
|
1189 | | SeriesScatter
|
1190 | | SeriesEffectScatter
|
1191 | | SeriesRadar
|
1192 | | SeriesTree
|
1193 | | SeriesTreemap
|
1194 | | SeriesSunburst
|
1195 | | SeriesBoxplot
|
1196 | | SeriesCandlestick
|
1197 | | SeriesHeatmap
|
1198 | | SeriesMap
|
1199 | | SeriesParallel
|
1200 | | SeriesLines
|
1201 | | SeriesGraph
|
1202 | | SeriesSankey
|
1203 | | SeriesFunnel
|
1204 | | SeriesGauge
|
1205 | | SeriesPictorialBar
|
1206 | | SeriesThemeRiver
|
1207 | | SeriesCustom;
|
1208 |
|
1209 | namespace BasicComponents {
|
1210 | /**
|
1211 | * @todo describe
|
1212 | */
|
1213 | interface Line {
|
1214 | show?: boolean | undefined;
|
1215 | onZero?: boolean | undefined;
|
1216 | onZeroAxisIndex?: number | undefined;
|
1217 | symbol?: string | string[] | undefined;
|
1218 | symbolSize?: number[] | undefined;
|
1219 | symbolOffset?: number[] | undefined;
|
1220 | lineStyle?: LineStyle | undefined;
|
1221 | }
|
1222 |
|
1223 | interface CartesianAxis {
|
1224 | /**
|
1225 | * Component ID, not specified by default.
|
1226 | * If specified, it can be used to refer the component in option or API.
|
1227 | */
|
1228 | id?: string | undefined;
|
1229 |
|
1230 | /**
|
1231 | * If show this axis.
|
1232 | *
|
1233 | * @default 'true'
|
1234 | */
|
1235 | show?: boolean | undefined;
|
1236 |
|
1237 | /**
|
1238 | * The index of grid which this axis belongs to.
|
1239 | * Defaults to be in the first grid.
|
1240 | *
|
1241 | * @default 0
|
1242 | */
|
1243 | gridIndex?: number | undefined;
|
1244 |
|
1245 | /**
|
1246 | * Offset of this axis relative to default position.
|
1247 | * Useful when multiple axis of this type has same position value.
|
1248 | *
|
1249 | * @default 0
|
1250 | * @see https://echarts.apache.org/en/option.html#yAxis.offset
|
1251 | */
|
1252 | offset?: number | undefined;
|
1253 |
|
1254 | /**
|
1255 | * Name of axis.
|
1256 | */
|
1257 | name?: string | undefined;
|
1258 |
|
1259 | /**
|
1260 | * Location of axis name.
|
1261 | *
|
1262 | * @default 'start'
|
1263 | */
|
1264 | nameLocation?: 'start' | 'middle' | 'center' | 'end' | undefined;
|
1265 |
|
1266 | /**
|
1267 | * Text style of axis name.
|
1268 | *
|
1269 | * @see https://echarts.apache.org/en/option.html#yAxis.nameTextStyle
|
1270 | */
|
1271 | nameTextStyle?: TextStyleWithRich | undefined;
|
1272 |
|
1273 | /**
|
1274 | * Gap between axis name and axis line.
|
1275 | *
|
1276 | * @default 15
|
1277 | */
|
1278 | nameGap?: number | undefined;
|
1279 |
|
1280 | /**
|
1281 | * Rotation of axis name.
|
1282 | *
|
1283 | * @default null
|
1284 | */
|
1285 | nameRotate?: number | undefined;
|
1286 |
|
1287 | /**
|
1288 | * Whether axis is inversed. New option from ECharts 3.
|
1289 | *
|
1290 | * @default false
|
1291 | */
|
1292 | inverse?: boolean | undefined;
|
1293 |
|
1294 | /**
|
1295 | * The boundary gap on both sides of a coordinate axis.
|
1296 | * The setting and behavior of category axes and non-category axes are
|
1297 | * different. The `boundaryGap` of category axis can be set to either
|
1298 | * `true` or `false`. Default value is set to be `true`, in which case
|
1299 | * `axisTick` is served only as a separation line, and labels and data
|
1300 | * appear only in the center part of two axis ticks, which is called
|
1301 | * band. For non-category axis, including time, numerical value, and
|
1302 | * log axes, `boundaryGap` is an array of two values, representing the
|
1303 | * spanning range between minimum and maximum value.
|
1304 | * The value can be set in numeric value or relative percentage,
|
1305 | * which becomes invalid after setting `min` and `max`.
|
1306 | *
|
1307 | * @example
|
1308 | * boundaryGap: ['20%', '20%']
|
1309 | *
|
1310 | * @see https://echarts.apache.org/en/option.html#yAxis.boundaryGap
|
1311 | */
|
1312 | boundaryGap?: boolean | (string | number)[] | undefined;
|
1313 |
|
1314 | /**
|
1315 | * The minimun value of axis.
|
1316 | * It can be set to a special value `'dataMin'` so that
|
1317 | * the minimum value on this axis is set to be the minimum label.
|
1318 | * It will be automatically computed to make sure axis tick is equally
|
1319 | * distributed when not set. In category axis, it can also be set
|
1320 | * as the ordinal number.
|
1321 | * For example, if a catergory axis has
|
1322 | * `data: ['categoryA', 'categoryB', 'categoryC']`
|
1323 | * , and the ordinal `2` represents `'categoryC'`.
|
1324 | * Moreover, it can be set as negative number, like `-3`.
|
1325 | *
|
1326 | * @default null
|
1327 | * @see https://echarts.apache.org/option.html#yAxis.min
|
1328 | */
|
1329 | min?: number | string | ((value: { min: number; max: number }) => number) | undefined;
|
1330 |
|
1331 | /**
|
1332 | * The maximum value of axis.
|
1333 | * It can be set to a special value `'dataMax'` so that
|
1334 | * the minimum value on this axis is set to be the maximum label.
|
1335 | * It will be automatically computed to make sure axis tick is equally
|
1336 | * distributed when not set.
|
1337 | * In category axis, it can also be set as the ordinal number.
|
1338 | * For example, if a catergory axis has
|
1339 | * `data: ['categoryA', 'categoryB', 'categoryC']`
|
1340 | * , and the ordinal `2` represents `'categoryC'`.
|
1341 | * Moreover, it can be set as negative number, like `-3`.
|
1342 | *
|
1343 | * @default null
|
1344 | * @see https://echarts.apache.org/option.html#yAxis.max
|
1345 | */
|
1346 | max?: number | string | ((value: { min: number; max: number }) => number) | undefined;
|
1347 |
|
1348 | /**
|
1349 | * It is available only in numerical axis, i.e., type: `'value'`.
|
1350 | * It specifies whether not to contain zero position
|
1351 | * of axis compulsively.
|
1352 | * When it is set to be `true`, the axis may not contain zero position,
|
1353 | * which is useful in the scatter chart for both value axes.
|
1354 | * This configuration item is unavailable when the `min` and `max`
|
1355 | * are set.
|
1356 | *
|
1357 | * @default false
|
1358 | * @see https://echarts.apache.org/en/option.html#yAxis.scale
|
1359 | */
|
1360 | scale?: boolean | undefined;
|
1361 |
|
1362 | /**
|
1363 | * Number of segments that the axis is split into.
|
1364 | * Note that this number serves only as a recommendation,
|
1365 | * and the true segments may be adjusted based on readability.
|
1366 | * This is unavailable for category axis.
|
1367 | *
|
1368 | * @default 5
|
1369 | * @see https://echarts.apache.org/en/option.html#yAxis.splitNumber
|
1370 | */
|
1371 | splitNumber?: number | undefined;
|
1372 |
|
1373 | /**
|
1374 | * Maximum gap between split lines.
|
1375 | * For example, in time axis (type is `'time'`),
|
1376 | * it can be set to be `3600 * 24 * 1000` to make sure
|
1377 | * that the gap between axis labels is less than or equal to one day.
|
1378 | * @example
|
1379 | * {
|
1380 | * maxInterval: 3600 * 1000 * 24
|
1381 | * }
|
1382 | * It is available only for axis of type `'value'` or `'time'`.
|
1383 | * @see https://echarts.apache.org/en/option.html#yAxis.minInterval
|
1384 | */
|
1385 | minInterval?: any;
|
1386 |
|
1387 | /**
|
1388 | * Compulsively set segmentation interval for axis.
|
1389 | * As splitNumber is a recommendation value,
|
1390 | * the calculated tick may not be the same as expected.
|
1391 | * In this case, interval should be used along with min and max
|
1392 | * to compulsively set tickings.
|
1393 | * But in most cases, we do not suggest using this,
|
1394 | * out automatic calculation is enough for most situations.
|
1395 | * This is unavailable for category axis.
|
1396 | * Timestamp should be passed for type: `'time'` axis.
|
1397 | * Logged value should be passed for type: `'log'` axis.
|
1398 | *
|
1399 | * @see https://echarts.apache.org/en/option.html#yAxis.interval
|
1400 | */
|
1401 | interval?: number | undefined;
|
1402 |
|
1403 | /**
|
1404 | * Base of logarithm, which is valid only for numeric axes with type:
|
1405 | * `'log'`.
|
1406 | *
|
1407 | * @default 10
|
1408 | * @see https://echarts.apache.org/en/option.html#yAxis.logBase
|
1409 | */
|
1410 | logBase?: number | undefined;
|
1411 |
|
1412 | /**
|
1413 | * True for axis that cannot be interacted with.
|
1414 | *
|
1415 | * @default false
|
1416 | */
|
1417 | silent?: boolean | undefined;
|
1418 |
|
1419 | /**
|
1420 | * Whether the labels of axis triggers and reacts to mouse events.
|
1421 | * Parameters of event includes:
|
1422 | *
|
1423 | * @example
|
1424 | * {
|
1425 | * // Component type: xAxis, yAxis, radiusAxis, angleAxis
|
1426 | * // Each of which has an attribute for index, e.g., xAxisIndex for xAxis
|
1427 | * componentType: string,
|
1428 | * // Value on axis before being formatted.
|
1429 | * // Click on value label to trigger event.
|
1430 | * value: '',
|
1431 | * // Name of axis.
|
1432 | * // Click on laben name to trigger event.
|
1433 | * name: ''
|
1434 | * }
|
1435 | *
|
1436 | * @default false
|
1437 | */
|
1438 | triggerEvent?: boolean | undefined;
|
1439 |
|
1440 | /**
|
1441 | * Settings related to axis line.
|
1442 | *
|
1443 | * @see https://echarts.apache.org/en/option.html#yAxis.axisLine
|
1444 | */
|
1445 | axisLine?: Line | undefined;
|
1446 |
|
1447 | /**
|
1448 | * Settings related to axis tick.
|
1449 | *
|
1450 | * @see https://echarts.apache.org/en/option.html#yAxis.axisTick
|
1451 | */
|
1452 | axisTick?: CartesianAxis.Tick | undefined;
|
1453 |
|
1454 | /**
|
1455 | * Settings related to axis minor tick.
|
1456 | *
|
1457 | * @see https://echarts.apache.org/en/option.html#yAxis.minorTick
|
1458 | */
|
1459 | minorTick?: CartesianAxis.MinorTick | undefined;
|
1460 |
|
1461 | /**
|
1462 | * Settings related to axis label.
|
1463 | *
|
1464 | * @see https://echarts.apache.org/en/option.html#yAxis.axisLabel
|
1465 | */
|
1466 |
|
1467 | axisLabel?: CartesianAxis.Label | undefined;
|
1468 |
|
1469 | /**
|
1470 | * SplitLine of axis in grid area.
|
1471 | *
|
1472 | * @see https://echarts.apache.org/en/option.html#yAxis.splitLine
|
1473 | */
|
1474 | splitLine?: CartesianAxis.SplitLine | undefined;
|
1475 |
|
1476 | /**
|
1477 | * Minor SplitLine of axis in grid area.
|
1478 | *
|
1479 | * @see https://echarts.apache.org/en/option.html#yAxis.minorSplitLine
|
1480 | */
|
1481 | minorSplitLine?: CartesianAxis.MinorSplitLine | undefined;
|
1482 |
|
1483 | /**
|
1484 | * Split area of axis in grid area, not shown by default.
|
1485 | *
|
1486 | * @see https://echarts.apache.org/en/option.html#yAxis.splitArea
|
1487 | */
|
1488 | splitArea?: CartesianAxis.SplitArea | undefined;
|
1489 |
|
1490 | /**
|
1491 | * Category data, available in type: `'category'` axis.
|
1492 | * If `type` is not specified, but `axis.data` is specified,
|
1493 | * the `type` is auto set as `'category'`.
|
1494 | * If type is specified as `'category'`,
|
1495 | * but axis.data is not specified, `axis.data` will be
|
1496 | * auto collected from `series.data`.
|
1497 | * It brings convenience, but we should notice that
|
1498 | * `axis.data` provides then value range of the `'category'` axis.
|
1499 | * If it is auto collected from `series.data`,
|
1500 | * Only the values appearing in series.data can be collected.
|
1501 | * For example, if series.data is empty, nothing will be collected.
|
1502 | *
|
1503 | * @example
|
1504 | * // Name list of all categories
|
1505 | * data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
1506 | * // Each item could also be a specific configuration item.
|
1507 | * // In this case, `value` is used as the category name.
|
1508 | * data: [{
|
1509 | * value: 'Monday',
|
1510 | * // Highlight Monday
|
1511 | * textStyle: {
|
1512 | * fontSize: 20,
|
1513 | * color: 'red'
|
1514 | * }
|
1515 | * }, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
1516 | *
|
1517 | * @see https://echarts.apache.org/en/option.html#yAxis.data
|
1518 | */
|
1519 | data?: (string | number | CartesianAxis.DataObject)[] | undefined;
|
1520 |
|
1521 | /**
|
1522 | * axisPointer settings on the axis.
|
1523 | *
|
1524 | * @see https://echarts.apache.org/en/option.html#yAxis.axisPointer
|
1525 | */
|
1526 | axisPointer?: CartesianAxis.Pointer | undefined;
|
1527 |
|
1528 | /**
|
1529 | * `zlevel` value of all graghical elements in this axis.
|
1530 | * `zlevel` is used to make layers with Canvas.
|
1531 | * Graphical elements with different `zlevel` values will be placed
|
1532 | * in different Canvases, which is a common optimization technique.
|
1533 | * We can put those frequently changed elements
|
1534 | * (like those with animations) to a seperate `zlevel`.
|
1535 | * Notice that too many Canvases will increase memory cost,
|
1536 | * and should be used carefully on mobile phones to avoid crash.
|
1537 | * Canvases with bigger `zlevel` will be placed on Canvases
|
1538 | * with smaller `zlevel`.
|
1539 | *
|
1540 | * @default 0
|
1541 | * @see https://echarts.apache.org/en/option.html#yAxis.zlevel
|
1542 | */
|
1543 | zlevel?: number | undefined;
|
1544 |
|
1545 | /**
|
1546 | * z value of all graghical elements in this axis,
|
1547 | * which controls order of drawing graphical components.
|
1548 | * Components with smaller z values may be overwritten by those
|
1549 | * with larger z values.
|
1550 | * z has a lower priority to zlevel, and will not create new Canvas.
|
1551 | *
|
1552 | * @see https://echarts.apache.org/en/option.html#yAxis.z
|
1553 | */
|
1554 | z?: number | undefined;
|
1555 | }
|
1556 |
|
1557 | namespace CartesianAxis {
|
1558 | type Type = 'value' | 'category' | 'time' | 'log';
|
1559 |
|
1560 | /**
|
1561 | * @todo describe
|
1562 | */
|
1563 | interface Tick {
|
1564 | show?: boolean | undefined;
|
1565 | alignWithLabel?: boolean | undefined;
|
1566 | interval?: number | Function | undefined;
|
1567 | inside?: boolean | undefined;
|
1568 | length?: number | undefined;
|
1569 | lineStyle?: LineStyle | undefined;
|
1570 | }
|
1571 |
|
1572 | /**
|
1573 | * @todo describe
|
1574 | */
|
1575 | interface MinorTick {
|
1576 | show?: boolean | undefined;
|
1577 | splitNumber?: number | undefined;
|
1578 | length?: number | undefined;
|
1579 | lineStyle?: LineStyle | undefined;
|
1580 | }
|
1581 |
|
1582 | /**
|
1583 | * @todo describe
|
1584 | */
|
1585 | interface Label extends Omit<TextStyleWithRich,'color'> {
|
1586 | color?: string | ((val:string) => EChartOption.Color) | undefined;
|
1587 | show?: boolean | undefined;
|
1588 | interval?: number | Function | undefined;
|
1589 | inside?: boolean | undefined;
|
1590 | rotate?: number | undefined;
|
1591 | margin?: number | undefined;
|
1592 | formatter?: string | Function | undefined;
|
1593 | showMinLabel?: boolean | undefined;
|
1594 | showMaxLabel?: boolean | undefined;
|
1595 | }
|
1596 |
|
1597 | /**
|
1598 | * @todo describe
|
1599 | */
|
1600 | interface SplitLine {
|
1601 | show?: boolean | undefined;
|
1602 | interval?: number | Function | undefined;
|
1603 | lineStyle?: LineStyle | undefined;
|
1604 | }
|
1605 |
|
1606 | /**
|
1607 | * @todo describe
|
1608 | */
|
1609 | interface MinorSplitLine {
|
1610 | show?: boolean | undefined;
|
1611 | lineStyle?: LineStyle | undefined;
|
1612 | }
|
1613 |
|
1614 | /**
|
1615 | * @todo describe
|
1616 | */
|
1617 | interface SplitArea {
|
1618 | interval?: number | Function | undefined;
|
1619 | show?: boolean | undefined;
|
1620 | areaStyle?: {
|
1621 | color?: string[] | undefined;
|
1622 | shadowBlur?: number | undefined;
|
1623 | shadowColor?: string | undefined;
|
1624 | shadowOffsetX?: number | undefined;
|
1625 | shadowOffsetY?: number | undefined;
|
1626 | opacity?: number | undefined;
|
1627 | } | undefined;
|
1628 | }
|
1629 |
|
1630 | /**
|
1631 | * @todo describe
|
1632 | */
|
1633 | interface DataObject {
|
1634 | value?: string | number | undefined;
|
1635 | textStyle?: TextStyleWithRich | undefined;
|
1636 | }
|
1637 |
|
1638 | /**
|
1639 | * @todo describe
|
1640 | */
|
1641 | interface Pointer {
|
1642 | show?: boolean | undefined;
|
1643 | type?: 'line' | 'shadow' | 'none' | undefined;
|
1644 | snap?: boolean | undefined;
|
1645 | z?: number | undefined;
|
1646 | label?: PointerLabel | undefined;
|
1647 | lineStyle?: LineStyle | undefined;
|
1648 | shadowStyle?: {
|
1649 | color?: EChartOption.Color | undefined;
|
1650 | shadowBlur?: number | undefined;
|
1651 | shadowColor?: EChartOption.Color | undefined;
|
1652 | shadowOffsetX?: number | undefined;
|
1653 | shadowOffsetY?: number | undefined;
|
1654 | opacity?: number | undefined;
|
1655 | } | undefined;
|
1656 | triggerTooltip?: boolean | undefined;
|
1657 | value?: number | undefined;
|
1658 | status?: boolean | undefined;
|
1659 | handle?: {
|
1660 | show?: boolean | undefined;
|
1661 | icon?: any;
|
1662 | size?: number | number[] | undefined;
|
1663 | margin?: number | undefined;
|
1664 | color?: string | undefined;
|
1665 | throttle?: number | undefined;
|
1666 | shadowBlur?: number | undefined;
|
1667 | shadowColor?: string | undefined;
|
1668 | shadowOffsetX?: number | undefined;
|
1669 | shadowOffsetY?: number | undefined;
|
1670 | } | undefined;
|
1671 | }
|
1672 |
|
1673 | interface PointerLabel {
|
1674 | show?: boolean | undefined;
|
1675 | precision?: number | string | undefined;
|
1676 | formatter?: string | Function | undefined;
|
1677 | margin?: number | undefined;
|
1678 | color?: string | undefined;
|
1679 | fontStyle?: 'normal' | 'italic' | 'oblique' | undefined;
|
1680 | fontWeight?:
|
1681 | | 'normal'
|
1682 | | 'bold'
|
1683 | | 'bolder'
|
1684 | | 'lighter'
|
1685 | | 100
|
1686 | | 200
|
1687 | | 300
|
1688 | | 400
|
1689 | | 500
|
1690 | | 600
|
1691 | | 700
|
1692 | | 800
|
1693 | | 900 | undefined;
|
1694 | fontFamily?: string | undefined;
|
1695 | fontSize?: number | undefined;
|
1696 | lineHeight?: number | undefined;
|
1697 | backgroundColor?: string | object | undefined;
|
1698 | borderColor?: string | undefined;
|
1699 | borderWidth?: number | undefined;
|
1700 | borderRadius?: number | undefined;
|
1701 | padding?: number | number[] | undefined;
|
1702 | shadowColor?: string | undefined;
|
1703 | shadowBlur?: number | undefined;
|
1704 | shadowOffsetX?: number | undefined;
|
1705 | shadowOffsetY?: number | undefined;
|
1706 | width?: number | string | undefined;
|
1707 | height?: number | string | undefined;
|
1708 | textBorderColor?: string | undefined;
|
1709 | textBorderWidth?: number | undefined;
|
1710 | textShadowColor?: string | undefined;
|
1711 | textShadowBlur?: number | undefined;
|
1712 | textShadowOffsetX?: number | undefined;
|
1713 | textShadowOffsetY?: number | undefined;
|
1714 | }
|
1715 | }
|
1716 | }
|
1717 | }
|
1718 | }
|
1719 |
|
1720 | declare module 'echarts' {
|
1721 | export = echarts;
|
1722 | }
|
1723 |
|
1724 | declare module 'echarts/lib/echarts' {
|
1725 | export = echarts;
|
1726 | }
|
1727 |
|
\ | No newline at end of file |