mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-06-17 06:55:26 +08:00
新增智慧工地模板
This commit is contained in:
郎大伟
parent
88dc752a0d
commit
ea6526b153
48
智慧城市/智慧工地/css/jianlisw.css
Normal file
48
智慧城市/智慧工地/css/jianlisw.css
Normal file
@ -0,0 +1,48 @@
|
||||
/*项目概览*/
|
||||
.none{ display:none}
|
||||
.xmglan{ width:100%;color:#fff; padding:20px 0;}
|
||||
.xmgl_heard{ width:100%; display:block; overflow:hidden}
|
||||
.xmgl_heard li{ float:left; list-style:none; font-size:12px; height:24px; line-height:24px; text-align:center;background:#0068b7; width:50%; cursor:pointer; border-top:1px #032d60 solid;border-bottom:1px #032d60 solid}
|
||||
.xmgl_heard li.hove{ background:#000c3b}
|
||||
|
||||
/*项目概览 */
|
||||
.xm_cszs{ font-size:12px; padding:10px 10px 0 10px; }
|
||||
.xm_cszs li { line-height:22px;overflow:hidden}
|
||||
.xm_cszs li span{ color:#00ff00; padding:0 5px 0 10px}
|
||||
.xm_cszs li p{ float:left;width:33%}
|
||||
.xm_cszs li p span{ color:#00ffff; padding:0}
|
||||
.xm_cszs li p cite{ color:#00ffff;}
|
||||
|
||||
/*项目人员信息状态 */
|
||||
.lytj {width:100%;float: left;height:100px;}
|
||||
.wgrytj_bt{ padding:10px; clear:both; display:block;border-top:1px #032d60 solid; color:#fff}
|
||||
.wgrytj_tb{ padding-left:10px;}
|
||||
|
||||
/*仪表盘等展示*/
|
||||
.center_zs{ width:30%;}
|
||||
.box1-back{height:763px;background-image:-webkit-radial-gradient(250px 250px at 50% 50%,hsla(209,99%,32%,28),hsla(228,100%,0%,0));background-image:radial-gradient(250px 250px at 50% 50%,hsla(209,99%,32%,28),hsla(228,100%,0%,0))}
|
||||
|
||||
/*问题等级*/
|
||||
.wenti_dj{ width:40%; float:left}
|
||||
.wenti_bg{ float:left; padding-top:10px; width:60%;}
|
||||
.wenti_bg table{border-collapse:collapse;border: 1px solid #00a0e9; color:#fff; width:95%}
|
||||
.wenti_bg td{border-collapse:collapse; border: 1px solid #00a0e9; padding:2px 4px; }
|
||||
.wenti_bg td.green{ color:#05d60f; text-align:center}
|
||||
.wenti_bg td.orange{ color:#d75a07; text-align:center}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
23
智慧城市/智慧工地/css/jianlixt.css
Normal file
23
智慧城市/智慧工地/css/jianlixt.css
Normal file
@ -0,0 +1,23 @@
|
||||
/*人力资源基本信息*/
|
||||
.none{ display:none}
|
||||
.rlzy_xx{ width:95%;color:#fff; padding:10px;}
|
||||
.rlzy_heard{ width:100%; display:block;}
|
||||
.rlzy_heard li{ float:left; list-style:none; font-size:12px;background:#999; padding:2px 4px; margin:0 2px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px; -o-border-radius:5px;border-radius:5px; cursor:pointer}
|
||||
.rlzy_heard li.hove{background:#ffc834; }
|
||||
#rlzy_cen{ clear:both}
|
||||
.xueli_tb{width:354px;height:340px;}
|
||||
/*人员能力提升*/
|
||||
.ryclts{ padding:10px;}
|
||||
.ryclts_tb {width:304px;float: left;height:300px; }
|
||||
|
||||
/*仪表盘等展示*/
|
||||
.center_zs{ width:30%;}
|
||||
.box1-back{height:749px;background-image:-webkit-radial-gradient(250px 250px at 50% 50%,hsla(209,99%,32%,28),hsla(228,100%,0%,0));background-image:radial-gradient(250px 250px at 50% 50%,hsla(209,99%,32%,28),hsla(228,100%,0%,0))}
|
||||
|
||||
/*右侧项目管理展示 */
|
||||
.xmcggl{width:480px;height:325px;}
|
||||
|
||||
/*右侧项目管理展示 */
|
||||
.xmgl_zs{ width:100%; clear:both}
|
||||
.xmgl{width:1200px;height:325px;}
|
||||
|
||||
34
智慧城市/智慧工地/css/public.css
Normal file
34
智慧城市/智慧工地/css/public.css
Normal file
@ -0,0 +1,34 @@
|
||||
*{padding:0px;margin:0px;font-family:"微软雅黑";font-size:12px; font-style:normal}
|
||||
dd,dl,dt,em,i,p,textarea,a,div{padding:0px;margin:0px;}
|
||||
a{text-decoration:none;}
|
||||
img{border:0px;}
|
||||
ul,li{padding:0px;margin:0px;list-style:none;}
|
||||
.fl{ float:left}
|
||||
.fr{ float:right}
|
||||
body{margin:0px; padding:0px; color:#000; background:#000c3b;}
|
||||
.clearfix:after,.clearfix:before{content:"";display:table}
|
||||
.clearfix:after{clear:both;overflow:hidden}
|
||||
|
||||
/*头部*/
|
||||
.caption-title{font-size:22px; font-family:"黑体"; color:#fff;max-width:900px;margin:0 auto; height:48px; margin-top:10px;}
|
||||
.biaoti{ line-height:48px; display:inline-block;margin:0px; padding:0px; width:276px; text-align:center;font-size:28px;}
|
||||
.data-box1{border:2px solid #032d60;-webkit-box-shadow:#07417a 0 0 10px;-moz-box-shadow:#07417a 0 0 10px;box-shadow:inset 0 0 30px #07417a;position:relative}
|
||||
|
||||
.zhenwen{ width:96%; margin:0 auto;overflow:hidden; padding-top:30px;}
|
||||
.left_zs{ width:30%;}
|
||||
.left_tb{ width:95%}
|
||||
.mtop40{ margin-top:40px;}
|
||||
.h30{ height:40px;}
|
||||
.right_zs{ width:40%;}
|
||||
.right_tb{ width:95%;float:right}
|
||||
|
||||
/*四个角*/
|
||||
.topL{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:-2px;left:-2px}
|
||||
.topR{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:-2px;right:-2px}
|
||||
.bottomL{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:-2px;left:-2px}
|
||||
.bottomR{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:-2px;right:-2px}
|
||||
|
||||
/*小标题*/
|
||||
.data-title-left,.data-title-right{color:#105eda;font-family:"微软雅黑";font-size:20px}
|
||||
.data-title{background-color:#000c3b;width:178px;margin:-18px auto 0 auto;color:#83c7e3;font-size:20px;}
|
||||
.data-title span{text-align:center;width:150px; display:inline-block; text-align:center;font-size:18px;}
|
||||
BIN
智慧城市/智慧工地/images/title-left.png
Normal file
BIN
智慧城市/智慧工地/images/title-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
智慧城市/智慧工地/images/title-right.png
Normal file
BIN
智慧城市/智慧工地/images/title-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
207
智慧城市/智慧工地/index.html
Normal file
207
智慧城市/智慧工地/index.html
Normal file
@ -0,0 +1,207 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="Generator" content="EditPlus®">
|
||||
<meta name="Author" content="">
|
||||
<meta name="Keywords" content="">
|
||||
<meta name="Description" content="">
|
||||
<link href="css/public.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/jianlisw.css" rel="stylesheet" type="text/css"/>
|
||||
<title>智慧工地</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- banner start -->
|
||||
<div class="caption-title">
|
||||
<i class="fl"><img src="images/title-left.png" ></i>
|
||||
<span class="biaoti fl">智慧工地</span>
|
||||
<i class="fr"><img src="images/title-right.png" ></i>
|
||||
</div>
|
||||
<!-- 内容正文 -->
|
||||
<div class="zhenwen">
|
||||
<div class="left_zs fl">
|
||||
<!-- 项目概览 -->
|
||||
<div class="data-box1 left_tb fl">
|
||||
<i class="topL"></i>
|
||||
<i class="topR"></i>
|
||||
<i class="bottomL"></i>
|
||||
<i class="bottomR"></i>
|
||||
<div class="data-title">
|
||||
<b class="data-title-left fl">[</b>
|
||||
<span>项目概览</span>
|
||||
<b class="data-title-right fr">]</b>
|
||||
</div>
|
||||
<!-- 项目概览-->
|
||||
<div class="xmglan">
|
||||
<ul class="xmgl_heard">
|
||||
<li>当前</li>
|
||||
<li class="hove">历史</li>
|
||||
</ul>
|
||||
<div id="xmgl_cen">
|
||||
<div class="xmgl_tb">
|
||||
<ul class="xm_cszs">
|
||||
<li>在建项目（个）:<span>100</span>个</li>
|
||||
<li> 在建工地面积（平米）：<span>100</span>万M</li>
|
||||
<li>
|
||||
<p>市政（%）:<span>100</span><cite>%</cite></p>
|
||||
<p>绿化（%）:<span>100</span><cite>%</cite></p>
|
||||
<p>房建（%）<span>100</span><cite>%</cite></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>交建（%）<span>100</span><cite>%</cite></p>
|
||||
<p>其他（%）<span>100</span><cite>%</cite></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="xmgl_tb none">
|
||||
<ul class="xm_cszs">
|
||||
<li>在建项目（个）:<span>140</span>个</li>
|
||||
<li> 在建工地面积（平米）：<span>120</span>万M</li>
|
||||
<li>
|
||||
<p>市政（%）:<span>110</span><cite>%</cite></p>
|
||||
<p>绿化（%）:<span>140</span><cite>%</cite></p>
|
||||
<p>房建（%）<span>180</span><cite>%</cite></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>交建（%）<span>10</span><cite>%</cite></p>
|
||||
<p>其他（%）<span>140</span><cite>%</cite></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 项目人员信息状态 -->
|
||||
<div class="data-box1 left_tb fl mtop40">
|
||||
<i class="topL"></i>
|
||||
<i class="topR"></i>
|
||||
<i class="bottomL"></i>
|
||||
<i class="bottomR"></i>
|
||||
<div class="data-title">
|
||||
<b class="data-title-left fl">[</b>
|
||||
<span>项目人员信息状态</span>
|
||||
<b class="data-title-right fr">]</b>
|
||||
</div>
|
||||
<!-- 项目人员信息状态-->
|
||||
<div class="xmglan">
|
||||
<div id="lytj" class="lytj"></div>
|
||||
|
||||
<div class="wgrytj">
|
||||
<span class="wgrytj_bt">务工人员工种统计</span>
|
||||
<div class="wgrytj_tb">
|
||||
<div id="gztj" style="height:163px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wgrytj">
|
||||
<span class="wgrytj_bt">各公司现场人员统计</span>
|
||||
<div class="wgrytj_tb">
|
||||
<div id="xcrytj" style="height:163px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--仪表盘等展示-->
|
||||
<div class="center_zs fl">
|
||||
<div class="data-box1 box1-back">
|
||||
<i class="topL"></i>
|
||||
<i class="topR"></i>
|
||||
<i class="bottomL"></i>
|
||||
<i class="bottomR"></i>
|
||||
<div class="data-title">
|
||||
<b class="data-title-left">[</b>
|
||||
<span>仪表盘等展示</span>
|
||||
<b class="data-title-right">]</b>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--右侧图表展示 -->
|
||||
<div class="right_zs fl">
|
||||
<!-- 巡检风险状态 -->
|
||||
<div class="data-box1 right_tb ">
|
||||
<i class="topL"></i>
|
||||
<i class="topR"></i>
|
||||
<i class="bottomL"></i>
|
||||
<i class="bottomR"></i>
|
||||
<div class="data-title">
|
||||
<b class="data-title-left">[</b>
|
||||
<span>巡检风险状态</span>
|
||||
<b class="data-title-right">]</b>
|
||||
</div>
|
||||
<!--巡检风险状态-->
|
||||
<div class="ryclts">
|
||||
<div id="xjfxzt" style="height:300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 风险变化趋势 -->
|
||||
<div class="data-box1 right_tb mtop40">
|
||||
<i class="topL"></i>
|
||||
<i class="topR"></i>
|
||||
<i class="bottomL"></i>
|
||||
<i class="bottomR"></i>
|
||||
<div class="data-title">
|
||||
<b class="data-title-left">[</b>
|
||||
<span>风险变化趋势</span>
|
||||
<b class="data-title-right">]</b>
|
||||
</div>
|
||||
<!--问题等级-->
|
||||
<div class="ryclts">
|
||||
<div class="clearfix"><div id="fxbhqs" style="height:300px"></div></div>
|
||||
<div class="wgrytj">
|
||||
<div class="wenti_dj">
|
||||
<div id="wentidj" style="height:100px"></div>
|
||||
</div>
|
||||
<div class="wenti_bg">
|
||||
<table width="200" border="1">
|
||||
<tr>
|
||||
<td>类别</td>
|
||||
<td>发现总是</td>
|
||||
<td>重大问题</td>
|
||||
<td>一般问题</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>质量问题</td>
|
||||
<td class="green">45</td>
|
||||
<td class="orange">300</td>
|
||||
<td class="green">40</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>安全问题</td>
|
||||
<td class="green">36</td>
|
||||
<td class="orange">100</td>
|
||||
<td class="green">78</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="h30 clearfix"></div>
|
||||
</body>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/monitor_sw.js"></script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
//分类选择
|
||||
$(".xmgl_heard li").click(function(){
|
||||
|
||||
$(this).attr("class","");
|
||||
$(this).siblings().attr("class","hove");
|
||||
$("#xmgl_cen").find(".xmgl_tb").eq($(this).index()).removeClass("none").siblings().addClass("none")
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
22
智慧城市/智慧工地/js/echarts.min.js
vendored
Normal file
22
智慧城市/智慧工地/js/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
智慧城市/智慧工地/js/jquery.min.js
vendored
Normal file
6
智慧城市/智慧工地/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
854
智慧城市/智慧工地/js/monitor.js
Normal file
854
智慧城市/智慧工地/js/monitor.js
Normal file
@ -0,0 +1,854 @@
|
||||
/*############# 学历 岗位 ###############*/
|
||||
var dom = document.getElementById("xueli");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '学历',
|
||||
show:false,
|
||||
textStyle: {
|
||||
color: 'rgba(221,221,221,1)', //标题颜色
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
//left: 'center',
|
||||
//top: 'bottom',
|
||||
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#0ff',
|
||||
},
|
||||
//图表上方显示的分类的位置定义
|
||||
top: "0%",
|
||||
left: "2%", // 图例组件离容器右侧的距离
|
||||
data: ['学历', '岗位'],
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
},
|
||||
},
|
||||
// 设置雷达图中间射线的颜色
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(131,141,158,.1)',
|
||||
},
|
||||
},
|
||||
indicator: [
|
||||
{ name: '初中及以下', max: 500},
|
||||
{ name: '高中', max: 660},
|
||||
{ name: '大专', max: 300},
|
||||
{ name: '本科', max: 900},
|
||||
{ name: '本科', max: 900},
|
||||
{ name: '博士及以上', max: 900},
|
||||
],
|
||||
//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
||||
splitArea : {
|
||||
show : false,
|
||||
areaStyle : {
|
||||
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||||
},
|
||||
},
|
||||
//splitLine : {
|
||||
// show : true,
|
||||
// lineStyle : {
|
||||
// width : 1,
|
||||
// color : 'rgba(0,0,0,.1)', // 设置网格的颜色
|
||||
// },
|
||||
// },
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: '学历', // tooltip中的标题
|
||||
type: 'radar', //表示是雷达图
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [430, 100, 280, 350, 500, 190],
|
||||
name : '学历',
|
||||
// 设置区域边框和区域的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#009991',
|
||||
lineStyle: {
|
||||
color: 'rgba(3,78,80,.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
}, {
|
||||
value : [230, 300, 180, 450, 300, 290],
|
||||
name : '岗位',
|
||||
// 设置区域边框和区域的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#009991',
|
||||
lineStyle: {
|
||||
color: 'rgba(3,78,80,.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
]
|
||||
}]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/*############# 工种 ###############*/
|
||||
var dom = document.getElementById("gongzhong");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '工种',
|
||||
show:false,
|
||||
textStyle: {
|
||||
color: 'rgba(221,221,221,1)', //标题颜色
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
//left: 'center',
|
||||
//top: 'bottom',
|
||||
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
},
|
||||
},
|
||||
// 设置雷达图中间射线的颜色
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(131,141,158,.1)',
|
||||
},
|
||||
},
|
||||
indicator: [
|
||||
{ name: '木工', max: 500},
|
||||
{ name: '钢筋工', max: 660},
|
||||
{ name: '瓦泥工', max: 900},
|
||||
{ name: '电焊工', max: 900},
|
||||
{ name: '起重工', max: 900},
|
||||
],
|
||||
//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
||||
splitArea : {
|
||||
show : false,
|
||||
areaStyle : {
|
||||
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||||
},
|
||||
},
|
||||
//splitLine : {
|
||||
// show : true,
|
||||
// lineStyle : {
|
||||
// width : 1,
|
||||
// color : 'rgba(0,0,0,.1)', // 设置网格的颜色
|
||||
// },
|
||||
// },
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: '工种', // tooltip中的标题
|
||||
type: 'radar', //表示是雷达图
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [100, 280, 350, 500, 190],
|
||||
name : '工种',
|
||||
// 设置区域边框和区域的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#009991',
|
||||
lineStyle: {
|
||||
color: 'rgba(3,78,80,.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
var dom = document.getElementById("nianlin");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '年龄',
|
||||
show:false,
|
||||
textStyle: {
|
||||
color: 'rgba(221,221,221,1)', //标题颜色
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
//left: 'center',
|
||||
//top: 'bottom',
|
||||
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
},
|
||||
},
|
||||
// 设置雷达图中间射线的颜色
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(131,141,158,.1)',
|
||||
},
|
||||
},
|
||||
indicator: [
|
||||
{ name: '25', max: 500},
|
||||
{ name: '30', max: 660},
|
||||
{ name: '35', max: 900},
|
||||
{ name: '40', max: 900},
|
||||
{ name: '45', max: 900},
|
||||
{ name: '50', max: 900},
|
||||
],
|
||||
//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
||||
splitArea : {
|
||||
show : false,
|
||||
areaStyle : {
|
||||
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||||
},
|
||||
},
|
||||
//splitLine : {
|
||||
// show : true,
|
||||
// lineStyle : {
|
||||
// width : 1,
|
||||
// color : 'rgba(0,0,0,.1)', // 设置网格的颜色
|
||||
// },
|
||||
// },
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: '年龄', // tooltip中的标题
|
||||
type: 'radar', //表示是雷达图
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [150, 230, 450, 100,300,190],
|
||||
name : '年龄',
|
||||
// 设置区域边框和区域的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#009991',
|
||||
lineStyle: {
|
||||
color: 'rgba(3,78,80,.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/*############# 工种 ###############*/
|
||||
var dom = document.getElementById("gongzhong");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '工种',
|
||||
show:false,
|
||||
textStyle: {
|
||||
color: 'rgba(221,221,221,1)', //标题颜色
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
//left: 'center',
|
||||
//top: 'bottom',
|
||||
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
},
|
||||
},
|
||||
// 设置雷达图中间射线的颜色
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(131,141,158,.1)',
|
||||
},
|
||||
},
|
||||
indicator: [
|
||||
{ name: '木工', max: 500},
|
||||
{ name: '钢筋工', max: 660},
|
||||
{ name: '瓦泥工', max: 900},
|
||||
{ name: '电焊工', max: 900},
|
||||
{ name: '起重工', max: 900},
|
||||
],
|
||||
//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
||||
splitArea : {
|
||||
show : false,
|
||||
areaStyle : {
|
||||
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||||
},
|
||||
},
|
||||
//splitLine : {
|
||||
// show : true,
|
||||
// lineStyle : {
|
||||
// width : 1,
|
||||
// color : 'rgba(0,0,0,.1)', // 设置网格的颜色
|
||||
// },
|
||||
// },
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: '工种', // tooltip中的标题
|
||||
type: 'radar', //表示是雷达图
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [100, 280, 350, 500, 190],
|
||||
name : '工种',
|
||||
// 设置区域边框和区域的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#009991',
|
||||
lineStyle: {
|
||||
color: 'rgba(3,78,80,.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/*############# 经验 #############*/
|
||||
var dom = document.getElementById("jingyan");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '经验',
|
||||
show:false,
|
||||
textStyle: {
|
||||
color: 'rgba(221,221,221,1)', //标题颜色
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
//left: 'center',
|
||||
//top: 'bottom',
|
||||
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
},
|
||||
},
|
||||
// 设置雷达图中间射线的颜色
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(131,141,158,.1)',
|
||||
},
|
||||
},
|
||||
indicator: [
|
||||
{ name: '初级（工龄）', max: 500},
|
||||
{ name: '中级（工龄）', max: 360},
|
||||
{ name: '高级（工龄）', max: 200},
|
||||
],
|
||||
//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
||||
splitArea : {
|
||||
show : false,
|
||||
areaStyle : {
|
||||
color: 'rgba(255,0,0,0)', // 图表背景的颜色
|
||||
},
|
||||
},
|
||||
//splitLine : {
|
||||
// show : true,
|
||||
// lineStyle : {
|
||||
// width : 1,
|
||||
// color : 'rgba(0,0,0,.1)', // 设置网格的颜色
|
||||
// },
|
||||
// },
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: '年龄', // tooltip中的标题
|
||||
type: 'radar', //表示是雷达图
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [150, 230,190],
|
||||
name : '年龄',
|
||||
// 设置区域边框和区域的颜色
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#009991',
|
||||
lineStyle: {
|
||||
color: 'rgba(3,78,80,.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/*############# 人员能力提升 ###############*/
|
||||
var dom = document.getElementById("rynlts");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '人员能力提升',
|
||||
textStyle: {
|
||||
color: '#fff', //标题颜色
|
||||
fontSize: 12,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
left: '0%',
|
||||
top: '0%',
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 3,
|
||||
padding: [3, 5]
|
||||
},
|
||||
},
|
||||
indicator: [
|
||||
{ name: '项目编号', max: 800},
|
||||
{ name: '项目组', max: 800},
|
||||
{ name: '人名', max: 800},
|
||||
{ name: '知识', max: 800},
|
||||
{ name: '技能', max: 800},
|
||||
{ name: '态度', max: 800},
|
||||
{ name: '特质', max: 800},
|
||||
{ name: '动机', max: 800}
|
||||
]
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
// areaStyle: {normal: {}},
|
||||
data : [
|
||||
{
|
||||
value : [430, 100, 280, 350, 500, 450, 200, 190],
|
||||
name : 'aa'
|
||||
},
|
||||
|
||||
]
|
||||
}]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*############# 项目成本管理 ###############*/
|
||||
|
||||
var dom = document.getElementById("xmcbgl");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '项目成本管理',
|
||||
textStyle: {
|
||||
color: 'rgba(221,221,221,1)', //标题颜色
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 标题的位置，此时放在图的底边
|
||||
top: "20px",
|
||||
left: "2%",
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:['项目编号','项目名称','工作量投入（量化）'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'项目编号',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {},
|
||||
data:[120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 132, 101]
|
||||
},
|
||||
{
|
||||
name:'项目名称',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {},
|
||||
data:[220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330,101]
|
||||
},
|
||||
{
|
||||
name:'工作量投入（量化）',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {},
|
||||
data:[150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330,101]
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
/*################ 目标与计 划##############*/
|
||||
var chart1 = echarts.init(document.getElementById("duzhu"));
|
||||
var dataX = ['项目编号', '项目名称', '投入人力', '目标人力', '投入时间', '目标时间', '投入费用', '目标费用'];
|
||||
var dataY1 = [100,350,500,680,,340,290,180];
|
||||
var dataY2 = [80,250,350,480,580,240,200,95];
|
||||
var dataY3 = [20,100,150,200,300,300,240,260];
|
||||
var dataY4 = [40,120,100,260,380,120,110,360];
|
||||
|
||||
option = {
|
||||
|
||||
title : {
|
||||
text : '各教育阶段人数统计',
|
||||
show:false
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
top: "0%",
|
||||
left: "0%",
|
||||
orient: 'horizontal',
|
||||
data: ['工程项目一','工程项目二','工程项目四', '工程项目三']
|
||||
},
|
||||
grid: {
|
||||
containLabel: false
|
||||
},
|
||||
tooltip: {
|
||||
show: "true",
|
||||
trigger: 'item',
|
||||
formatter : "{a}<br/>{b} : {c}人"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#333333',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
inside: false,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'normal',
|
||||
fontSize: '12',
|
||||
},
|
||||
formatter:function(value){
|
||||
return value.split("").join("\n")
|
||||
},
|
||||
},
|
||||
data: dataX
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0997c1',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#333',
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'normal',
|
||||
fontSize: '12',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '工程项目一',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color:'#0997c1',
|
||||
barBorderRadius: 0,
|
||||
borderWidth: 0,
|
||||
}
|
||||
},
|
||||
zlevel: 2,
|
||||
barWidth: '10%',
|
||||
data: dataY1
|
||||
}, {
|
||||
name: '工程项目二',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#c22167',
|
||||
}
|
||||
},
|
||||
zlevel: 2,
|
||||
barGap: '100%',
|
||||
data: dataY2
|
||||
}, {
|
||||
name: '工程项目四',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#082773',
|
||||
}
|
||||
},
|
||||
zlevel: 2,
|
||||
barGap: '100%',
|
||||
data: dataY2
|
||||
}, {
|
||||
name: '工程项目三',
|
||||
type: 'bar',
|
||||
barWidth: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#604fb9',
|
||||
barBorderRadius: 0,
|
||||
borderWidth: 0,
|
||||
}
|
||||
},
|
||||
zlevel: 2,
|
||||
barGap: '100%',
|
||||
data: dataY3
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表
|
||||
chart1.setOption(option)
|
||||
|
||||
/*############# 项目管理（事务） ###############*/
|
||||
var dom = document.getElementById("xmgl");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
||||
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['项目编号','投入人力量化指标', '投入资金（万元）','工期时间（量化）'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
interval:0,
|
||||
rotate:10,
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['项目项目项目项目项目项目 ','项目二','项目三','项目四','项目五','项目六','项目日'],
|
||||
axisLabel: {
|
||||
interval:0,
|
||||
rotate:10,
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '项目编号',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
}
|
||||
},
|
||||
data: [320, 302, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '投入人力量化指标',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
}
|
||||
},
|
||||
data: [320, 302, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '投入资金（万元）',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
}
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '工期时间（量化）',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
}
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
|
||||
]
|
||||
};;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
441
智慧城市/智慧工地/js/monitor_sw.js
Normal file
441
智慧城市/智慧工地/js/monitor_sw.js
Normal file
@ -0,0 +1,441 @@
|
||||
/*################# 项目人员信息状态 #####################*/
|
||||
var dom = document.getElementById("lytj");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
app.title = '环形图';
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data:[]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'访问来源',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
|
||||
|
||||
textStyle : {
|
||||
align : 'center',
|
||||
baseline : 'middle',
|
||||
fontFamily : '微软雅黑',
|
||||
fontSize : 12,
|
||||
fontWeight : 'bolder'
|
||||
}
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '12',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
|
||||
|
||||
textStyle : {
|
||||
align : 'center',
|
||||
baseline : 'middle',
|
||||
fontFamily : '微软雅黑',
|
||||
fontSize : 15,
|
||||
fontWeight : 'bolder'
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'质量'},
|
||||
{value:310, name:'安全'},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/*################# 务工人员工种统计 #####################*/
|
||||
|
||||
var dom = document.getElementById("gztj");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
app.title = '环形图';
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data:['木工','钢筋工','瓦泥工','电焊工','起重工'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'访问来源',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle : {
|
||||
align : 'center',
|
||||
baseline : 'middle',
|
||||
fontFamily : '微软雅黑',
|
||||
fontSize : 12,
|
||||
fontWeight : 'normal'
|
||||
}
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '12',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'木工'},
|
||||
{value:310, name:'钢筋工'},
|
||||
{value:234, name:'瓦泥工'},
|
||||
{value:135, name:'电焊工'},
|
||||
{value:1548, name:'起重工'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
/*################# 各公司现场人员统计 #####################*/
|
||||
|
||||
var dom = document.getElementById("xcrytj");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
app.title = '环形图';
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data:['中国建筑','万科','金地','韩村河建筑','中国铁建'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'访问来源',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle : {
|
||||
align : 'center',
|
||||
baseline : 'middle',
|
||||
fontFamily : '微软雅黑',
|
||||
fontSize : 12,
|
||||
fontWeight : 'normal'
|
||||
}
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '12',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'中国建筑'},
|
||||
{value:310, name:'万科'},
|
||||
{value:234, name:'金地'},
|
||||
{value:135, name:'韩村河建筑'},
|
||||
{value:148, name:'中国铁建'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
/*################## 巡检风险状态 ##################*/
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['所属工地','风险程度'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['内蒙','玉树自治区','河北省张家口','吉林省'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#657c97'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '风险程度',
|
||||
nameTextStyle : {
|
||||
color: "#657c97",
|
||||
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
|
||||
textStyle: {
|
||||
color: '#657c97'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name:'所属工地',
|
||||
type:'bar',
|
||||
|
||||
/*设置柱状图颜色*/
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#83bff6'},
|
||||
{offset: 0.5, color: '#0ff'},
|
||||
{offset: 1, color: '#188df0'}
|
||||
]
|
||||
),
|
||||
/*信息显示方式*/
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
formatter: '{b}\n{c}'
|
||||
}
|
||||
}
|
||||
},
|
||||
data:[50, 75, 40, 70]
|
||||
},
|
||||
{
|
||||
name:'风险程度',
|
||||
type:'line',
|
||||
itemStyle : { /*设置折线颜色*/
|
||||
normal : {
|
||||
//color:'#0ff'
|
||||
}
|
||||
},
|
||||
data:[50, 75, 40, 70]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('xjfxzt'));
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
|
||||
/*############## 风险变化趋势 #####################*/
|
||||
|
||||
var dom = document.getElementById("fxbhqs");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
title: {
|
||||
text: '风险变化趋势',
|
||||
//是否显示标题组件
|
||||
show:false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['项目起始时间','安全问题','质量问题','环保问题'],
|
||||
top: "3%",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2018/1','2018/2','2018/3','2018/4','2018/5','2018/6','2018/7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#657c97'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#657c97'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'项目起始时间',
|
||||
type:'line',
|
||||
|
||||
stack: '总量',
|
||||
data:[120, 132, 101, 134, 90, 230, 210],
|
||||
// 显示数值
|
||||
itemStyle : { normal: {label : {show: true}}}
|
||||
},
|
||||
{
|
||||
name:'安全问题',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[100, 182, 191, 104, 290,130,200],
|
||||
// 显示数值
|
||||
itemStyle : { normal: {label : {show: true}}}
|
||||
},
|
||||
{
|
||||
name:'质量问题',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[220, 182, 191, 234, 290, 330, 310],
|
||||
// 显示数值
|
||||
itemStyle : { normal: {label : {show: true}}}
|
||||
},
|
||||
{
|
||||
name:'环保问题',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:[120, 102, 121, 124, 110, 120, 110],
|
||||
// 显示数值
|
||||
itemStyle : { normal: {label : {show: true}}}
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
/*################### 问题等级 ###################*/
|
||||
var dom = document.getElementById("wentidj");
|
||||
var myChart = echarts.init(dom);
|
||||
var app = {};
|
||||
option = null;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data:[]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'问题类别',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside', //让文字显示在柱子上
|
||||
formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
|
||||
},
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'质量问题'},
|
||||
{value:310, name:'安全问题'},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
;
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user