一天24小時每隔15分鐘96個點操作(二、展示)
阿新 • • 發佈：2020-11-30
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctype.html"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <%@include file="/commons/include/get.jsp"%><script type="text/javascript" src="${ctx}/js/plugins/myEcharts/echarts.min.js"></script> </head> <body> <div style="overflow: auto;"> <div id="app" style="width: 2500px; height: 600px;"></div> </div> <script type="text/javascript"> varxData = ${xData}.split(","); var yData = ${yData}.split(","); // 基於準備好的dom，初始化echarts例項 var app = echarts.init(document.getElementById('app')); option = { xAxis : { type : 'category', data :xData, //data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]axisLabel: { // 如果這個欄位不設定，echarts會根據屏寬及橫座標資料自動給出間隔 //interval: 10, // 間隔長度，可自定義（如果是時間格式，echarts會自動處理） rotate: 45, // 橫座標上label的傾斜度 interval: 0 //控制座標軸刻度標籤的顯示間隔.設定成 0 強制顯示所有標籤。設定為 1，隔一個標籤顯示一個標籤。設定為2，間隔2個標籤。以此類推 } }, yAxis : { type : 'value' }, series : [ { //data : [ 820, 932, 901, 934, 1290, 1330, 1320 ], data : yData, type : 'line' } ] , grid : {//設定佈局 left : '3%', right : '4%', bottom : '3%', containLabel : true }, title : {//設定標題 text : '96點曲線', subtext:'單位：' }, tooltip : {//移動到x軸後顯示資料 trigger : 'axis' } }; app.setOption(option); </script> </body> </html>
java
@RequestMapping({ "curveData" })
public ModelAndView curveData(HttpServletRequest request, HttpServletResponse response) throws Exception {
String myId = RequestUtil.getString(request, "myId");
LoadDate loadDate = null;
Map<String, String> map = new HashMap<String, String>();
if (StringUtil.isNotEmpty(myId)) {
loadDate = loadDateManager.get(myId);
// 從實體類拿出資料，並封裝到map（方便後面排序）
String mapVal = loadDate.getValue();
System.out.println(mapVal);
JSONObject json = JSONObject.fromObject(mapVal);
if (BeanUtils.isNotEmpty(json)) {
Iterator<String> iterator = json.keys();
while (iterator.hasNext()) {
String ie = (String) iterator.next();
map.put(ie, json.getString(ie));
}
}
}
System.out.println(map.toString());
ModelAndView mv = getAutoView();
mv.addObject("myId", myId);
List<String> list = createNineSixPoint();
String xdata = list.toString().replace("[", "").replace("]", "");
mv.addObject("xData", "\"" + xdata + "\"");
List<String> ylist = new ArrayList<String>();
List<String> nineSixPointVar = this.createNineSixPointVar();
if (!map.isEmpty()) {
for (int i = 0; i < nineSixPointVar.size(); i++) {
String s = map.get(nineSixPointVar.get(i));
ylist.add(s);
}
}
String ydata = ylist.toString().replace("[", "").replace("]", "");
mv.addObject("yData", "\"" + ydata + "\"");
return mv;
}
/**
* @return 按序產生96個點 資料 ，列：0:00,0:15,0:30,
*/
private List<String> createNineSixPoint() {
List<String> list = new ArrayList<String>();
String tmp1 = "";
String tmp2 = "";
String tmp3 = "";
String tmp4 = "";
for (int i = 0; i < 23; i++) {
if (i <= 9) {
tmp1 = "0" + i + ":00";
tmp2 = "0" + i + ":15";
tmp3 = "0" + i + ":30";
tmp4 = "0" + i + ":45";
} else {
tmp1 = i + ":00";
tmp2 = i + ":15";
tmp3 = i + ":30";
tmp4 = i + ":45";
}
list.add(tmp1);
list.add(tmp2);
list.add(tmp3);
list.add(tmp4);
}
return list;
}
/**
* @return 按序產生96個點 資料 ，列：v000,v015,v030,
*/
private List<String> createNineSixPointVar() {
List<String> list = new ArrayList<String>();
String tmp1 = "";
String tmp2 = "";
String tmp3 = "";
String tmp4 = "";
for (int i = 0; i < 23; i++) {
tmp1 = "v" + i + "00";
tmp2 = "v" + i + "15";
tmp3 = "v" + i + "30";
tmp4 = "v" + i + "45";
list.add(tmp1);
list.add(tmp2);
list.add(tmp3);
list.add(tmp4);
}
System.out.println(list.toString());
return list;
}
點選開啟的超連結
<a class="btn btn-primary fa fa-search " id="curveData" href="javascript:;">檢視曲線</a>
點選後觸發js程式碼
//檢視曲線 $("#curveData").click(function() { var myId = $("#myId").val(); var url = __ctx+'/platform/xxx/xxx/curveData.htm?myId='+myId; var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {//判斷是否IE瀏覽器 window.location.href(url); }else{ window.open(url,"檢視曲線"); } });
效果圖：