<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<%@ include file="../admin/top.jsp"%>
<script type="text/javascript">
$(top.hangge());
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="min-width: 700px; min-height: 500px;"></div> <script type="text/javascript">
var myChart;
myChart = echarts.init(document.getElementById('main')); var legendDate = "";
var series = "";
var ser = "";
var legend = "";
var option = {};
$.ajax({
type : "post",
async : false, //同步执行
url : "",
dataType : "json", //返回数据形式为json
success : function(result) { },
error : function(errorMsg) {
legendDate = [ "2014", "2015", "2016" ];
series = [ {
"name" : "2014",
"type" : "bar",
"data" : [ 51, 2, 43 ],
"len" : "中国"
}, {
"name" : "2015",
"type" : "bar",
"data" : [ 55, 36, 4 ],
"len" : "美国"
}, {
"name" : "2016",
"type" : "bar",
"data" : [ 5, 20, 40 ],
"len" : "英国"
} ];
ser = [ {
"name" : "2014",
"type" : "bar",
"data" : [ 51, 2, 43 ]
}, {
"name" : "2015",
"type" : "bar",
"data" : [ 55, 36, 4 ]
}, {
"name" : "2016",
"type" : "bar",
"data" : [ 5, 20, 40 ]
} ];
legend = [ "中国", "美国", "德国" ];
optionSeries();
for (i = 0; series.length > i; i++) {
option.series[i] = series[i];
} }
}); function optionSeries() { option = {
title : {
text : '性能数据采集入库效率趋势图',
left : '15'
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'shadow'
}
},
legend : {
data : legendDate
},
dataZoom : {
show : true,
realtime : true,
start : 50,
end : 100
},
xAxis : {
type : 'value',
boundaryGap : [ 0, 0.01 ]
},
yAxis : {
type : 'category',
data : legend
},
series : []
};
} //通过Ajax获取数据 myChart.setOption(option);
window.onresize = myChart.resize;
</script>
</body>
</html>
05-11 19:57