Looking at the ECharts chart instantiation API, there are a few main relevant instantiation methods:
1、setOption(Object option,{boolean = true} notMerge)
Parameters:
1), Object type parameter option, indicating the chart data structure , shaped like:
1.
var option = {
2.
title: {
3.
text: "My first example of an ECharts chart."
4.
},
5.
tooltip: {
6.
trigger: 'axis'
7.
}
8.
};
2), boolean notMerge, indicates whether to merge the options. default is false, can not be set.
Description:
Universal interface, configure any configurable options for the chart instance (see option for details), the option option is merged by default when called multiple times (merge), if you do not need it, you can notMerger parameter is true to prevent the merger with the last option.
2、getOption()
Description:
Returns the internally held clone of the current display option
3、setSeries(Array series,{boolean=}notMerge)
Parameters:
1), Array type series sequence data, shaped like:
01.
var Array seriesList = new Array();
02.
03.
var seriesObj = new seriesObj();
04.
= "Evaporation";
05.
= "line";
06.
= [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
07.
08.
//Set the series
09.
(seriesList,false);
2), boolean notMerge indicates whether to merge series, the default is false, you can not set.
Description:
Data interface that drives the content of the data generated by the chart, with effects equivalent to calling setOption({series:{...}})
4、getSeries()
Description:
Returns an internally held clone of the currently displayed series, with the same effect as return getOption().series.
5、addData(....)
Parameters:
1), single group data parameters
(11), {number} seriesIdx: indicates to which series to add data, series footer from 0 to start;
12）、{number | Object} data；
13）、{boolean=} isHead ；
14）、{boolean=} dataGrow；
15）、{string=} additionData；
2）、Multi-group data parameters
It is actually a collection or array of multiple single sets of data {Array} params
Description:
Dynamic Data Interface
seriesIdx series index
data Add data
isHead whether to add to the head of the queue, default, not specified or false for the end of the queue to insert.
dataGrow whether to grow the data queue length, default, not specified or false when moving out the target array para data
additionData Whether to add the category axis (pie chart for example) data, additional operations as isHead and dataGrow
Parameters are when multiple groups of data are added:
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
6、on(string eventName,function eventListner)
Description:
Event binding, supported events are: REFRESH, RESTORE, CLICK, HOVER, DATA_CHANGED, MAGIC_TYPE_CHANGED, DATA_VIEW_CHANGED, DATA_ZOOM, DATA_RANGE, LEGEND_SELECTED, MAP_ SELECTED
The sample code is shaped like:
1.
Click event listeners for //ECharts charts
2.
("click", function () {
3.
alert("You clicked me!");
4.
});
7、un(string eventName,function eventListner)
Description:
Unbind an event, the sample code is shaped like:
1.
("click", function () {
2.
alert("Tragedy, you logged me off!");
3.
});
8、showLoading(Object loadingOption)
Description:
Transition control (see loadingOption for details), showing loading (in-read) code snippet shape like:
01.
//Chart Display Alerts
02.
({
03.
text: "Chart data is trying to load...",
04.
x: "center",
05.
y: "center",
06.
textStyle: {
07.
color:"red",
08.
fontSize:14
09.
},
10.
effect:"spin"
11.
});
Attention:
9、hideLoading()
Description:
Hide the chart data overload alert message, sample code:
1.
();
10、getZrender()
Description:
Get an instance of the ZRender used for the current chart, which can be used to add additional graphics or for deep customization. zrender interface is detailed inZRender The sample code is shown below:
1.
();
11、getDataURL(string imgType)
Description:
Get the Base64 image dataURL of the current chart, imgType image type, support png|jpeg, default is png.
The sample code is shown below:
1.
var imgUrl = ("png");
12、getImage(string imgType)
Description:
Get a current chart of the img, imgType image type, support png | jpeg, the default is png, sample code snippet:
1.
//Front-end export of chart images
2.
var imgObj = ("jpeg");
The main thing is to get an image object, and then get its outerHTML attribute is a chart image of the full html tag, we can use it to display directly on the page.
13、resize()
Description:
ECharts are not bound to the resize event, and changes in the size of the display area are not known internally.
Users can bind the events they care about according to their needs, and call resize actively to achieve the effect of region update.
1.
();
14、refresh()
Description:
Refresh the chart, legend selection, data area zoom, drag and drop status are maintained.
1.
();
15、restore()
Description:
To restore a chart, the various states are cleared and restored to the state they were in when they were originally displayed.
16、clear()
Description:
Empty the contents of the painting, after emptying the instance is available, because it is not releasing the resources of the example, to release the resources we need to dispose()
1.
();
17、dispose()
Description:
Releases the chart instance, after which the instance is no longer available.
1.
();
At present, the instantiation of ECharts charts mainly contains the current seventeen relevant methods, the later is not guaranteed to supplement the rhythm, for the time being, the seventeen has been enough.
Attention:
1, the premise of the use of the above methods are required to obtain the initialization of the object ECharts can be carried out, otherwise there will be an error phenomenon.