Methods on Echarts

Typically, after echarts is introduced into a project, you get a global Echarts object.

1. Here are some of the more common echarts methods

echarts.init()

Create an echarts instance and return the echarts instance. You cannot create multiple echarts instances in a single container.

(dom: HTMLDivElement|HTMLCanvasElement, theme? : Object|string, opts? : { devicePixelRatio? : number renderer? : string width? : number|string height? number|string }) => EChartsCopy the code

echarts.dispose(target: ECharts|HTMLDivElement|HTMLCanvasElement)

Destroy the instance. The instance can no longer be used after it is destroyed.

echarts.getInstanceByDom(target: HTMLDivElement|HTMLCanvasElement)

Gets an instance on a Dom container.

echarts.registerTheme(themeName: string, theme: Object)

Registration topic, specified when initializing the instance.

2. Then there are some more specific methods

echarts.connect(group:string|Array)

Multiple diagram instances are linked

echarts.disconnect(group:string)

To remove a single instance, set the group of the chart instance to null.

echarts.registerMap(mapName: string, geoJson: Object, specialAreas? : Object)

Register available maps. This can only be used if the geo component or map chart type is included.

echarts.getMap(mapName: string) => Object

Gets the registered map and returns the object type:

{// Map geoJson data geoJson: Object, // see registerMap specialAreas: Object}Copy the code

echarts.graphic

Graphic related help methods. There are two main methods: clipPointsByRect() and clipRectByRect(). 1) clipPointsByRect() takes a set of points, a rectangle, and returns the points intercepted by the rectangle

(// List of points to be intercepted, such as [[23, 44], [12, 15],...) . Points: Array.<Array.<number>>, // Rectangles used to intercept points. Rect: {x: number, y: number, width: number, height: number}) => Array.<Array.<number>> //Copy the code

2) clipRectByRect() inputs two rectangles and returns the result of the second rectangle cutting the first one.

(// The rectangle to be cut. TargetRect: {x: number, y: number, width: number, height: number}, // The rectangle used to intercept points. Rect: {x: number, y: number, width: number, height: number}) => {// x: number, y: number, width: number, height: number }Copy the code

If the rectangle is completely truncated, undefined is returned.

2. EchartsInstance method

1.echartsInstance.group

Groups of charts for linkage.

2.echartsInstance.setOption()

(option: Object, notMerge? : boolean, lazyUpdate? : boolean) or (option: Object, opts? : Object)Copy the code

Set the configuration items and data of the graph instance, universal interface, all parameters and data modification can be completed through setOption. Echarts merges the new parameters and data, and then refreshes the diagram. And with animation enabled, Echarts will find the difference between the two sets of data and show it with the appropriate animation. NotMerge: This is an optional parameter. It is used to merge options without merging them. The default value is false. LazyUpdate: Also an optional parameter, whether the chart is not updated after option is set. The default is false, that is, update immediately. Note: The lazyUpdate parameter, when set to false, immediately updates the chart. When working on a project, you will render a chart on a DIV container with different data values based on different conditions (such as time). At this point different data is retrieved from the back end to render the Echarts diagram. You need to set the lazyUpdate parameter to true before the chart changes as the data changes.

3. Here are a few ways to get conditions

1) echartsinstance.getwidth () => number

Gets the width of the container in which the instance resides.

2) echartsInstance. GetHeight () = > number

Gets the height of the container in which the instance resides.

3) echartsInstance. GetDom () = > HTMLCanvasElement | HTMLDivElement

Gets the DOM node of the instance container

4) echartsInstance. GetOption () = > Object

Obtain the option object maintained by the current instance. The option object returned is the configuration item and data modified and merged after several setOption by the user, and also records the user interaction state.

4. Here are a few methods related to echarts instance events

1) echartsInstance. DispatchAction (content: Object)

Trigger chart behavior. Payload can trigger multiple actions at the same time using the Batch attribute.

2) echartsInstance. On ()

Parameter list:

( eventName: string, handler: Function, context? : Object ) ( eventName: string, query: string|Object, handler: Function, context? : Object )Copy the code

Bind event handlers. There are two kinds of events at Echarts. One is mouse events. There are also events that are triggered by dispatchActions, with events on each action. Note: If the event is triggered by an external dispatchAction and the action has a Batch attribute that triggers the batch behavior, the corresponding response event parameter will also have the attributes in the Batch attribute. ?????

3) echartsinstance. off(eventName: string, handler? : Function))

Unbind handler. Handler is an optional argument that can be passed in the handler to be unbound or, if not, unbind all bound handlers of the event.

5. Methods involving points in a coordinate system

1) echartsInstance. ConvertToPixel ()

Method argument list:

