原始代码制作的数据网页

总述：智能厂房画面监控：

      通过末端设备采集数据经过后台传送到前端页面显示出来。

一、导航-功耗(数据展示)

图片-1.实时功耗-柱状图：

图片-2.历史功耗-柱状图：

代码：

<div class="zhengju">
    <header>
        <img class="im" src="../../../../项目/images/上海夜景.jpg" alt="上海夜景">
        <div class="meitou">
           <div class="meitou1">电量数据监测平台</div>
           <div class="meitou2">
               <span class="v1">首页</span>
               <span class="v2">关于我们</span>
               <span class="v2">联系我们</span>
           </div>
        </div>
        <p>厂房电量功耗数据展示</p>
    </header>
    <ul>
        <li><img  class="v3" src="../../../../项目/images/menu.png" alt="功耗"></li>
        <li><img  class="v4" src="../../../../项目/images/chuanganqi.png" alt="传感器"></li>
        <li><img  class="v5" src="../../../../项目/images/guzhang.png" alt="故障"></li>
        <li><img  class="v6" src="../../../../项目/images/guanyu.png" alt="关于"></li>
    </ul>
 <!--导航功耗下面的整块-->
    <div id="di">
        <table class="tb1i">
            <tr><td  class="t1i">实时</td><td  class="t2i">历史</td></tr>
        </table>
        <!--t1i下面的块-->
        <div id="dv3i">
            <div class="dv1i">所有厂房实时功耗</div>
            <div id="dv2i"></div>
        </div>
        <!--t2i下面的块-->
        <div id="dv33i">
             <div class="dv11i">所有厂房实时功耗</div>
             <select class="s2i">
                <option value="房间一">房间一</option>
                <option value="房间二">房间二</option>
                <option value="房间二">房间二</option>
                <option value="房间二">房间二</option>
             </select>
             <input  class="s3i" type="date" value="2018-07-18">
             <select class="s4i">
                <option value="全天">全天</option>
                <option value="上午">上午</option>
                <option value="下午">下午</option>
                <option value="自定义">自定义</option>
            </select>
             <div id="dv21i"></div>
        </div>
    </div>
</div>        
<!--#dv3i中的#dv2i柱状图-->
<script>
    var myChart=echarts.init(document.getElementById('dv2i'));
    var option={
   
        xAxis:{
   
            tooltip:{
   },
            data:["周一","周二","周三","周四","周五","周六","周日"],
            splitLine:{
   
                show:true,
                lineStyle:{
   
                    color:['#28478b'],
                    opacity:0.5
                }
            },
            axisLabel:{
   
                color:'#5e886e',
                fontSize:10
            }
        },
        yAxis:{
   
            axisLine:{
   
                show:true,
                lineStyle:{
   
                    color:'#3374a1',
                    width:1
                }
            },
            splitLine:{
   
                show:true,
                lineStyle:{
   
                    color:['#28478b'],
                    opacity:0.5
                }
            },
            axisLabel:{
   
                color:'#a6af9a'
            }
        },
        series:[{
   
            type: 'bar',
            smooth:true,
            data: [130, 70, 290, 180, 330, 230, 130],
            // symbol: 'circle',
            // symbolSize: 7,
            itemStyle:{
   
                normal:{
   
                    color:['#53b3c8'],
                    // borderWidth:2,
                    // lineStyle:{
   
                    //     color: ['#53b3c8'],
                    //      width:1
                    // }
                }
            },
            barWidth:'30',
            barCategoryGap:'20%'
        }]
    };
    myChart.setOption(option);
</script>

代码构思描述：
一、首先实现了所有灯光实时功耗柱状图：
1、先构建一个div大块(.zhengju)来包容所有页面；
2、整块的div(.zhengju)分割成头部(header)和导航栏(ul)，及导航栏相对应的各个小div块(#di,#dv,#dp,#dq);
3、头部(header)中加入背景img，在header里在创建个div(.meitou)做眉头（左右两边字体，通过position:absolute定位）
4、导航栏用ul,li中的img实现，其余3个img图片是用代码合成的图片并且每个导航栏取一个class(.v3、.v4、.v5、.v6),用来实现点击每个导航栏，取一个class,触发一个click事件，导航栏下面的画面随之改变(这里用了hide()和show()来隐藏和显示画面)；
5、导航栏相对应的各个小div(#di,#dv,#dp,#dq)块：首先讲实时柱状图div(#di)，创建一个div(#di),在div中用table建立栏目条，显示“实时(.t1i)”和“历史(.t2i)”情况，当点击“实时(.t1i)”时，触发click事件，显示实时(.t1i)下面的块状图(#dv3i)，同时历史(.t2i)功耗下面的块状图(#dv33i)隐藏，点击“历史(.t2i)”时则情况反之；
6、柱状图用echarts实现：首先构建一个块div(#dv2i)，其次初始化这个块，用myChart=echarts.init();，然后设置option={};来构建块中的图形结构，最后调用这个块myChart.setOption(option);

二、导航-传感器(功耗数据展示)：

图片-1.实时功耗-曲线图

图片-1.实时功耗-饼图

图片-2.历史功耗-曲线图：

图片-2.历史功耗-饼图：

代码:

     <!--导航传感器标签下面的整块-->
    <div id="dv">
        <table class="tb1v"