JS 折线图

JS 折线图 

echarts 折线图。需要引入：echarts.min.js

<script src="${ctxStatic}/common/echarts.min.js" charset="utf-8"  type="text/javascript"></script>

JS调用后台方法，得到数据

1Map<String, Object> map = new HashMap<String, Object>();
2
3 
4
5　　for (Integer i = 0; i < 24; i++) {
6
7　　　　boolean isExit = false;
8
9　　　　String fixIndex = "";
10
11　　　　if (i < 10) {
12
13　　　　　　fixIndex = "0" + i;
14
15　　　　} else {
16
17　　　　　　fixIndex = i.toString();
18
19　　　　}
20
21　　　　for (Map<String, Object> spMap : list) {
22
23　　　　　　String hour = spMap.get("hour_remark").toString().substring(11);
24
25　　　　　　if (hour.equals(fixIndex)) {
26
27　　　　　　　　failcount.add(Integer.valueOf(spMap.get("fail_count").toString()));
28
29　　　　　　　　isExit = true;
30
31　　　　　　　　continue;
32
33　　　　　　}
34
35　　　　}
36
37　　　　if (!isExit) {
38
39　　　　　　failcount.add(0);
40
41　　　　}
42
43　　}
44
45　　Map<String, Object> failcountmap = new HashMap<String, Object>();
46
47　　failcountmap.put("name", "失败数量");
48
49　　failcountmap.put("data", failcount);
50
51　　allInfo.add(failcountmap);
52
53　　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=失败数量}

* allInfo :    [{data=[0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=提交数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=下发数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=成功数量}, {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=未知数量}, {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=失败数量}]

*  map :   {data=[{data=[0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=提交数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=下发数量}, {data=[0, 0, 0, 0, 0, 0, 0, 0, 29, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name=成功数量}, {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=未知数量}, {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=失败数量}]}

-----------------------------------js-----------------------------------------

1$(function() {
2
3　　$.get("${ctx}/domesticSms/sendStatisticsHour/list?createtime="+$("#createtime").val(),function(data) {
4
5　　var serie = [];
6
7　　var dataTitle = [];
8
9　　$.each(data.data, function(i, v) {
10
11　　　　var item = {
12
13　　　　name : v.name,
14
15　　　　type : 'line',
16
17   　　　smooth:true,    // 平滑的，可以使折线图平滑
18
19   　　    itemStyle: {normal: {areaStyle: { color: red ; }}},   // 可以设定折线图下阴影颜色。
20
21　　　　data : v.data
22
23　　}
24
25　　serie.push(item);
26
27　　dataTitle.push(v.name);
28
29});
30
31var myChart = echarts.init(document.getElementById('footerDiv_div'));
32
33 
34
35var option = {
36
37　　　　tooltip : {
38
39　　　　　　trigger : 'axis'
40
41　　　　},
42
43　　　　legend : {
44
45　　　　　　data : dataTitle,
46
47　　　　　　selected:{     // 设定折线图默认是否显示   name:boolean,
48
49　　　　　　　　　　　　'下发数量':true,
50
51　　　　　　　　　　　　'成功':false,
52
53　　　　　　　　　　　　'失败':false,
54
55　　　　　　　　　　　　'未知':false
56
57　　　　　　}
58
59　　　　},
60
61　　　　grid : {
62
63　　　　　　left : '3%',
64
65　　　　　　right : '4%',
66
67　　　　　　bottom : '3%',
68
69　　　　　　containLabel : true
70
71　　　　},
72
73　　　　toolbox : {
74
75　　　　　　feature : {
76
77　　　　　　saveAsImage : {}
78
79　　　　}
80
81　　},
82
83　　xAxis : {
84
85　　　　type : 'category',
86
87　　　　boundaryGap : false,
88
89              splitLine: {show: false},   // X轴每个点对应一个纵线，是否展示。
90
91　　　　data : [ '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ]
92
93　　},
94
95　　yAxis : {
96
97　　　　type : 'value'
98
99　　},
100
101　　series : serie
102
103　};
104
105myChart.setOption(option);
106
107})
108
109 })
110
111