pighouse
/
cgq_fx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="resources/css/cgq_fx.css">
    <link href="resources/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="resources/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="resources/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="resources/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="resources/plugins/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="resources/css/zui.css" rel="stylesheet"/>
    <link href="resources/css/zui.lite.css" rel="stylesheet"/>
    <link href="resources/css/zui-theme.css rel="stylesheet"/>
    <title>传感器数据分析</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>


</head>
<body>

<div class="main_page">
<div class="picture" style="height: 100%;width: 70%">
<div class="selects">
    <div class="btn-group" style="margin-left: 10px;margin-right: 10px;">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            猪舍 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="###">1号</a></li>
            <li><a href="###">2号</a></li>
        </ul>
    </div>
    <!-- 分割按钮组 -->
    <div class="btn-group" style="margin-left: 10px;margin-right: 10px;">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">猪栏
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <li><a href="###">1号</a></li>
            <li><a href="###">2号</a></li>
            <li><a href="###">3号</a></li>
        </ul>
    </div>
    <div class="btn-group" style="margin-left: 10px;margin-right: 10px;">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">传感器类型 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="###">温度传感器</a></li>
            <li><a href="###">湿度传感器</a></li>
            <li><a href="###">c02传感器</a></li>
        </ul>
    </div>
    <div class="btn-group" style="margin-left: 10px;margin-right: 10px;">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">起始时间 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="###">1:00</a></li>
            <li><a href="###">2:00</a></li>
            <li><a href="###">3:00</a></li>
        </ul>
    </div>
    <div class="btn-group" style="margin-left: 10px;margin-right: 10px;">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">终止时间 <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="###">1:01</a></li>
            <li><a href="###">1:02</a></li>
            <li><a href="###">1:03</a></li>
        </ul>
    </div>

</div>
    <div id="container" style="height: 800%;width: 100%"></div>

</div>
<div class="selectsButton">
<div class="fx">
    <h2 class="fx_title">传感器设备管控</h2>
    <div class="cl">
        <font size="4px;">自动处理异常：</font>
    <div class="switch switch-inline">
    <input type="checkbox">
    <label>否</label>
    </div>
        <div class="fx_buttongroup">
        <button class="btn btn-block btn-primary" type="button" id="control">传感器远程控制</button>
        <button class="btn btn-block btn-primary" type="button" id="caiji">设置采集间隔</button>
        <button class="btn btn-block btn-primary" type="button" id="message">传感器异常信息查看</button>
            <button class="btn btn-block btn-primary" type="button" id="x_fw">设置x范围</button>
            <button class="btn btn-block btn-primary" type="button" id="method">处理方式</button>
        </div>
</div>
</div>
</div>
</div>
<script src="resources/plugins/jquery.1.12.4.min.js"></script>
<script src="resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="resources/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="resources/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="resources/plugins/waves-0.7.5/waves.min.js"></script>
<script src="resources/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="resources/plugins/select2/js/select2.min.js"></script>

<script src="resources/js/common.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['猪舍1','猪舍2','猪舍3','猪舍4','猪舍5']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],

        series: [
            {
                name:'猪舍1',
                type:'line',
                stack: '1',
                data:[20, 22, 21, 24, 20, 23, 20]
            },
            {
                name:'猪舍2',
                type:'line',
                stack: '230',
                data:[22, 22, 21, 23, 24, 23, 20]
            },
            {
                name:'猪舍3',
                type:'line',
                stack: '3',
                data:[25, 23, 20, 24, 20, 23, 21]
            },
            {
                name:'猪舍4',
                type:'line',
                stack: '4量',
                data:[20, 23, 21, 24, 20, 23, 20]
            },
            {
                name:'猪舍5',
                type:'line',
                stack: '5',
                data:[20, 22, 21, 24, 20, 20, 20]
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>