JS Line Chart

JS Line Chart

Echarts Line chart. Need to introduce: echarts.min.js

<script src= "${ctxstatic}/common/echarts.min.js" charset= "Utf-8" type= "Text/javascript" ></script>

JS Call back-end method, get the data

map<string, object> map = new hashmap<string, object> ();

for (Integer i = 0; i < i++) {

Boolean isexit = false;

String fixindex = "";

if (I < 10) {

Fixindex = "0" + i;

} else {

Fixindex = i.ToString ();

}

For (map<string, object> spmap:list) {

String hour = Spmap.get ("Hour_remark"). toString (). substring (11);

if (Hour.equals (Fixindex)) {

Failcount.add (Integer.valueof (Spmap.get ("Fail_count"). ToString ()));

Isexit = true;

Continue

}

}

if (!isexit) {

Failcount.add (0);

}

}

map<string, object> failcountmap = new hashmap<string, object> ();

Failcountmap.put ("name", "Number of failures");

Failcountmap.put ("Data", failcount);

Allinfo.add (FAILCOUNTMAP);

Map.put ("Data", allinfo);

* Failcountmap : {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= number of failures}

* allinfo : [{data=[0, 0, 0, 0, 0, 0, 0, 0,, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= commit quantity}, {D ata=[0, 0, 0, 0, 0, 0, 0, 0,, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], Name= issued quantity}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= number of successes}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= unknown quantity}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= number of failures} ]

* map : {data=[{data=[0, 0, 0, 0, 0, 0, 0, 0,, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= commit quantity}, {D ata=[0, 0, 0, 0, 0, 0, 0, 0,, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], Name= issued quantity}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= number of successes}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= unknown quantity}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name= number of failures} ]}

-----------------------------------JS-----------------------------------------

$ (function () {

$.get ("${ctx}/domesticsms/sendstatisticshour/list?createtime=" +$ ("#createtime"). Val (), function (data) {

var serie = [];

var datatitle = [];

$.each (Data.data, function (i, v) {

var item = {

Name:v.name,

Type: ' line ',

Smooth:true,//smooth, can make line chart smooth

ItemStyle: {normal: {areastyle: {color:red;}},//You can set the shadow color under the line chart.

Data:v.data

}

Serie.push (item);

Datatitle.push (V.name);

});

var mychart = echarts.init (document.getElementById (' Footerdiv_div '));

var option = {

ToolTip: {

Trigger: ' axis '

},

Legend: {

Data:datatitle,

selected:{//sets whether the line chart shows Name:boolean by default,

' Quantity issued ': true,

' Success ': false,

' Failed ': false,

' Unknown ': false

}

},

Grid: {

Left: ' 3% ',

Right: ' 4% ',

Bottom: ' 3% ',

Containlabel:true

},

Toolbox: {

Feature: {

Saveasimage: {}

}

},

Xaxis: {

Type: ' Category ',

Boundarygap:false,

Splitline: {Show:false},//x-axis each point corresponds to a vertical line, whether it is displayed.

Data: [' 00 ', ' 01 ', ' 02 ', ' 03 ', ' 04 ', ' 05 ', ' 06 ', ' 07 ', ' 08 ', ' 09 ', ' 10 ', ' 11 ', ' 12 ', ' 13 ', ' 14 ', ' 15 ', ' 16 ', ' 19 ', ' 20 ', ' 21 ', ' 22 ', ' 23 ']

},

YAxis: {

Type: ' Value '

},

Series:serie

};

mychart.setoption (option);

})

})

JS Line Chart