echarts.js //echart的源js
MyEChartsStudentQualityText.js //对echart的封装
MyECharts.js //对echart的封装
第一个echart图引入的是MyECharts.js，
第二个echart图引入的是MyEChartsStudentQualityText.js
这两个里面唯一不同的是：
MyEChartsStudentQualityText.js中：
grid: { // 控制图的大小，调整下面这些值就可以，
x: 60,
x2: 100,
y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},grid: { // 控制图的大小，调整下面这些值就可以，
x: 100,
x2: 100,
y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},// 坐标轴文本标签，详见axis.axisLabel
axisLabel: {
show: true,
// 控制文本标签是否在grid里
inside: false,
rotate: 60,//改变横坐标的标签文字的倾斜度
showMinLabel: null, // true | false | null (auto)
showMaxLabel: null, // true | false | null (auto)
margin: 8,
// formatter: null,
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
textStyle: {
fontSize: 12
}
},grid：{}的作用是避免Echart横坐标的标签文字过长显示不全
当Echart横坐标的标签文字重合显示不全的时候，可以调整盛放Echart的这个div的宽度
jsp页面：
<%@page contentType="text/html; charset=utf-8"%>
<%@page session="false"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page isELIgnored="false" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="<%=path %>/web/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path %>/web/js/jquery.js"></script>
<script src="<%=path %>/web/MyECharts/resource/ECharts/echarts.js"></script>
<script src="<%=path %>/web/MyECharts/resource/MyEChartsStudentQualityText.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post(
'<%=path%>/develop!reportSs.do',null,
function(data){
console.log(data);
var opt1 = MyECharts.ChartOptionTemplates.Bar('在校体验对比', '满意度单位 : %', data);
MyECharts.RenderChart(opt1, 'container1');
},
'json'
);
});
</script>
</head>
<body>
<h2 class="top_h2">2.在校体验</h2>
<div class="topbox" style="">
<p style="">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container1" style="height: 488px;width: 95%;margin-left: 2.5%;margin-top: 30px;">
<p>在校体验对比</p>
</div>
</p>
<li class="top_h2"><label> </label><input οnclick="window.history.back(-1);" type="button" class="btn"
value="返回"/></li>
</div>
</body>
</html>
/**
* @className: DevelopAction
* @description: 把值拼接成list集合的json传递给jsp页面,并通过Echart生成报表
* @writer: zxk
* @date: 2017-12-1 10:30
*/
@SuppressWarnings("unchecked")
public void reportSm() throws IOException{
//最新年
String year = developService.findYear().getYear();
//最新年的上一年
String yearLast = (Integer.parseInt(year) - 1) + "";
map = new HashMap();
map.put("yearSm", year);
Develop develop = developService.findList(map).get(0);
map = new HashMap();
map.put("yearSm", yearLast);
Develop developLast = developService.findList(map).get(0);//需要判断非空才能取list的值，否集合null，空时针
reportList = new ArrayList<Report>();
report = new Report();
String[] str = {"文化课合格率","专业技能合格率","体质测评合格率","毕业率"};
Report report1 = new Report();
report1.setGroup(year);
report1.setName(str[0]);
report1.setValue(develop.getCultural_course());
Report report2 = new Report();
report2.setGroup(year);
report2.setName(str[1]);
report2.setValue(develop.getCraft_skill());
Report report3 = new Report();
report3.setGroup(year);
report3.setName(str[2]);
report3.setValue(develop.getHabitus_trial());
Report report4 = new Report();
report4.setGroup(year);
report4.setName(str[3]);
report4.setValue(develop.getEmployment_rate());
Report report1L = new Report();
report1L.setGroup(yearLast);
report1L.setName(str[0]);
report1L.setValue(developLast.getCultural_course());
Report report2L = new Report();
report2L.setGroup(yearLast);
report2L.setName(str[1]);
report2L.setValue(developLast.getCraft_skill());
Report report3L = new Report();
report3L.setGroup(yearLast);
report3L.setName(str[2]);
report3L.setValue(developLast.getHabitus_trial());
Report report4L = new Report();
report4L.setGroup(yearLast);
report4L.setName(str[3]);
report4L.setValue(developLast.getEmployment_rate());
reportList.add(report1);
reportList.add(report2);
reportList.add(report3);
reportList.add(report4);
reportList.add(report1L);
reportList.add(report2L);
reportList.add(report3L);
reportList.add(report4L);
// String jsonStr =
// "[{\"group\": "+year+",\"name\": \"文化课合格率\", \"value\": "+develop.getCultural_course()+"}," +
// "{\"group\": "+year+",\"name\": \"专业技能合格率\", \"value\": "+develop.getCraft_skill()+"}," +
// "{\"group\": "+year+",\"name\": \"体质测评合格率\", \"value\": "+develop.getHabitus_trial()+"}," +
// "{\"group\": "+year+",\"name\": \"毕业率\", \"value\": "+develop.getEmployment_rate()+"}," +
// "{\"group\": "+yearLast+",\"name\": \"文化课合格率\", \"value\": "+developLast.getCultural_course()+"}," +
// "{\"group\": "+yearLast+",\"name\": \"专业技能合格率\", \"value\": "+developLast.getCraft_skill()+"}," +
// "{\"group\": "+yearLast+",\"name\": \"体质测评合格率\", "+value+": //"+developLast.getHabitus_trial()+"}," +
// "{\"group\": "+yearLast+",\"name\": \"毕业率\", \"value\": "+developLast.getEmployment_rate()+"}]";
JSONArray json=JSONArray.fromObject(reportList);
getRequest().setCharacterEncoding("utf-8");
getResponse().setCharacterEncoding("utf-8");
getResponse().setContentType("text/json");
PrintWriter out=getResponse().getWriter();
out.println(json);//打印json，为了前台页面获取
out.flush();//刷新流
out.close();//关闭流
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
