<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>系统消息</title>
<!-- eCharts -->
<script type="text/javascript" src="<%=basePath%>frontpage/common/js/jquery-1.7.2.min.js"></script>
<link href="<%=basePath%>frontpage/plugs/echarts/css/echartsHome.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>frontpage/plugs/echarts/echarts.js"></script>
<script src="<%=basePath%>frontpage/plugs/echarts/macarons.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
paths: {
echarts: '<%=basePath%>frontpage/plugs/echarts'
}
});
var id = '4028824c4b2eee12014b2ef2e61f0009';
var nameList = [];
var scoreList = [];
var homeworkName = '';
function loadData(){
$.ajax({
url : "<%=basePath%>frontstage/Statistics_statisticsByHomework?homeworkId="+id,
type : "post",
dataType : "json",
cache : false,
success : function(data) {
nameList = data.nameList;
scoreList = data.scoreList;
homeworkName = data.homeworkName;
}/* ,
error : function(errorMsg) {
alert("图表请求数据失败啦!");
myChart.hideLoading();
} */
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {
//var id = '468989284b160583014b16096f180001';
//loadData(id);
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'),e_macarons);
myChart.setOption({
title : {
text: homeworkName+'成绩统计',
subtext: '作业分数统计'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['成绩']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : nameList
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 分'
}
}
],
series : [
{
name:'得分',
type:'line',
data:scoreList,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}/* ,
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
} */
]
});
}
);
}
</script>
</head>
<body οnlοad="loadData()">
<div id="main" style="height:500px;width:800px;border:1px solid #ccc;padding:10px;"></div>
</body>
</html>
echarts 获取后台的数据
最新推荐文章于 2024-04-07 17:19:49 发布