1252 lines
26 KiB
HTML
1252 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title></title>
|
||
<script src="js/layui-v2.5.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
|
||
<link rel="stylesheet" type="text/css" href="js/layui-v2.5.4/layui/css/layui.css" />
|
||
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
||
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
|
||
<style type="text/css">
|
||
.clearBox::after {
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
|
||
.main_top {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
padding: 10px 0px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.main_item_div {
|
||
width: 19%;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.main_item_div p {
|
||
color: #FFF;
|
||
font-size: 14px;
|
||
padding: 3px 0px;
|
||
|
||
}
|
||
|
||
.main_item_div p a {
|
||
color: #FFF;
|
||
}
|
||
|
||
.addBolder_a {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.a_margin {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.bacl_big {
|
||
display: block;
|
||
position: absolute;
|
||
width: 100px;
|
||
height: 100px;
|
||
right: 3%;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
opacity: .5;
|
||
}
|
||
|
||
.span_one {
|
||
background: url(img/one_icon.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.span_two {
|
||
background: url(img/two_icon.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.span_three {
|
||
background: url(img/three_icon.png)no-repeat;
|
||
background-size: 90% 90%;
|
||
}
|
||
|
||
.span_four {
|
||
background: url(img/four_icon.png)no-repeat;
|
||
background-size: 90% 80%;
|
||
}
|
||
|
||
.span_five {
|
||
background: url(img/05.png)no-repeat;
|
||
background-size: 90% 80%;
|
||
}
|
||
|
||
.span_six {
|
||
background: url(img/peixun_icon.png)no-repeat;
|
||
background-size: 90% 95%;
|
||
}
|
||
|
||
.main_item_one {
|
||
|
||
background-position: 95% 30%;
|
||
background-image: linear-gradient(to right, #45ded6, #1099d1);
|
||
}
|
||
|
||
.main_item_two {
|
||
|
||
background-position: 95% 30%;
|
||
background-image: linear-gradient(to right, #9470fd, #fd5d9f);
|
||
}
|
||
|
||
.main_item_three {
|
||
|
||
background-position: 95% 30%;
|
||
background-image: linear-gradient(to right, #f8cc8a, #f35c6a);
|
||
}
|
||
|
||
.main_item_fore {
|
||
|
||
background-image: linear-gradient(to right, #7853fd, #a6cbfe);
|
||
background-position: 95% 30%;
|
||
}
|
||
|
||
.main_item_five {
|
||
background-image: linear-gradient(to right, #FF00FF, #FFCCCC);
|
||
background-position: 95% 30%;
|
||
}
|
||
|
||
.main_item_six {
|
||
background-image: linear-gradient(to right, #294b98, #588bfe);
|
||
background-position: 95% 30%;
|
||
}
|
||
|
||
.title {
|
||
font-size: 21px !important;
|
||
line-height: 51px;
|
||
position: relative;
|
||
}
|
||
|
||
.a_red {
|
||
color: red !important;
|
||
}
|
||
|
||
.a_red a {
|
||
color: red !important;
|
||
}
|
||
|
||
.top_span {
|
||
display: block;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: #FFF;
|
||
opacity: .3;
|
||
border-radius: 50%;
|
||
float: left;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.span_top {
|
||
display: block;
|
||
position: absolute;
|
||
width: 25px;
|
||
height: 25px;
|
||
top: 20px;
|
||
left: 15px;
|
||
}
|
||
|
||
.span_top_one {
|
||
background: url(img/01.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 13px;
|
||
top: 16px;
|
||
}
|
||
|
||
.span_top_two {
|
||
background: url(img/02.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 13px;
|
||
top: 16px;
|
||
}
|
||
|
||
.span_top_six {
|
||
background: url(img/px-icon.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 13px;
|
||
top: 16px;
|
||
|
||
}
|
||
|
||
.span_top_three {
|
||
background: url(img/03.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
top: 16px;
|
||
left: 14px;
|
||
}
|
||
|
||
.span_top_four {
|
||
background: url(img/04.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
top: 17px;
|
||
}
|
||
|
||
.span_top_five {
|
||
background: url(img/feiChen.png)no-repeat;
|
||
background-size: 100% 100%;
|
||
top: 14px;
|
||
left: 14px;
|
||
}
|
||
|
||
.cont_main {
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.con_main_top {}
|
||
|
||
.main_con_left_top {}
|
||
|
||
.main_con_left {
|
||
width: 49%;
|
||
float: left;
|
||
box-shadow: 0px 1px 5px #e5e5e5;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.lfet_a {
|
||
float: left;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.right_btn_box {
|
||
float: right;
|
||
|
||
}
|
||
|
||
.right_btn_box button {
|
||
background: #744dfe;
|
||
border: 1px solid #744dfe;
|
||
padding: 8px 15px;
|
||
border-radius: 5px;
|
||
color: #FFF;
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn_back {
|
||
background: #ede8fe !important;
|
||
border: 1px solid #ede8fe !important;
|
||
color: #744dfe !important;
|
||
}
|
||
|
||
.div_right {
|
||
float: right;
|
||
}
|
||
|
||
.main_con_right {
|
||
width: 49%;
|
||
float: right;
|
||
box-shadow: 0px 1px 5px #e5e5e5;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.main_con_right_con {}
|
||
|
||
.rows {
|
||
width: 100%;
|
||
padding: 15px 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 8px;
|
||
-webkit-transition: all .4s ease;
|
||
-moz-transition: all .4s ease;
|
||
-ms-transition: all .4s ease;
|
||
-o-transition: all .4s ease;
|
||
transition: all .4s ease;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.rows:hover {
|
||
box-shadow: 0px 1px 5px #e5e5e5;
|
||
}
|
||
|
||
.rows_left {
|
||
float: left;
|
||
width: 8%;
|
||
height: 50px;
|
||
}
|
||
|
||
.rows_con {
|
||
float: left;
|
||
width: 75%;
|
||
}
|
||
|
||
.rows_right {
|
||
width: 17%;
|
||
float: left;
|
||
}
|
||
|
||
.img_span {
|
||
display: block;
|
||
width: 69px;
|
||
height: 100%;
|
||
background: url(img/xm.png)no-repeat;
|
||
background-size: 78% 100%;
|
||
}
|
||
|
||
.rows_con a {
|
||
display: block;
|
||
font-size: 16px;
|
||
color: #c6cde3;
|
||
}
|
||
|
||
.tit_cpn {
|
||
color: #333 !important;
|
||
margin: 5px 0px;
|
||
}
|
||
|
||
.a_rows_left {
|
||
font-weight: 600;
|
||
margin-top: 30px;
|
||
float: left;
|
||
font-size: 15px;
|
||
width: 60%;
|
||
text-align: right;
|
||
}
|
||
|
||
.span_rows_right {
|
||
display: block;
|
||
|
||
height: 20px;
|
||
margin-top: 25px;
|
||
margin-left: 15px;
|
||
float: right;
|
||
width: 20%;
|
||
background: url(img/top.png)no-repeat;
|
||
}
|
||
|
||
.span_row_low {
|
||
background: url(img/low.png)no-repeat;
|
||
}
|
||
|
||
.ic_p {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.con_main_bottom {
|
||
margin-top: 27px;
|
||
}
|
||
|
||
.main_con_left {
|
||
width: 49%;
|
||
float: left;
|
||
box-shadow: 0px 1px 5px #e5e5e5;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.bottom_con_left {
|
||
width: 100%;
|
||
float: left;
|
||
position: relative;
|
||
}
|
||
|
||
.btm_con_left {
|
||
width: 40%;
|
||
float: left;
|
||
|
||
}
|
||
|
||
.bottom_con_left a {
|
||
color: #95a1ca;
|
||
font-size: 13px;
|
||
display: block;
|
||
}
|
||
|
||
.com_tit {
|
||
color: #333 !important;
|
||
font-size: 20px !important;
|
||
}
|
||
|
||
.bolder_a {
|
||
color: #333 !important;
|
||
font-size: 33px !important;
|
||
margin: 30px 0px 10px 0px;
|
||
}
|
||
|
||
.bottom_con_right {
|
||
float: left;
|
||
width: 60%;
|
||
text-align: right;
|
||
padding-right: 130px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.a_can_s {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
font-weight: 600;
|
||
color: #0acd5e !important;
|
||
display: block;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.canva_s {
|
||
-webkit-transition: all .4s ease;
|
||
-moz-transition: all .4s ease;
|
||
-ms-transition: all .4s ease;
|
||
-o-transition: all .4s ease;
|
||
transition: all .4s ease;
|
||
}
|
||
|
||
.db_box {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.db_box a {
|
||
color: #95a1ca;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.a_lv_co {}
|
||
|
||
.layui-bg-green {
|
||
background-color: #744dfe !important;
|
||
}
|
||
|
||
.con_left_bm {
|
||
border-right: 1px solid #ecf0f1;
|
||
width: 50%;
|
||
float: left;
|
||
box-sizing: border-box;
|
||
padding-right: 11px;
|
||
}
|
||
|
||
.jdt_box {
|
||
margin: 28px 0px;
|
||
}
|
||
|
||
.con_right_bm {
|
||
box-sizing: border-box;
|
||
width: 50%;
|
||
float: left;
|
||
padding-left: 11px;
|
||
}
|
||
|
||
.con_right_bol {
|
||
display: block;
|
||
width: 100%;
|
||
font-size: 33px;
|
||
text-align: center;
|
||
height: 50px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.con_right_a {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #95a1ca !important;
|
||
}
|
||
|
||
.main_item_div_row {
|
||
width: 100%;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.main_item_div_row p {
|
||
color: #FFF;
|
||
font-size: 14px;
|
||
width: 150px;
|
||
display: block;
|
||
float: left;
|
||
padding: 3px 0px;
|
||
|
||
}
|
||
|
||
.main_item_div_row>.title {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
.main_item_div_row p a {
|
||
color: #FFF;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main_item_div_row main_item_one clearBox">
|
||
<span class="bacl_big span_one"></span>
|
||
|
||
<p class="title clearBox"><span class="span_top span_top_one"></span><span class="top_span"></span>重点关注企业</p>
|
||
<p>企业数：<a class="addBolder_a a_margin a_margin">335</a>家</p>
|
||
<p onclick="aji()">A级：<a class="addBolder_a a_margin">45</a>家</p>
|
||
<p onclick="bji()">B级：<a class="addBolder_a a_margin">140</a>家</p>
|
||
<p onclick="cji()">C级：<a class="addBolder_a a_margin">214</a>家</p>
|
||
<p onclick="dji()">D级：<a class="addBolder_a a_margin">36</a>家</p>
|
||
</div>
|
||
<div class="main_top">
|
||
<div class="main_item_div main_item_six" onclick="pxqk()">
|
||
<span class="bacl_big span_six"></span>
|
||
|
||
<p class="title clearBox"><span class="span_top span_top_six"></span><span class="top_span"></span>培训情况</p>
|
||
<p>本月应培训人数：<a class="addBolder_a a_margin">650</a>人</p>
|
||
<p>已培训人数：<a class="addBolder_a a_margin">458</a>人</p>
|
||
<p>未培训人数：<a class="addBolder_a a_margin">132</a>人</p>
|
||
<p class="a_red">已逾期人数：<a class="addBolder_a a_margin">84</a>人</p>
|
||
</div>
|
||
|
||
<div class="main_item_div main_item_two" onclick="tjqk()">
|
||
<span class="bacl_big span_two"></span>
|
||
|
||
<p class="title clearBox"><span class="span_top span_top_two"></span><span class="top_span"></span>体检情况</p>
|
||
<p>本月应体检人数：<a class="addBolder_a a_margin">1650</a>人</p>
|
||
<p>已体检人数：<a class="addBolder_a a_margin">1050</a>人</p>
|
||
<p>未体检人数：<a class="addBolder_a a_margin">600</a>人</p>
|
||
<p class="a_red">已逾期人数：<a class="addBolder_a a_margin">265</a>人</p>
|
||
</div>
|
||
|
||
<div class="main_item_div main_item_three" onclick="jcqk()">
|
||
<span class="bacl_big span_three"></span>
|
||
|
||
<p class="title clearBox"><span class="span_top span_top_three"></span><span class="top_span"></span>检测情况</p>
|
||
<p>本月到期检测：<a class="addBolder_a a_margin">205</a>家</p>
|
||
<p>已报告检测：<a class="addBolder_a a_margin">165</a>家</p>
|
||
<p>未报告检测：<a class="addBolder_a a_margin">40</a>家</p>
|
||
<p class="a_red">已逾期：<a class="addBolder_a a_margin">26</a>家</p>
|
||
</div>
|
||
|
||
<div class="main_item_div main_item_fore" onclick="pgqk()">
|
||
<span class="bacl_big span_four"></span>
|
||
|
||
<p class="title clearBox"><span class="span_top span_top_four"></span><span class="top_span"></span>评价情况</p>
|
||
<p>本月到期评价：<a class="addBolder_a a_margin">95</a>家</p>
|
||
<p>已报告评价：<a class="addBolder_a a_margin">40</a>家</p>
|
||
<p>未报告评价：<a class="addBolder_a a_margin">45</a>家</p>
|
||
<p class="a_red">已逾期：<a class="addBolder_a a_margin">10</a>家</p>
|
||
</div>
|
||
|
||
<div class="main_item_div main_item_five" onclick="cfqk()">
|
||
<span class="bacl_big span_five"></span>
|
||
|
||
<p class="title clearBox"><span class="span_top span_top_five"></span><span class="top_span"></span>尘肺情况</p>
|
||
<p>确诊：<a class="addBolder_a a_margin">123</a>人</p>
|
||
<p>疑似：<a class="addBolder_a a_margin">267</a>人</p>
|
||
<!-- <p>未报告评价：<a class="addBolder_a a_margin">45</a>家</p>
|
||
<p class="a_red">已逾期：<a class="addBolder_a a_margin">10</a>家</p> -->
|
||
</div>
|
||
</div>
|
||
<div class="cont_main">
|
||
<div class="con_main_top clearBox">
|
||
<div class="main_con_left">
|
||
<div class="main_con_left_top clearBox">
|
||
<a class="lfet_a">Top企业培训-体检-检测-评价完成率</a>
|
||
<div class="right_btn_box clearBox">
|
||
<button type="button">按月份</button>
|
||
<button type="button" class="btn_back">按季度</button>
|
||
</div>
|
||
</div>
|
||
<div class="main_con_left_con">
|
||
<div id="main" style="width: 100%;height:260px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="main_con_right">
|
||
<div class="main_con_right_top clearBox">
|
||
<a class="lfet_a">新建扩建技改项目 /Project</a>
|
||
<div class="div_right">
|
||
<i class="layui-icon layui-icon-more ic_p" style="font-size: 30px; color: #1E9FFF;"></i>
|
||
</div>
|
||
</div>
|
||
<div class="main_con_right_con">
|
||
<div class="rows clearBox">
|
||
<div class="rows_left">
|
||
<span class="img_span"></span>
|
||
</div>
|
||
<div class="rows_con">
|
||
<a class="tit_cpn">二屯镇广场扩建车间项目</a>
|
||
<a>参与用工人数</a>
|
||
</div>
|
||
<div class="rows_right clearBox">
|
||
<a class="a_rows_left">120人</a>
|
||
<span class="span_rows_right"></span>
|
||
</div>
|
||
</div>
|
||
<div class="rows clearBox">
|
||
<div class="rows_left">
|
||
<span class="img_span"></span>
|
||
</div>
|
||
<div class="rows_con">
|
||
<a class="tit_cpn">黄河涯镇体育馆建设项目</a>
|
||
<a>参与用工人数</a>
|
||
</div>
|
||
<div class="rows_right clearBox">
|
||
<a class="a_rows_left">120人</a>
|
||
<span class="span_rows_right"></span>
|
||
</div>
|
||
</div>
|
||
<div class="rows clearBox">
|
||
<div class="rows_left">
|
||
<span class="img_span"></span>
|
||
</div>
|
||
<div class="rows_con">
|
||
<a class="tit_cpn">赵虎镇房屋项目</a>
|
||
<a>参与用工人数</a>
|
||
</div>
|
||
<div class="rows_right clearBox">
|
||
<a class="a_rows_left">2562人</a>
|
||
<span class="span_rows_right"></span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--<div class="con_main_bottom clearBox">
|
||
<div class="main_con_left">
|
||
<div class="bottom_con_left clearBox">
|
||
<div class="btm_con_left">
|
||
<a class="com_tit">体检人数波动 /Fluctuation</a>
|
||
<a class="bolder_a">8632 人</a>
|
||
<a>体检人数</a>
|
||
</div>
|
||
<div class="bottom_con_right">
|
||
<canvas class="canva_s" id="canvas" width="200px" height="100px">
|
||
|
||
</div>
|
||
<a class="a_can_s">+7.9%</a>
|
||
</div>
|
||
</div>
|
||
<div class="main_con_right clearBox">
|
||
<div class="con_left_bm">
|
||
<a class="com_tit">培训进度 Training</a>
|
||
<div class="layui-progress layui-progress-big jdt_box">
|
||
<div class="layui-progress-bar layui-bg-green" lay-percent="63%"></div>
|
||
</div>
|
||
<div class="db_box clearBox">
|
||
<a> </a>
|
||
<a class="a_can_s">+63%</a>
|
||
</div>
|
||
</div>
|
||
<div class="con_right_bm">
|
||
<a class="con_right_bol">岗前培训</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<script type="text/javascript">
|
||
;
|
||
var canvas = document.querySelector('canvas'),
|
||
ctx = canvas.getContext('2d');
|
||
var points = [{
|
||
x: 50,
|
||
y: 80
|
||
}, {
|
||
x: 60,
|
||
y: 50
|
||
}, {
|
||
x: 100,
|
||
y: 80
|
||
}, {
|
||
x: 120,
|
||
y: 80
|
||
}, {
|
||
x: 150,
|
||
y: 90
|
||
}, {
|
||
x: 180,
|
||
y: 50
|
||
}];
|
||
ctx.lineWidth = 3;
|
||
//background-image: linear-gradient(to right, #7853fd , #a6cbfe);
|
||
var gnt1 = ctx.createLinearGradient(50, 100, 180, 50); //线性渐变的起止坐标
|
||
gnt1.addColorStop(0, '#744dfe');
|
||
gnt1.addColorStop(1, '#f65ca4');
|
||
ctx.strokeStyle = gnt1;
|
||
//ctx.strokeStyle="#7853fd";
|
||
//ctx.addColorStop="#a6cbfe";
|
||
drawPath(points, ctx);
|
||
ctx.createLinearGradient(50, 100, 180, 50);
|
||
|
||
function drawPath(path, ctx) {
|
||
var Vector2 = function(x, y) {
|
||
this.x = x;
|
||
this.y = y;
|
||
};
|
||
Vector2.prototype = {
|
||
"length": function() {
|
||
return Math.sqrt(this.x * this.x + this.y * this.y);
|
||
},
|
||
"normalize": function() {
|
||
var inv = 1 / this.length();
|
||
return new Vector2(this.x * inv, this.y * inv);
|
||
},
|
||
"add": function(v) {
|
||
return new Vector2(this.x + v.x, this.y + v.y);
|
||
},
|
||
"multiply": function(f) {
|
||
return new Vector2(this.x * f, this.y * f);
|
||
},
|
||
"dot": function(v) {
|
||
return this.x * v.x + this.y * v.y;
|
||
},
|
||
"angle": function(v) {
|
||
return Math.acos(this.dot(v) / (this.length() * v.length())) * 180 / Math.PI;
|
||
}
|
||
};
|
||
|
||
function getControlPoint(path) {
|
||
var rt = 0.3;
|
||
var i = 0,
|
||
count = path.length - 2;
|
||
var arr = [];
|
||
for (; i < count; i++) {
|
||
var a = path[i],
|
||
b = path[i + 1],
|
||
c = path[i + 2];
|
||
var v1 = new Vector2(a.x - b.x, a.y - b.y);
|
||
var v2 = new Vector2(c.x - b.x, c.y - b.y);
|
||
var v1Len = v1.length(),
|
||
v2Len = v2.length();
|
||
var centerV = v1.normalize().add(v2.normalize()).normalize();
|
||
var ncp1 = new Vector2(centerV.y, centerV.x * -1);
|
||
var ncp2 = new Vector2(centerV.y * -1, centerV.x);
|
||
if (ncp1.angle(v1) < 90) {
|
||
var p1 = ncp1.multiply(v1Len * rt).add(b);
|
||
var p2 = ncp2.multiply(v2Len * rt).add(b);
|
||
arr.push(p1, p2)
|
||
} else {
|
||
var p1 = ncp1.multiply(v2Len * rt).add(b);
|
||
var p2 = ncp2.multiply(v1Len * rt).add(b);
|
||
arr.push(p2, p1)
|
||
}
|
||
}
|
||
return arr;
|
||
}
|
||
|
||
var point = getControlPoint(path);
|
||
console.log(point);
|
||
var points = path;
|
||
ctx.beginPath();
|
||
var int = 0;
|
||
for (var i = 0; i < points.length; i++) {
|
||
if (i == 0) {
|
||
ctx.moveTo(points[0].x, points[0].y);
|
||
ctx.quadraticCurveTo(point[0].x, point[0].y, points[1].x, points[1].y);
|
||
int = int + 1;
|
||
} else if (i < points.length - 2) {
|
||
ctx.moveTo(points[i].x, points[i].y);
|
||
ctx.bezierCurveTo(point[int].x, point[int].y, point[int + 1].x, point[int + 1].y, points[i + 1].x, points[i + 1]
|
||
.y);
|
||
int += 2;
|
||
} else if (i == points.length - 2) {
|
||
ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
|
||
ctx.quadraticCurveTo(point[point.length - 1].x, point[point.length - 1].y, points[points.length - 1].x, points[
|
||
points.length - 1].y);
|
||
}
|
||
|
||
}
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
ctx.beginPath();
|
||
|
||
for (i = 0; i < points.length; i++) {
|
||
if (i == 0) {
|
||
ctx.beginPath();
|
||
ctx.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI);
|
||
ctx.fillStyle = "#a252de";
|
||
ctx.fill();
|
||
ctx.closePath();
|
||
}
|
||
if (i == points.length - 1) {
|
||
ctx.beginPath();
|
||
ctx.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI);
|
||
ctx.fillStyle = "#f65ca4";
|
||
ctx.fill();
|
||
ctx.closePath();
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<script type="text/javascript">
|
||
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
|
||
layui.use('element', function() {
|
||
var element = layui.element;
|
||
});
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var dataAxis = ['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10',
|
||
'2019-11', '2019-12'
|
||
];
|
||
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];
|
||
var yMax = 500;
|
||
var dataShadow = [];
|
||
|
||
for (var i = 0; i < data.length; i++) {
|
||
dataShadow.push(yMax);
|
||
}
|
||
|
||
// option = {
|
||
// // title: {
|
||
// // text: '特性示例：渐变色 阴影 点击缩放',
|
||
// // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
|
||
// // },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// data: dataAxis
|
||
// },
|
||
// grid: {
|
||
// bottom: '10%',
|
||
// left: '4%',
|
||
// right: '4%',
|
||
// top: '5%'
|
||
// },
|
||
// yAxis: {
|
||
// axisLine: {
|
||
// show: false
|
||
// },
|
||
// axisTick: {
|
||
// show: false
|
||
// },
|
||
// axisLabel: {
|
||
// textStyle: {
|
||
// color: '#999'
|
||
// }
|
||
// }
|
||
// },
|
||
// tooltip: {
|
||
// show: true //显示提示框
|
||
// },
|
||
// dataZoom: [{
|
||
// type: 'inside'
|
||
// }],
|
||
// series: [{ // For shadow
|
||
// name: '未完成',
|
||
// type: 'bar',
|
||
// itemStyle: {
|
||
// color: 'rgba(0,0,0,0.05)'
|
||
// },
|
||
// barGap: '-100%',
|
||
// barCategoryGap: '40%',
|
||
// animation: false,
|
||
// data: dataShadow,
|
||
|
||
// },
|
||
// {
|
||
// name: '完成',
|
||
// type: 'bar',
|
||
// itemStyle: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0, 0, 0, 1,
|
||
// [{
|
||
// offset: 0,
|
||
// color: '#fc5da0'
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: '#c767d0'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#744dfe'
|
||
// }
|
||
// ]
|
||
// )
|
||
// },
|
||
// emphasis: {
|
||
// itemStyle: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0, 0, 0, 1,
|
||
// [
|
||
|
||
// {
|
||
// offset: 0,
|
||
// color: '#fc5da0'
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: '#c767d0'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#744dfe'
|
||
// }
|
||
// ]
|
||
// )
|
||
// }
|
||
// },
|
||
// data: data
|
||
// },
|
||
// {
|
||
// name: '完成',
|
||
// type: 'bar',
|
||
// itemStyle: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0, 0, 0, 1,
|
||
// [{
|
||
// offset: 0,
|
||
// color: '#fc5da0'
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: '#c767d0'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#744dfe'
|
||
// }
|
||
// ]
|
||
// )
|
||
// },
|
||
// emphasis: {
|
||
// itemStyle: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 0, 0, 0, 1,
|
||
// [
|
||
|
||
// {
|
||
// offset: 0,
|
||
// color: '#fc5da0'
|
||
// },
|
||
// {
|
||
// offset: 0.5,
|
||
// color: '#c767d0'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#744dfe'
|
||
// }
|
||
// ]
|
||
// )
|
||
// }
|
||
// },
|
||
// data: data
|
||
// }
|
||
// ]
|
||
// };
|
||
|
||
option = {
|
||
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['体检情况', '检测情况', '评价情况']
|
||
},
|
||
grid: {
|
||
bottom: '10%',
|
||
left: '4%',
|
||
right: '4%',
|
||
top: '10%'
|
||
},
|
||
|
||
xAxis: [{
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
data: ['二屯镇', '黄河涯镇', '赵虎镇', '抬头寺镇']
|
||
}],
|
||
yAxis: {
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
interval: 0
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '体检情况',
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[{
|
||
offset: 0,
|
||
color: '#fc5da0'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#c767d0'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#744dfe'
|
||
}
|
||
]
|
||
)
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[
|
||
|
||
{
|
||
offset: 0,
|
||
color: '#fc5da0'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#c767d0'
|
||
}
|
||
]
|
||
)
|
||
}
|
||
},
|
||
data: [65, 78, 88, 86, 59]
|
||
},
|
||
{
|
||
name: '检测情况',
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[{
|
||
offset: 0,
|
||
color: '#f8cc8a'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#f35c6a'
|
||
}
|
||
]
|
||
)
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[
|
||
|
||
{
|
||
offset: 0,
|
||
color: '#f8cc8a'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#f35c6a'
|
||
}
|
||
]
|
||
)
|
||
}
|
||
},
|
||
data: [77, 97, 91, 82, 73]
|
||
},
|
||
{
|
||
name: '评价情况',
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[{
|
||
offset: 0,
|
||
color: ' #7853fd'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#a6cbfe'
|
||
}
|
||
]
|
||
)
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[
|
||
|
||
{
|
||
offset: 0,
|
||
color: '#7853fd'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#a6cbfe'
|
||
}
|
||
]
|
||
)
|
||
}
|
||
},
|
||
data: [69, 78, 65, 88, 90]
|
||
},
|
||
]
|
||
};
|
||
|
||
// Enable data zoom when user click bar.
|
||
var zoomSize = 6;
|
||
myChart.on('click', function(params) {
|
||
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
|
||
myChart.dispatchAction({
|
||
type: 'dataZoom',
|
||
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
|
||
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
|
||
});
|
||
});
|
||
myChart.setOption(option);
|
||
|
||
|
||
|
||
function tjqk() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "体检情况详情",
|
||
maxmin: true,
|
||
content: 'tjqk.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function pxqk() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "培训情况详情",
|
||
maxmin: true,
|
||
content: 'pxqk.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function jcqk() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "检测情况详情",
|
||
maxmin: true,
|
||
content: 'jcqk.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function pgqk() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "评价情况详情",
|
||
maxmin: true,
|
||
content: 'pgqk.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
function cfqk() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "尘肺情况详情",
|
||
maxmin: true,
|
||
content: 'cfqk.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function aji() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "A级企业详情",
|
||
maxmin: true,
|
||
content: 'qylb.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
function bji() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "B级企业详情",
|
||
maxmin: true,
|
||
content: 'qylb.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
function cji() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "C级企业详情",
|
||
maxmin: true,
|
||
content: 'qylb.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
|
||
function dji() {
|
||
layer.open({
|
||
type: 2,
|
||
area: ['100%', '100%'],
|
||
title: "D级企业详情",
|
||
maxmin: true,
|
||
content: 'qylb.html',
|
||
btn: ['关闭'],
|
||
yes: function(index) {
|
||
layer.close(index);
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|