Echarts Report Production

Recent project requirements to implement reports for histograms, pie charts, and line charts. The use of Baidu developed Echarts, the general use of the following steps:

First, the mode of use

1, introduced the download Echarts js file, in the http://echarts.baidu.com/link can download, but also has the API and the instance demonstration.

2, in the page, through the div to set a fixed width and height of the area block, used to display the report. Such as:

<div id= "synchronism" style= "width:100%;height:400px" ></div>

3, Echarts initialization report area, Var mychart=echarts.init ($ (' #synchronism '). Get (0), ' shine ');

Mychart.showloading (), (used when loading data asynchronously, icon style loaded), asynchronously loaded via Ajax,

When the return data succeeds, you can define the array, receive the returned data, var arr1 = []; Arr.push ();

Mychart.hideloading ();(hide load style).

Define the JS method, and the method is used to load the required data array and report area for the report as follows:

function Columntask (Arr1,arr2,mychart) {

option = {

}

mychart.setoption (option);

}

option in common parameters Legend (legend) tooltip (hover cue box)

4, in the setting of the report data JS method, you can also use a method of assignment, Option.legend.data = arr;//Set the legend

Second, the matters needing attention

1, when the Echars option is set, the column chart can be set to 0 when the data is also displayed, Barminheight: ' 20 ',

The histogram needs to be set to the maximum width of the histogram, Barmaxwidth: ' 30 ',

There is a stacked bar chart that, when set in the series, stacks up like a stack.

2, when using Echarts, if the browser page is reduced, the report should be reloaded.　　　

$ (function () {
Load report
Chartsindex (); Self-defined JS method to load the report
Browser size changes, re-loading the report
$ (window). Resize (function () {
Chartsindex ();
});
})

3, Echars Use the process has a problem, such as histogram, horizontal axis if too long, you need to set the display for line break. The code is as follows:

　　

AxisLabel: {
interval:0,
Formatter:function (params) {
var newparamsname = "";
var paramsnamenumber = 0;
if (null! = params) {
Paramsnamenumber = Params.length;
}
var providenumber = 8;
var rowNumber = Math.ceil (Paramsnamenumber/providenumber);
if (Paramsnamenumber > Providenumber) {
for (var p = 0; p < rowNumber; p++) {
var tempstr = "";
var start = p * Providenumber;
var end = start + Providenumber;
if (p = = rowNumber-1) {
TempStr = params.substring (start, paramsnamenumber);
} else {
TempStr = params.substring (start, end) + "\ n";
}
Newparamsname + = TempStr;
}

} else {
Newparamsname = params;
}
return newparamsname;
}
}

Echarts Report Production