移动APP开发

1、home.html

<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>mytitle</title>
        <link href="../css/home.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="../script/jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="../script/home.js"></script>        
    </head>
    <body>
        <div id="content"></div>
        <div  id="menu" class="menu">
            <div id="one" class="subMenu text-center" data-src="newslist.html">
                <img class="news_img" src="../image/tab_news_press.png"/>
                <div class="menu_name">
                    任务
                </div>
            </div>
            <div id="two" class="subMenu text-center" data-src="piegraph.html">
                <img class="watch_img" data-imgname="tab_watch" src="../image/tab_watch_normal.png"/>
                <div class="menu_name">
                    监控
                </div>
            </div>
        </div>
    </body>
</html>

========================================
===============home.css==================

* {
    box-sizing: border-box;
}

body {
    margin: 0  5px;
    font-family: 微软雅黑;  
}

header {
    height: 60px;
    line-height: 60px;
    width: 100%;
    color: #fff;
    font-family: "微软雅黑";
    font-weight: 200;
    font-size: 20px;
    /*背景色渐变*/
    background: linear-gradient(to bottom right, #F56739, #FB9749);
}

#content {
    background: linear-gradient(to bottom right, #f5f454, #fbd1b7);
}

.menu {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #474747;
    padding-top: 10px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

.subMenu {
    width: 50%;
    float: left;
    cursor: pointer;
    font-family: "微软雅黑";
}

.menu_name {
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-family: "微软雅黑";
}

.news_img,.watch_img{
    height: 24px;
    width: 24px;
}

img {
    vertical-align: middle;
    border: 0;
}

.active {
    color: #FFA129;
}

.text-center {
    text-align: center
}

==============================================
home.js

==============================================


$(document).ready(function() {

    //点击事件
    $(".subMenu").click(function() {
        $('.subMenu').removeClass("active");
        var index = $('.subMenu').index(this);
        $(this).addClass("active");
        if(index==0){
            var srcselect = "../image/tab_news_press.png";
            var src = "../image/tab_watch_normal.png";
            $('.news_img').attr("src", srcselect);
            $('.watch_img').attr("src", src);

        }else{
            var srcselect = "../image/tab_watch_press.png";
            var src = "../image/tab_news_normal.png";
            $('.news_img').attr("src", src);
            $('.watch_img').attr("src", srcselect);
        }
        // content根据点击按钮加载不同的html
        var page = $(this).attr("data-src");
        if (page) {
            $("#content").load(page)
        }
    });
    // 自动点击第一个菜单
    $(".subMenu")[0].click();
});
/*content高度*/
function initSize() {
    var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
    $("#content").height(height + "px");
}

============================================
2、graph.html

============================================

<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
        <title>图表</title>
        <link rel="stylesheet" type="" href="../css/piegraph.css" />
        <script type="text/javascript" src="../script/jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="../script/echarts.min.js"></script>
        <script type="text/javascript" src="../script/piegraph.js"></script>

    </head>
    <body>
        <div class="top">各地数据展示</div>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="bingtu" style="width: 100%;height:200px;"></div>
        <div id="zhuxing" style="width: 100%;height:200px;"></div>
        <div class="bottom">
            <div class="btn">
                <button class="zhu">柱状图</button>
                <button class="bing">饼图</button>
            </div>
            <div class="title">使用情况</div>
            <div>
                <div class="change">
                    <span class="head">总量</span>
                    <span class="data">300</span>
                </div>
                <div class="change">
                    <span class="head">同比增长</span>
                    <span class="data">-30%</span>
                </div>
            </div>
        </div>
    </body>
</html>

===========================================
================graph.js=====================


$(document).ready(function() {
    var height = $(window).height();
    var width = $(window).width();
    $("#bingtu").height(height / 2);
    $("#bingtu").width(width);
    $("#zhuxing").height(height / 2);
    $("#zhuxing").width(width);

    $('.zhu').click(function() {
        $('.zhu').addClass('focus');
        $('.bing').removeClass('focus');
        $('#bingtu').hide();
        $('#zhuxing').show();
    });
    $('.bing').click(function() {
        $('.bing').addClass('focus');
        $('.zhu').removeClass('focus');
        $('#bingtu').show();
        $('#zhuxing').hide();
    });
    $('.zhu').click();
    $.get("http://192.168.102.31:8001/process/service/a_dw_design01/power", function(data, status) {
        var powerlist = data.data;
        showPie(powerlist);
        showColumnar(powerlist);
    });
});

function showPie(powerlist) {
    var piedata = [];
    for (var i = 0; i < powerlist.length; i++) {
        var pie = {};
        pie.value = powerlist[i].elec;
        pie.name = powerlist[i].location;
        piedata.push(pie);
    }

    var myChart = echarts.init(document.getElementById('bingtu'));
    var option = {
        backgroundColor : '#FFFFFF',
        textStyle : {
            color : 'rgba(255, 97, 0, 0.8)'
        },
        series : [{
            name : '电量使用',
            type : 'pie',
            radius : ['20%', '60%'],
            data : piedata,
            roseType : 'angle',
            itemStyle : {
                emphasis : {
                    shadowBlur : 200,
                    shadowColor : 'rgba(0, 0, 0, 0.5)'
                }
            },
            label : {
                normal : {
                    textStyle : {
                        color : 'rgba(255, 97, 0, 0.8)'
                    }
                }
            },
            labelLine : {
                normal : {
                    lineStyle : {
                        color : 'rgba(255, 97, 0, 0.8)'
                    }
                }
            }

        }]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function showColumnar(powerlist) {
    var valuedata = [];
    var namedata = [];
    for (var i = 0; i < powerlist.length; i++) {
        valuedata.push(powerlist[i].elec);
        namedata.push(powerlist[i].location);
    }
    // 基于准备好的dom，初始化echarts实例
    var zhuxing = echarts.init(document.getElementById('zhuxing'));
    // 指定图表的配置项和数据
    var option = {
        tooltip : {},
        legend : {
            data : ['电量']
        },
        xAxis : {
            data : namedata
        },
        yAxis : {},
        series : [{
            name : '电量',
            type : 'bar',
            data : valuedata
        }]
    };

    // 使用刚指定的配置项和数据显示图表
    zhuxing.setOption(option);
}

==============================================
======================graph.css=================

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.top{
    text-align:center;
    width:100%; 
    padding:5px;
    font-family:'微软雅黑';
    background-color:#31B0D5;
}
.btn {
    text-align: center;
    width:100%;
}

.btn button {
    padding: 8px;
    font-size: 18px;
    width: 70px;
    height: 70px;
    margin: 0 20px;
    border-radius: 35px;
    border: 0 solid red;
    font-family:'微软雅黑';
}
.btn .focus {
    background-color: #31B0D5;
}

.title {
    text-align: center;
    margin: 8px;
    font-size: 18px;
    font-family:'微软雅黑';
}

.change {
    display: inline-block;
    width: 49%;
    text-align: center;
    font-family:'微软雅黑';
}

.change .head {
    display: block;
    font-size: 18px;
    font-family:'微软雅黑';
}

.change .data {
    font-size: 18px;
    padding: 10px;
    color: red;
    font-family:'微软雅黑';
}

猜你喜欢