版权声明：本文为博主原创文章，未经博主允许不得转载。
文章来源 http://www.vxzsk.com/180.html
前面几节echarts的使用都是静态常量值得设置，这肯定不能满足我们在日常开发中的需要，平时项目的数据都是动态的，可变的，所以本章节介绍echarts结合Java 如何动态的加载数据。
=================方式一============
1，新建servelet类EchartsDemo.java和页面echartsDemo2.jsp。
EchartsDemo.java是一个普通的servelet，在这里仅仅是举例，读者可更换为一个spring的controller或者struts的action。
EchartsDemo.java 代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
package
com.test;
/*****
* V型知识库
* www.vxzsk.com
*
*/
import
java.io.IOException;
import
javax.servlet.ServletException;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
public
class
EchartsDemo
extends
HttpServlet {
private
static
final
long
serialVersionUID = 1L;
/**
* Constructor of the object.
*/
public
EchartsDemo() {
super
();
}
/**
* Destruction of the servlet. <br>
*/
public
void
destroy() {
super
.destroy();
// Just puts "destroy" string in log
// Put your code here
}
public
void
doGet(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
this
.doPost(request, response);
}
/*****
* V型知识库
* www.vxzsk.com
*
*/
public
void
doPost(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
String title=
"'我是折线图'"
;
//标题
String legend =
"['邮件营销a','联盟广告','视频广告','直接访问','搜索引擎']"
;
//折线图线条
String xAxis=
"['周一','周二','周三','周四','周五','周六','周日']"
;
//x轴
String series=
"["
+
"{"
+
"name:'邮件营销a',"
+
"type:'line',"
+
"stack: '总量',"
+
"data:[120, 132, 101, 134, 90, 230, 210]"
+
"},"
+
"{"
+
"name:'联盟广告',"
+
"type:'line',"
+
"stack: '总量',"
+
"data:[220, 182, 191, 234, 290, 330, 310]"
+
"},"
+
"{"
+
"name:'视频广告',"
+
"type:'line',"
+
"stack: '总量',"
+
"data:[150, 232, 201, 154, 190, 330, 410]"
+
"},"
+
"{"
+
"name:'直接访问',"
+
"type:'line',"
+
"stack: '总量',"
+
"data:[320, 332, 301, 334, 390, 330, 320]"
+
"},"
+
"{"
+
"name:'搜索引擎',"
+
"type:'line',"
+
"stack: '总量',"
+
"data:[820, 932, 901, 934, 1290, 1330, 1320]"
+
"}"
+
"]"
;
request.setAttribute(
"title"
, title);
request.setAttribute(
"legend"
, legend);
request.setAttribute(
"xAxis"
, xAxis);
request.setAttribute(
"series"
, series);
request.getRequestDispatcher(
"/baidu/echartsDemo2.jsp"
).forward(request, response);
}
public
void
init()
throws
ServletException {
// Put your code here
}
}
|
说明：doPost方法中设置了四个参数，并且四个参数按照echarts的格式设置了常量值，赋值数据读者可根据自己需求自行组装，但是组装的格式一定要符合上述代码案例，赋值数据可来自于数据库，xml文件，接口调用等。
echartsDemo2.jsp 代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
>
<
title
></
title
>
</
head
>
<
body
>
<
div
id
=
"container"
style
=
"height: 500px"
></
div
>
<
div
style
=
"display: "
>
</
div
>
<!-- V型知识库 www.vxzsk.com -->
<
script
type
=
"text/javascript"
src
=
"http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"
></
script
>
<
script
type
=
"text/javascript"
>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option = null;
var title=${title};
var legend=${legend};
var xAxis =${xAxis};
var series=${series};
option = {
title: {
text: title
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legend
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value'
},
series: series
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</
script
>
</
body
>
</
html
>
|
js代码接收servelet中四个动态参数，然后把动态变量赋值到相应位置
|
1
2
3
4
|
var
title=${title};
var
legend=${legend};
var
xAxis =${xAxis};
var
series=${series};
|
2，运行代码，效果如下
我们在servelet中 设置的title值为"我是折线图" ，请注意下图标题
还看到一种方式，作为参考
==================方式二===================
注意：1、用Ajax请求获取后台数据 2、Echarts只能处理Json数据
后台Controller：根据业务需求不同而返回不同数据，我前台要循环遍历Echarts的series进行数据添加，所以后台返了个二维数组过去。
前端JSP页面：为Echarts准备一个具有高宽的dom容器
前端JS：初始化时即加载Echarts，将不需要进行加载的配置项(例如title、tooltip等)不作改动，将需要动态加载数据的配置放入ajax的success:function(){}中进行处理。
定义一个为series这个即将动态加入数据的配置项准备的名为Item的数组容器，
接着对后台返回过来的数据(childkind)进行遍历，将遍历出的数据赋给容器中的相应属性(例：tp.name=childkind[i])。由于series里面的data属性(接收的是数组数据)也需要进行数据动态加载，接着再定义一个list数组，循环写入数据到list中，再将list数组返给tp.data。
最后再设置Echarst相关配置项。
扫一扫
2011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
