From f4aac33f3dac3d86ed30936c87a5970bfeba6310 Mon Sep 17 00:00:00 2001
From: hdw <496960745@qq.com>
Date: 星期二, 06 十一月 2018 09:13:02 +0800
Subject: [PATCH] 添加折线图
---
gx_tieta/WebRoot/pages/css/mylayui.css | 37 ++++++++++++++++++
gx_tieta/WebRoot/batt-traffic-statistics1.jsp | 62 ++++++++++++++++++++++++++++---
2 files changed, 92 insertions(+), 7 deletions(-)
diff --git a/gx_tieta/WebRoot/batt-traffic-statistics1.jsp b/gx_tieta/WebRoot/batt-traffic-statistics1.jsp
index 52079ba..27174f5 100644
--- a/gx_tieta/WebRoot/batt-traffic-statistics1.jsp
+++ b/gx_tieta/WebRoot/batt-traffic-statistics1.jsp
@@ -149,6 +149,13 @@
<!-- 琛ㄦ牸鍐呭 -->
<table id="pageTbl" lay-filter="pageTbl"></table>
</div>
+ <div id="echarts-container" class="abs abs-top220 bg-red abs-index1n abs-bottom70">
+ <div class="abs-container">
+ <div class="graph">
+ <div class="graph-content" id="lineGraph"></div>
+ </div>
+ </div>
+ </div>
<!-- 鍒嗛〉鍐呭 -->
<div id="paging">
<a href="javascript:" class="search"><s:text name="Search"/><!-- 鏌ヨ --></a>
@@ -162,12 +169,22 @@
<script type="text/javascript" src="jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/layui.js"></script>
<script type="text/javascript" src="pages/js/mylayui.js"></script>
+ <script type="text/javascript" src="pages/js/pages/control-common.js"></script>
<script type="text/javascript">
layui.use(['form', 'table', 'layer', 'laydate', 'element'], function() {
var table = layui.table; // 鑾峰彇琛ㄦ牸妯″潡
var form = layui.form; // 鑾峰彇琛ㄥ崟妯″潡
var layer = layui.layer; // 鑾峰彇寮瑰嚭妗嗘ā鍧�
var laydate = layui.laydate; // 鑾峰彇鏃ユ湡妯″潡
+ var createLine = GLOBAL.eleDataGraph.createLine; // 鐢熸垚鎶樼嚎鍥�
+ var $lineGraph = $('#lineGraph').get(0);
+ var lineGraph = echarts.init($lineGraph);
+ createLine(lineGraph, {});
+
+ // 椤甸潰澶у皬鏀瑰彉妯″潡
+ $(window).resize(function() {
+ lineGraph.resize();
+ });
// 瀹氫箟鏃堕棿妯″潡
var date = new Date();
@@ -413,12 +430,12 @@
});
// 鍒囨崲鏁版嵁鏄剧ず绫诲瀷
+ var echartsCont = $('#echarts-container');
form.on('switch(dataType)', function(data){
- console.log(this.checked);
if(this.checked) {
- layer.msg('鎴戞槸鎶樼嚎鍥�');
+ echartsCont.removeClass('abs-index1n');
}else {
- layer.msg('鎴戞槸琛ㄦ牸锛�');
+ echartsCont.addClass('abs-index1n');
}
});
@@ -469,7 +486,12 @@
// 鐢熸垚琛ㄦ牸鏁版嵁
table.render(tOptions);
- console.log(getLineData());
+
+ // 鑾峰彇绫诲瀷
+ var type = sData.num;
+ var lineData = getLineData(type);
+ var lineGraphOpts = getlineGraphOpts(lineData, type)
+ createLine(lineGraph, lineGraphOpts);
}
});
}
@@ -487,12 +509,12 @@
}
// 澶勭悊骞惰繑鍥炵敓鎴愭姌绾垮浘鐨勬暟鎹�
- function getLineData() {
+ function getLineData(type) {
var rs = {
x: [],
y:[]
};
- var type = $('#statistics').val();
+
// 閬嶅巻allData鐨勫��
for(var i=0; i<allData.length; i++) {
var _allData = allData[i];
@@ -544,6 +566,34 @@
return rs;
}
+
+ // 鑾峰彇鐢熸垚鎶樼嚎鍥剧殑閰嶇疆椤�
+ function getlineGraphOpts(data, type) {
+ var rs = {
+ xdata:[],
+ sdata: [],
+ };
+ rs.xdata = data.x;
+ rs.sdata.push(data.y);
+ rs.tname = '娴侀噺缁熻';
+ rs.lname = ["浣跨敤娴侀噺"];
+ switch(type) {
+ case '3':
+ rs.subtxt = '鎸夊勾缁熻';
+ rs.unit = "G";
+ break;
+ case '1':
+ rs.subtxt = '鎸夋湀缁熻';
+ rs.unit = "M";
+ break;
+ default:
+ rs.subtxt = '鎸夊ぉ缁熻';
+ rs.unit = "M";
+ break;
+ }
+ console.log(rs);
+ return rs;
+ }
});
</script>
</body>
diff --git a/gx_tieta/WebRoot/pages/css/mylayui.css b/gx_tieta/WebRoot/pages/css/mylayui.css
index aab10df..cbbb889 100644
--- a/gx_tieta/WebRoot/pages/css/mylayui.css
+++ b/gx_tieta/WebRoot/pages/css/mylayui.css
@@ -116,13 +116,34 @@
.abs.abs-top100 {
top: 100px;
}
-
+.abs.abs-top200 {
+ top: 200px;
+}
+.abs.abs-top220 {
+ top: 220px;
+}
+.abs.abs-top225 {
+ top: 225px;
+}
+.abs.abs-top230 {
+ top: 230px;
+}
+.abs.abs-top300 {
+ top: 300px;
+}
/* abs-bottom */
.abs.abs-bottom60 {
bottom: 60px;
}
+.abs.abs-bottom70 {
+ bottom: 70px;
+}
.abs.abs-bottom120 {
bottom: 120px;
+}
+/* z-index */
+.abs.abs-index1n {
+ z-index: -1;
}
/* width */
.w272 {
@@ -134,4 +155,18 @@
}
.mrr8 {
margin-right: 8px;
+}
+/* bg-color */
+.bg-red {
+ background-color: #FF0000;
+}
+/* graph */
+.graph {
+ width: 100%;
+ height: 100%;
+ background-color: #FFFFFF;
+}
+.graph-content {
+ width: 100%;
+ height: 100%;
}
\ No newline at end of file
--
Gitblit v1.9.1