EChart动态加载(不带附件)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ECharts动态加载
简介
1)它一个直观，生动，可交互，可高度个性化定制的Web数据可视化图表。
2)详情可以参考eCharts官网/
文档说明
1)之所以写这个文档是因为,网上的资源多以静态的页面为主,完全不适合
我们先有的web开发.毕竟资源是不定的,依据后台数据动态生成,可以
替我们剩下许多的时间
2)本文提供了2种方式生成(优缺点就不累赘了)
a)Ajax异步方式
b)Jsp生成
开发环境
1)SSH(SpringMvc)
2)MyEclipse10
3)JDK1.6
4)Win7 x64
标准配置
首先配置好你的开发环境并从网上下载对应的eCharts以及zrender插件eCharts:/index.html
Zrender:https:///ecomfe/zrender
按照下图分别将eCharts以及Zrender的src目录放到工程目录WebRoot下
对应的/WebRoot目录结构
对应echarts的src目录.
对应zrender的src目录
myecharts.js
用于ajax异步方式生成图标
esl.js是必须要有的
它来自echarts压缩包
\doc\asset\js\esl\esl.js文件
在需要用到echarts的页面head中首先插入新的js文件
<script src="echarts/esl.js"type="text/javascript"></script>
<script src="echarts/echarts/echarts.js"type="text/javascript"></script>
type="text/javascript"></script>
Body中给echarts指定一片区域显示图标
<div id="main"style="height:400px"></div>
<script type="text/javascript">
require.config({
packages : [ {
name : 'echarts',
location : '<%=basePath%>echarts/echarts',
main : 'echarts'
}, {
name : 'zrender',
location : '<%=basePath%>echarts/zrender',
main : 'zrender'
} ]
});
//在这里面写入官网提供的require,即可生成对应的图表
</script>
接下来请看不同的2种使用方式
Ajax异步加载
一个js文件用来提供生成Echarts的方法
myecharts.js
var myChart;
//创建ECharts图表方法
function DrawEChart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading({
text : "图表数据正在努力加载..."
});
//定义图表options
var options = {
title : {
text : "通过Ajax获取数据呈现图标示例",
subtext : "数据纯属虚构",
sublink : ""
},
tooltip : {
trigger : 'axis'
},
legend : {
data : []
},
toolbox : {
show : true,
feature : {
mark : false
}
},
calculable : true,
xAxis : [ {
type : 'category',
data : []
} ],
yAxis : [ {
type : 'value',
splitArea : {
show : true
}
} ],
series : []
};
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : "ajaxGetMoreData",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组这里需要是xAxis[i]的形式
options.xAxis[0].data = result.xAxisData;
options.series = result.seriesList;
options.legend.data = result.legendData;
//这些数据对应java文件生成的Json格式
myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("图表请求数据失败啦!");
}
});
}
Series.java
public class Series {
private String name;
private String type;
private List<?> data;
public static String TYPE_LINE = "line";
public static String TYPE_BAR = "bar";
//忽略了JSON字符串的生成语法,以及他们的getter,setter语句
}
ChartData.java
public class ChartData {
private List<String> legendData;// 用来存储所有的Series名称,可以用seriesList生成
private List<String> xAxisData;// 通用的横轴显示数据
private List<Series> seriesList;// 个例,显示的数目
//忽略了JSON字符串的生成语法,以及他们的getter,setter语句
}
配置对应的Action方法
ChartsActive.java
@Controller("ChartsActive")
public class ChartsActive extends ActionSupport{
public String ajaxGetMoreData(){
try {
ServletActionContext.getResponse().setContentType("text/htm l;charset=utf-8");
PrintWriter write =
ServletActionContext.getResponse().getWriter();
List<String> xAxisData = new ArrayList<String>();
List<Series> seriesList = new ArrayList<Series>();
for (int i = 1; i < 13; i++) {
xAxisData.add(i+"月");
}
for (int i = 0; i < 3; i++) {
List<Integer> list = new ArrayList<Integer>();
for (int j = 0; j < 5; j++) {
list.add((int)(Math.random()*40));
}
Series series = new Series("销售"+i,
Series.TYPE_LINE, list);
seriesList.add(series);
}
ChartData cd = new ChartData(xAxisData, seriesList);
write.write(cd.toString());
//将对应的JSON字符串返回给前台
write.flush();
write.close();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
生成的json对象对应的格式
{"legendData":["销售0","销售1","销售2"],
"xAxisData":["1月","2月","3月","4月","5 月","6月","7月","8月","9月","10月","11月","12月"],
"seriesList":[
{"name":"销售0","type":"line","data":[30,20,33,0,6]}, {"name":"销售 1","type":"line","data":[20,33,26,14,6]}, {"name":"销售 2","type":"line","data":[36,18,28,8,36]}
]}
自己配置好对应的Struts文件
之后修改需要使用echarts的页面
利用Ajax方法提交,可以减轻服务器的处理数据,更适合查看一些实时性的信息,减少系统开销
Jsp生成
标准的基础上,增加如下代码
<body>
<div id="main"style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({
packages : [ {
name : 'echarts',
location : '<%=basePath%>echarts/echarts',
main : 'echarts'
}, {
name : 'zrender',
location : '<%=basePath%>echarts/zrender',
main : 'zrender'
} ]
});
require([ 'echarts', 'echarts/chart/bar' ,'echarts/chart/line' ], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
animation:false,
tooltip : {
show : true,
feature : {
saveAsImage : {show: true}
}
},
legend : {
data : [ '销量' ]
/* 这里设置显示的数据属于什么范围 */
},
xAxis : [ {
type : 'category',
data : <%=request.getAttribute("chartName")%>
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "销量",
"type" : "bar",
/* "data" : [ 5, 20, 40, 10, 10, 20 ,12] */
"data" : <%=request.getAttribute("chartValue")%>
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</body>
添加处理方法
public String toBarChart(){
String[] name = { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","西服"};
double[] value = { 5, 20, 40, 10, 10,
20 ,(int)(Math.random()*40)};
chart = new Chart("销售",name,value);
String Json = chart.getThisJson();
//仅仅是将对应的数据转化成json字符串,比较简单.
ServletActionContext.getRequest().setAttribute("chartName", chart.getNameJson().substring(12));
ServletActionContext.getRequest().setAttribute("chartValue" , chart.getValueJson().substring(13));
return"success";
}
不推荐用jsp,毕竟每次刷新数据,都需要加载整个页面,但是开发过程相对简单
附录相关软件
请下载带附件的文档
源码
请下载带附件的文档。