添加折线图

hdw

2018-11-06 f4aac33f3dac3d86ed30936c87a5970bfeba6310

 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>