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:'微软雅黑';
}