Finder is used to indicate which coordinate system to use for transformation. // In general, you can use index or ID or name to locate. finder: { seriesIndex? : number, seriesId? : string, seriesName? : string, geoIndex? : number, geoId? : string, geoName? : string, xAxisIndex? : number, xAxisId? : string, xAxisName? : string, yAxisIndex? : number, yAxisId? : string, yAxisName? : string, gridIndex? : number, gridId? : string gridName? : string}, // Value to be converted. Value: Array | the string / / the result of the transformation as the pixel coordinates, by an example of the echarts dom node in the upper left corner for the coordinate point of (0, 0).) => Array|stringCopy the code

Convert a point on a coordinate system to a pixel coordinate value

2) echartsInstance. ConvertFromPixel ()

Method list parameter:

Finder is used to indicate which coordinate system to use for transformation. // In general, you can use index or ID or name to locate. finder: { seriesIndex? : number, seriesId? : string, seriesName? : string, geoIndex? : number, geoId? : string, geoName? : string, xAxisIndex? : number, xAxisId? : string, xAxisName? : string, yAxisIndex? : number, yAxisId? : string, yAxisName? : string, gridIndex? : number, gridId? : string gridName? : string}, // The value to be converted is the pixel coordinate value, with the upper-left corner of the DOM node of the echarts instance as the coordinate point [0, 0]. Value: Array | the string / / the result of the transformation, into logical coordinates. => Array|stringCopy the code

Converting a pixel coordinate value to a point on a logical coordinate system is the inverse of convert pixel.

3) echartsInstance containPixel

Method argument list

// Finder is used to indicate which coordinate system or series to judge on. // In general, you can use index or ID or name to locate. finder: { seriesIndex? : number, seriesId? : string, seriesName? : string, geoIndex? : number, geoId? : string, geoName? : string, xAxisIndex? : number, xAxisId? : string, xAxisName? : string, yAxisIndex? : number, yAxisId? : string, yAxisName? : string, gridIndex? : number, gridId? : string gridName? : string}, // The point to be judged is the pixel coordinate value, with the upper-left corner of the DOM node of the echarts instance as the coordinate [0, 0]. value: Array ) => booleanCopy the code

Determines whether the specified point is on the specified coordinate system or series.

6. Something else

1) echartsInstance. ShowLoading (type? : string, opts? : Object)

Show loading animation effect. You can manually call this interface to display the loaded animation before loading the data, and call hideLoading to hide the loaded animation after the data is loaded.

  • The type is optional. Load the animation type. There is currently only one ‘default’
  • Opts for optional. Load the animation configuration item with respect to Type.

2) echartsInstance. HideLoading ()

Hide the animation loading effect

3) echartsInstance. GetDataURL ()

The list of parameters

Opts: {// Export format, optional PNG, JPEGtype? : string, // Export image resolution ratio, default is 1. pixelRatio? : number, // the backgroundColor of the exported image is used by default in option backgroundColor. : string, // Ignore the list of components, for example, to ignore toolbox is ['toolbox'] excludeComponents? : Array.<string> }) => stringCopy the code

Export chart Image, return a base64 URL, which can be set to Image SRC.

4) echartsInstance. GetConnectedDataURL ()

Parameter list format

Opts: {// Export format, optional PNG, JPEGtype? : string, // Export image resolution ratio, default is 1. pixelRatio? : number, // the backgroundColor of the exported image is used by default in option backgroundColor. : string, // Ignore the list of components, for example, to ignore toolbox is ['toolbox'] excludeComponents? : Array.<string> }) => stringCopy the code

Export the linked chart Image and return a Base64 URL, which can be set to Image SRC. The relative position of each chart in the exported image is related to the relative position of the container.

5) echartsInstance. The appendData ()

Opts: {// To increase the serial number of the data. seriesIndex? : string, // Added data. data? : Array|TypedArray, }) => stringCopy the code

This interface is used for rendering scenes with large data volumes (millions or more), fragment loading data and incremental rendering. In a scenario with a large amount of data (such as a geographic number of dots), even if the data is in binary format, there are tens or hundreds of megabytes of data. In the Internet environment, loading in fragments is often required. The appendData interface provides incremental rendering after fragmentation loading, rendering newly added data blocks without erasing the previously rendered portions. Note:

  • AppendData is now not supported when a series uses dataset with appendData, only when a series uses its own series.data
  • Not all charts currently support incremental rendering while shard loading. The supported images are: Scatter and Lines for the basic version of ECharts. ScatterGL, linesGL and polygons3D for ECharts GL

6) echartsInstance. The clear ()

Clear the current instance. Removes all components and diagrams from the instance. The call to getOption returns a {} empty object.

7) echartsInstance isDisposed

Whether the current instance has been released

8) echartsInstance. The dispose

Destroy the instance. The instance can no longer be used after being destroyed.