添加折线图

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>


 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%;

}