1920*1080分辨率

old
xiaoguo 3 years ago
parent 07801b3fd4
commit 0bdad53260

Binary file not shown.

@ -0,0 +1,834 @@
@charset "utf-8";
/* CSS Document */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
*,
body {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
body {
color: #fff;
font-size: 16px;
background: #033c76;
background: -webkit-radial-gradient(50% 35%, farthest-corner, #034f8e, #034987, #02366d, #002353);
background: radial-gradient(50% 35%, farthest-corner, #034f8e, #034987, #02366d, #002353);
}
html,
body {
height: 100%;
}
li {
list-style-type: none;
}
table {}
i {
margin: 0px;
padding: 0px;
text-indent: 0px;
}
img {
border: none;
max-width: 100%;
}
a {
text-decoration: none;
color: #fff;
}
a.active,
a:focus {
outline: none !important;
text-decoration: none;
}
ol,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0
}
a:hover {
color: #06c;
text-decoration: none !important
}
.clearfix:after,
.clearfix:before {
display: table;
content: " "
}
.clearfix:after {
clear: both
}
.pulll_left {
float: left;
}
.pulll_right {
float: right;
}
i {
font-style: normal;
}
.text-w {
color: #ffe400
}
.text-d {
color: #ff6316
}
.text-s {
color: #14e144
}
.text-b {
color: #07e5ff
}
.head {
position: relative;
height: 90px;
margin: 0 15px;
padding-right: 60px;
}
.head h1 {
font-size: 30px;
letter-spacing: 2px;
text-align: center;
line-height: 90px;
padding-right: 55px;
color: #daf9ff;
}
.head .menu {}
.head .menu ul {
font-size: 0;
}
.head .menu li {
display: inline-block;
position: relative;
margin: 25px 15px;
;
}
.head .menu li a {
display: block;
font-size: 18px;
color: #fff;
line-height: 40px;
padding: 0 15px;
}
.head .time {
position: absolute;
right: 0;
line-height: 90px;
font-size: 24px;
}
.menu li:before,
.menu li:after {
position: absolute;
width: 10px;
height: 5px;
opacity: .4;
content: "";
border-top: 2px solid #02a6b5;
top: -1px;
border-radius: 2px;
}
.menu li:before,
.menu li a:before {
border-left: 2px solid #02a6b5;
left: -1px;
}
.menu li:after,
.menu li a:after {
border-right: 2px solid #02a6b5;
right: -1px;
}
.menu li a {
position: relative;
}
.menu li a:before,
.menu li a:after {
position: absolute;
width: 10px;
height: 5px;
opacity: .4;
content: "";
border-bottom: 2px solid #02a6b5;
bottom: -1px;
border-radius: 2px;
}
.head .menu li a:hover {
color: #f4e925;
}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after {
border-color: #f4e925;
opacity: 1;
}
.mainbox {
padding: 0px 10px;
}
.nav1 {
margin-left: -6px;
margin-right: -6px;
}
.nav1>li {
padding: 0 6px;
float: left;
}
.box {
border: 1px solid rgba(7, 118, 181, .5);
box-shadow: inset 0 0 10px rgba(7, 118, 181, .4);
margin-bottom: 12px;
position: relative;
}
.tit {
padding: 10px 10px 10px 25px;
border-bottom: 1px solid rgba(7, 118, 181, .7);
font-size: 16px;
font-weight: 500;
position: relative;
}
.tit:before,
.tit01:before {
position: absolute;
content: "";
width: 6px;
height: 6px;
background: rgba(22, 214, 255, .9);
box-shadow: 0 0 5px rgba(22, 214, 255, .9);
border-radius: 10px;
left: 10px;
top: 18px;
}
.tit:after,
.box:before {
width: 100%;
height: 1px;
content: "";
position: absolute;
left: 0;
bottom: -1px;
background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
box-shadow: 0 0 5px rgba(131, 189, 227, 1);
opacity: .6
}
.box:before {
top: -1px;
}
.boxnav {
padding: 10px;
}
.nav2 {}
.nav2>li:first-child {
border: none;
}
.nav2>li {
float: left;
border-left: 1px solid rgba(7, 118, 181, .2);
height: 240px;
padding: 0 10px 10px 10px;
}
.tit01 {
font-size: 16px;
font-weight: 500;
position: relative;
padding-left: 15px;
}
.tit01:before {
left: 3px;
top: 8px;
}
.ftechart {
height: 200px;
;
}
.table1 th {
border-bottom: 1px solid #407abd;
font-size: 14px;
text-align: center;
padding: 6px 0;
color: rgba(255, 255, 255, .8)
}
.table1 td {
border-bottom: 1px dotted#407abd;
font-size: 12px;
padding: 6px 0;
text-align: center;
color: rgba(255, 255, 255, .6)
}
.table1 tr:last-child td {
border: none;
}
.mapc {
background: url(../images/bg3.png) no-repeat center center;
background-size: 100% 100%
}
.map {
position: relative;
height: 100%;
padding-left: 10%;
}
.map img {}
.mapnav {
position: absolute;
z-index: 10;
}
.mapnav div {
/* background: url(../images/bg1.png) no-repeat; */
background-size: 100% auto;
width: 200px;
text-align: center;
padding: 20px 0;
line-height: 120%;
}
.mapnav div span {
font-size: 30px;
opacity: .6
}
.mapnav div p {
font-size: 60px;
letter-spacing: 6px;
font-weight: bold;
padding-top: 30px;
padding-left: 70px;
}
.mapnav li {
float: left;
margin-right: 6px;
}
.leidanav {
margin-top: -5px;
}
.leidanav li {
float: left;
width: 20%;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .1)
}
.leidanav2 li {
width: 33.3333%
}
.leidanav3 li {
width: 25%
}
.leidanav li:first-child {
border-left: none;
}
.leidanav span {
font-size: 12px;
opacity: .6
}
.leidanav p {
font-size: 18px;
color: #26a6ff
}
.mapnav2 {
position: absolute;
left: 10px;
bottom: 0px;
width: 40%;
z-index: 10;
}
.mapnav2 .box {}
.ybp {
width: 100%
}
.ybp li {
float: left;
width: 50%;
height: 120px;
}
.duibi li {
float: left;
width: 25%;
height: 200px;
padding: 0;
border: none;
}
.btn {
position: absolute;
border-radius: 2px;
padding: 4px 20px;
opacity: .8;
}
.btn1 {
border: 1px solid rgba(255, 255, 255, .5);
background: #388665;
left: 35%;
top: 30%;
}
.btn2 {
border: 1px solid rgba(255, 255, 255, .5);
background: #297cc7;
right: 32%;
top: 60%;
}
.btn:hover {
color: #fff;
opacity: 1;
}
.btn1:before,
.btn2:before {
position: absolute;
content: '';
width: 50px;
height: 1px;
background: #fff;
}
.btn1:before {
transform: rotate(30deg);
right: -65%;
top: 100%
}
.btn2:before {
transform: rotate(30deg);
left: -65%;
top: -10%
}
.tit02 {
font-size: 14px;
padding: 10px 0;
}
.tagcloud {
width: 100%;
height: 90% !important;
overflow: hidden;
position: relative;
}
.tagcloud a {
display: block;
border-radius: 50%;
color: #fff;
font-weight: bold;
font-size: 14px;
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.b01 {
width: 50px;
height: 50px;
}
.b02 {
width: 80px;
height: 80px;
}
.b03 {
width: 60px;
height: 60px;
}
.b04 {
width: 70px;
height: 70px;
}
.co01 {
border: 2px solid rgba(5, 118, 254, 1);
box-shadow: inset 0 0 20px rgba(5, 118, 254, 1);
}
.co02 {
border: 2px solid rgba(238, 255, 65, 1);
box-shadow: inset 0 0 20px rgba(238, 255, 65, 1);
}
.co03 {
border: 2px solid rgba(26, 121, 181, 1);
box-shadow: inset 0 0 20px rgba(26, 121, 181, 1);
}
.co04 {
border: 2px solid rgba(1, 187, 181, 1);
box-shadow: inset 0 0 20px rgba(1, 187, 181, 1);
}
.co05 {
border: 2px solid rgba(255, 138, 0, 1);
box-shadow: inset 0 0 20px rgba(255, 138, 0, 1);
}
.wancheng {
display: flex;
align-items: center;
justify-content: center;
}
.wancheng span {
font-size: 14px;
color: #fff;
}
.wancheng h3 {
font-size: 20px;
color: #00b4ff;
}
.wancheng h3 i {
font-size: 12px;
color: #fff;
}
.yuan {
padding: 5px;
border-radius: 100%;
margin-left: 10px;
border: 2px solid rgba(0, 99, 169, .8);
}
.yuan span {
width: 60px;
height: 60px;
border-radius: 100%;
background: rgba(0, 99, 169, .8);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.barbox {
border: 1px solid rgba(25, 186, 139, .17);
position: relative;
}
.barbox li {
font-size: .5rem;
color: #ffeb7b;
padding: .05rem 0;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: bold;
font-family: electronicFont;
}
.barbox2 li {
font-size: .19rem;
color: rgba(255, 255, 255, .7);
}
.numbt {
font-size: 20px;
color: #fff;
padding-top: 14px;
}
.name {
font-size: 16px;
color: #fff;
padding-top: 20px;
padding-left: 20px;
}
.numtxt {
color: #fef000;
font-size: 30px;
font-family: arial;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgba(255, 255, 255, .1);
padding: 10px 20px;
margin: 10px 0;
font-weight: bold;
letter-spacing: 2px;
}
.ceisuozonglan {
margin-top: 30px;
}
.ceisuozonglan li {
float: left;
width: 25%;
text-align: center;
border-left: 0px solid rgba(255, 255, 255, .1)
}
.ceisuozonglan li:first-child {
border-left: none;
}
.ceisuozonglan span {
font-size: 16px;
color: #fff;
}
.ceisuozonglan p {
font-size: 25px;
font-weight: bold;
padding-top: 10px;
color: #fef000;
}
.nenghaozonglan {
margin-top: 20px;
margin-left: 0px;
}
.nenghaozonglan li {
float: left;
width: 50%;
text-align: center;
border-left: 0px solid rgba(255, 255, 255, .1)
}
.nenghaozonglan span {
font-size: 20px;
color: #fff;
}
.nenghaozonglan p {
font-size: 30px;
font-weight: bold;
padding-top: 10px;
color: #cc192e;
}
.hangjingzonglan {
padding-top: 20px;
padding-left: 20px;
height: 200px;
float: left;
width: 50%;
}
.hangjingzonglan li {
font-size: 16px;
line-height: 230%;
}
.hangjingzonglantagcloud {
height: 220px;
float: left;
width: 50%
}
.jindu li {
width: 50%;
float: left;
height: 170px;
}
.jindu div {
width: 50%;
float: left;
color: #fff;
text-align: center;
padding: 20px 0 0 0;
margin: 20px 0 0 0;
font-size: 24px;
}
.marquee {
height: 200px;
overflow: hidden;
margin-left: 50px;
}
.pth{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
}
.marquee li p {
line-height: 300%;
font-size: 20px;
line-height: 20px;
height: 35px;
margin: 5px;
}
.marquee li:nth-child(even) p {
background: rgba(255, 255, 255, .05)
}
.marquee li p span {
color: #44d3e4;
display: inline-block;
text-align: center;
font-size: 20px;
}
.marquee li p span:nth-child(1),
.pth span:nth-child(1) {
width: 10%
}
.marquee li p span:nth-child(2),
.pth span:nth-child(2) {
width: 30%;
color: #3d9fd2;
}
.marquee li p span:nth-child(3),
.pth span:nth-child(3) {
width: 10%
}
.marquee li p span:nth-child(4),
.pth span:nth-child(4) {
width: 40%
}
.pth span {
color: #fff !important;
display: inline-block;
font-size: 20px;
text-align: center;
}
/*Plugin CSS*/
.str_wrap {
overflow:hidden;
width:100%;
position:relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
white-space:nowrap;
}
.str_move {
white-space:nowrap;
position:absolute;
top:0;
left:0;
cursor:move;
}
.str_move_clone {
display:inline-block;
vertical-align:top;
position:absolute;
left:100%;
top:0;
}
.str_vertical .str_move_clone {
left:0;
top:100%;
}
.str_down .str_move_clone {
left:0;
bottom:100%;
}
.str_vertical .str_move,
.str_down .str_move {
white-space:normal;
width:100%;
}
.str_static .str_move,
.no_drag .str_move,
.noStop .str_move{
cursor:inherit;
}
.str_wrap img {
max-width:none !important;
}
.payment-time{
padding-right: 10px;
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 794 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 366 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

@ -0,0 +1,194 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/Bubble.js"></script>
<script type="text/javascript" src="js/jquery.liMarquee.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="head clearfix">
<h1 class="pulll_left">5G智慧驿站数据监控平台</h1>
<div class="time" id="showTime">2018/6/12 17:00:12</div>
</div>
<div class="mainbox">
<ul class="clearfix nav1">
<li style="width: 26%;">
<div class="box">
<div class="tit">厕所总览</div>
<div class="boxnav" style="height: 710px;">
<div class="name">厕所总数量</div>
<div class="numtxt">560</div>
<div class="ceisuozonglan">
<ul>
<li><span>男厕所</span>
<p>240</p>
</li>
<li><span>女厕所</span>
<p>240</p>
</li>
<li><span>儿童厕所</span>
<p>40</p>
</li>
<li><span>残疾厕所</span>
<p>40</p>
</li>
</ul>
</div>
<div class="leidanav" style="margin-top: 150px;">
<ul class="jindu clearfix">
<li id="zb1"></li>
<li id="zb2"></li>
<li id="zb3"></li>
<li id="zb4"></li>
</ul>
</div>
</div>
</div>
</li>
<li style="width: 48%">
<div class="box">
<div class="boxnav mapc" style="height: 750px; position: relative">
<div class="mapnav">
<ul>
<li>
<div><span>当前人流量</span>
<p>245670</p>
</div>
</li>
</ul>
</div>
<div class="map" id="map"></div>
</div>
</div>
</li>
<li style="width: 26%">
<div class="box">
<div class="tit">能耗总览</div>
<div class="boxnav" style="height: 710px;">
<div style=" border-bottom: 1px solid rgba(255, 255, 255, .1);">今日能耗</div>
<div class="nenghaozonglan">
<ul>
<li><span>总用电量(kW·h)</span>
<p>210</p>
</li>
<li><span>总用水量(m3)</span>
<p>120</p>
</li>
</ul>
</div>
<div class="nenghaozonglan">
<ul>
<li><span>平均用电量(kW·h)</span>
<p>3</p>
</li>
<li><span>平均用水量(m3)</span>
<p>2</p>
</li>
</ul>
</div>
<div style=" border-bottom: 1px solid rgba(255, 255, 255, .1);">本周电量统计</div>
<div class="ftechart" id="echarts_2"></div>
<div style=" border-bottom: 1px solid rgba(255, 255, 255, .1);">本周水量统计</div>
<div class="ftechart" id="echarts_3"></div>
</div>
</div>
</li>
</ul>
<div class="box" style="padding: 20px 0;">
<ul class="clearfix nav2 ">
<li style="width:25%;">
<div class="tit01">坑位状态</div>
<div class="ftechart" id="echarts_1"></div>
</li>
<li style="width:50%">
<div class="tit01">驿站流量</div>
<p class="pth"><span>序号</span> <span>驿站名称</span> <span>厕所数量</span> <span>当前流量</span></p>
<div class="marquee">
<ul>
<li>
<p> <span><i>1</i></span> <span>北海驿站</span> <span>8</span><span>1500</span></p>
</li>
<li>
<p> <span><i>2</i></span> <span>西安驿站</span> <span>10</span> <span>3000</span></p>
</li>
<li>
<p> <span><i>3</i></span> <span>金坛驿站</span> <span>6</span> <span>1200</span></p>
</li>
<li>
<p> <span><i>4</i></span> <span>牡丹江驿站</span> <span>8</span> <span>800</span></p>
</li>
<li>
<p> <span><i>5</i></span> <span>遵义驿站</span> <span>7</span> <span>1700</span></p>
</li>
<li>
<p> <span><i>6</i></span> <span>绍兴驿站</span> <span>5</span> <span>1350</span></p>
</li>
<li>
<p> <span><i>7</i></span> <span>扬州驿站</span> <span>12</span> <span>1800</span></p>
</li>
<li>
<p> <span><i>8</i></span> <span>常州驿站</span> <span>9</span> <span>1600</span></p>
</li>
<li>
<p> <span><i>9</i></span> <span>潍坊驿站</span> <span>10</span> <span>1100</span></p>
</li>
<li>
<p> <span><i>10</i></span> <span>重庆驿站</span> <span>9</span> <span>1400</span> </p>
</li>
</ul>
</div>
</li>
<li style="width:25%">
<div class="tit01">环境总览</div>
<div class="boxnav" style="height: 250px;">
<div>
<!-- <div class="tit02 text-b">热门话题榜</div> -->
<div class="hangjingzonglan">
<ul>
<li>平均温度(°C) <span class="text-s"> 26</span></li>
<li>平均湿度(%)<span class="text-s"> 51</span></li>
<li>氨气含量(g/L)<span class="text-d"> 0.771</span></li>
<li>硫化氢含量(ppm)<span class="text-d"> 0.00031</span></li>
</ul>
</div>
</div>
<div class="hangjingzonglantagcloud">
<div class="tagcloud">
<!-- bo大小 co颜色 -->
<a class="b02 co01" href="#">平均温度 26 (°C)</a>
<a class="b02 co02" href="#">平均湿度 51 (%)</a>
<a class="b02 co05" href="#">氨气含量 0.771 (g/L)</a>
<a class="b02 co02" href="#">硫化氢含量 0.00031 (ppm)</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
var t = null;
t = setTimeout(time, 1000);//開始运行
function time() {
clearTimeout(t);//清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();//获取时
var m = dt.getMinutes();//获取分
var s = dt.getSeconds();//获取秒
document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
t = setTimeout(time, 1000); //设定定时器,循环运行
}
</script>
</html>

Binary file not shown.

@ -0,0 +1,296 @@
/*
* 3d标签云
* 功能鼠标移入标签当前标签静止放大
* 说明
* */
window.tagcloud = (function(win, doc) { // ns
// 判断对象
function isObject (obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
// 构造函数
function TagCloud (options) {
var self = this;
self.config = TagCloud._getConfig(options);
self.box = self.config.element; //组件元素
self.fontsize = self.config.fontsize; //平均字体大小
self.radius = self.config.radius; //滚动半径
self.depth = 2 * self.radius; //滚动深度
self.size = 2 * self.radius; //随鼠标滚动变速作用区域
self.mspeed = TagCloud._getMsSpeed(self.config.mspeed);
self.ispeed = TagCloud._getIsSpeed(self.config.ispeed);
self.items = self._getItems();
self.direction = self.config.direction; //初始滚动方向
self.keep = self.config.keep; //鼠标移出后是否保持之前滚动
//初始化
self.active = false; //是否为激活状态
self.lasta = 1;
self.lastb = 1;
self.mouseX0 = self.ispeed * Math.sin(self.direction * Math.PI / 180); //鼠标与滚动圆心x轴初始距离
self.mouseY0 = -self.ispeed * Math.cos(self.direction * Math.PI / 180); //鼠标与滚动圆心y轴初始距离
self.mouseX = self.mouseX0; //鼠标与滚动圆心x轴距离
self.mouseY = self.mouseY0; //鼠标与滚动圆心y轴距离
self.index = -1;
//鼠标移入
TagCloud._on(self.box, 'mouseover', function () {
self.active = true;
});
//鼠标移出
TagCloud._on(self.box, 'mouseout', function () {
self.active = false;
});
//鼠标在内移动
TagCloud._on(self.keep ? win : self.box, 'mousemove', function (ev) {
var oEvent = win.event || ev;
var boxPosition = self.box.getBoundingClientRect();
self.mouseX = (oEvent.clientX - (boxPosition.left + self.box.offsetWidth / 2)) / 5;
self.mouseY = (oEvent.clientY - (boxPosition.top + self.box.offsetHeight / 2)) / 5;
});
for (var j = 0, len = self.items.length; j < len; j++) {
self.items[j].element.index=j;
//鼠标移出子元素,当前元素静止放大
self.items[j].element.onmouseover = function(){
self.index = this.index;
};
//鼠标移出子元素,当前元素继续滚动
self.items[j].element.onmouseout = function(){
self.index = -1;
};
}
//定时更新
TagCloud.boxs.push(self.box);
self.update(self); //初始更新
self.box.style.visibility = "visible";
self.box.style.position = "relative";
// self.box.style.minHeight = 1.2 * self.size + "px";
// self.box.style.minWidth = 2.5 * self.size + "px";
for (var j = 0, len = self.items.length; j < len; j++) {
self.items[j].element.style.position = "absolute";
self.items[j].element.style.zIndex = j + 1;
}
self.up = setInterval(function() {
self.update(self);
}, 10);
}
//实例
TagCloud.boxs = []; //实例元素数组
// 静态方法们
TagCloud._set = function (element) {
if (TagCloud.boxs.indexOf(element) == -1) {//ie8不支持数组的indexOf方法
return true;
}
};
//添加数组IndexOf方法
if (!Array.prototype.indexOf){
Array.prototype.indexOf = function(elt /*, from*/){
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++){
if (from in this && this[from] === elt)
return from;
}
return -1;
};
}
TagCloud._getConfig = function (config) {
var defaultConfig = { //默认值
fontsize: 16, //基本字体大小, 单位px
radius: 60, //滚动半径, 单位px
mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast
ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: true //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
};
if(isObject(config)) {
for(var i in config) {
if(config.hasOwnProperty(i)) {//hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链
defaultConfig[i] = config[i]; //用户配置
}
}
}
return defaultConfig;// 配置 Merge
};
TagCloud._getMsSpeed = function (mspeed) { //滚动最大速度
var speedMap = {
slow: 1.5,
normal: 3,
fast: 5
};
return speedMap[mspeed] || 3;
};
TagCloud._getIsSpeed = function (ispeed) { //滚动初速度
var speedMap = {
slow: 10,
normal: 25,
fast: 50
};
return speedMap[ispeed] || 25;
};
TagCloud._getSc = function(a, b) {
var l = Math.PI / 180;
//数组顺序0,1,2,3表示asin,acos,bsin,bcos
return [
Math.sin(a * l),
Math.cos(a * l),
Math.sin(b * l),
Math.cos(b * l)
];
};
TagCloud._on = function (ele, eve, handler, cap) {
if (ele.addEventListener) {
ele.addEventListener(eve, handler, cap);
} else if (ele.attachEvent) {
ele.attachEvent('on' + eve, handler);
} else {
ele['on' + eve] = handler;
}
};
// 原型方法
TagCloud.prototype = {
constructor: TagCloud, // 反向引用构造器
update: function () {
var self = this, a, b;
if (!self.active && !self.keep) {
self.mouseX = Math.abs(self.mouseX - self.mouseX0) < 1 ? self.mouseX0 : (self.mouseX + self.mouseX0) / 2; //重置鼠标与滚动圆心x轴距离
self.mouseY = Math.abs(self.mouseY - self.mouseY0) < 1 ? self.mouseY0 : (self.mouseY + self.mouseY0) / 2; //重置鼠标与滚动圆心y轴距离
}
a = -(Math.min(Math.max(-self.mouseY, -self.size), self.size) / self.radius ) * self.mspeed;
b = (Math.min(Math.max(-self.mouseX, -self.size), self.size) / self.radius ) * self.mspeed;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) { return; }
self.lasta = a;
self.lastb = b;
var sc = TagCloud._getSc(a, b);
for (var j = 0, len = self.items.length; j < len; j++) {
var rx1 = self.items[j].x,
ry1 = self.items[j].y*sc[1] + self.items[j].z*(-sc[0]),
rz1 = self.items[j].y*sc[0] + self.items[j].z*sc[1];
var rx2 = rx1 * sc[3] + rz1 * sc[2],
ry2 = ry1,
rz2 = rz1 * sc[3] - rx1 * sc[2];
if(self.index==j){
self.items[j].scale = 1; //取值范围0.6 ~ 3
self.items[j].fontsize = 16;
self.items[j].alpha = 1;
self.items[j].element.style.zIndex = 99;
}else{
var per = self.depth / (self.depth + rz2);
self.items[j].x = rx2;
self.items[j].y = ry2;
self.items[j].z = rz2;
self.items[j].scale = per; //取值范围0.6 ~ 3
self.items[j].fontsize = Math.ceil(per * 2) + self.fontsize - 6;
self.items[j].alpha = 1.5 * per - 0.5;
self.items[j].element.style.zIndex = Math.ceil(per*10-5);
}
//self.items[j].element.style.fontSize = self.items[j].fontsize + "px";//字体变大小
self.items[j].element.style.left = self.items[j].x + (self.box.offsetWidth - self.items[j].offsetWidth) / 2 + "px";
self.items[j].element.style.top = self.items[j].y + (self.box.offsetHeight - self.items[j].offsetHeight) / 2 + "px";
self.items[j].element.style.filter = "alpha(opacity=" + 100 * self.items[j].alpha + ")";
self.items[j].element.style.opacity = self.items[j].alpha;
}
},
_getItems: function () {
var self = this,
items = [],
element = self.box.children, // children 全部是Element
length = element.length,
item;
for (var i = 0; i < length; i++) {
item = {};
item.angle = {};
item.angle.phi = Math.acos(-1 + (2 * i + 1) / length);
item.angle.theta = Math.sqrt((length + 1) * Math.PI) * item.angle.phi;
item.element = element[i];
item.offsetWidth = item.element.offsetWidth;
item.offsetHeight = item.element.offsetHeight;
item.x = self.radius * 1.5 * Math.cos(item.angle.theta) * Math.sin(item.angle.phi);
item.y = self.radius * 1.5 * Math.sin(item.angle.theta) * Math.sin(item.angle.phi);
item.z = self.radius * 1.5 * Math.cos(item.angle.phi);
item.element.style.left = item.x + (self.box.offsetWidth - item.offsetWidth) / 2 + "px";
item.element.style.top = item.y + (self.box.offsetHeight - item.offsetHeight) / 2 + "px";
items.push(item);
}
return items; //单元素数组
}
};
if (!doc.querySelectorAll) {//ie7不支持querySelectorAll所以要重新定义
doc.querySelectorAll = function (selectors) {
var style = doc.createElement('style'), elements = [], element;
doc.documentElement.firstChild.appendChild(style);
doc._qsa = [];
style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
window.scrollBy(0, 0);
style.parentNode.removeChild(style);
while (doc._qsa.length) {
element = doc._qsa.shift();
element.style.removeAttribute('x-qsa');
elements.push(element);
}
doc._qsa = null;
return elements;
};
}
return function (options) { // factory
options = options || {}; // 短路语法
var selector = options.selector || '.tagcloud', //默认选择class为tagcloud的元素
elements = doc.querySelectorAll(selector),
instance = [];
for (var index = 0, len = elements.length; index < len; index++) {
options.element = elements[index];
if (!!TagCloud._set(options.element)) {
instance.push(new TagCloud(options));
}
}
return instance;
};
})(window, document);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

@ -0,0 +1,586 @@
$(window).load(function () { $(".loading").fadeOut() })
$(function () {
echarts_1();
echarts_2();
echarts_3();
var total = 560;
zb1(total, 240);
zb2(total, 240);
zb3(total, 40);
zb4(total, 40);
$('.marquee').liMarquee({
direction: 'up',//身上滚动
runshort: true,//内容不足时不滚动
scrollamount: 20//速度
});
/*3D标签云*/
tagcloud({
selector: ".tagcloud", //元素选择器
fontsize: 6, //基本字体大小, 单位px
radius: 40, //滚动半径, 单位px 页面宽度和高度的五分之一
mspeed: "slow", //滚动最大速度, 取值: slow, normal(默认), fast
ispeed: "slow", //滚动初速度, 取值: slow, normal(默认), fast
direction: 0, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
});
})
function echarts_1() {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_1'));
var data = [
{ value: 400, name: '空闲' },
{ value: 150, name: '占用' },
{ value: 10, name: '维修' },
];
option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
formatter: "{b}: <br/>{c} ({d}%)"
},
color: ['#20b9cf', '#2089cf', '#205bcf'],
legend: { //图例组件,颜色和名字
x: '70%',
y: 'center',
orient: 'vertical',
itemGap: 12, //图例每项之间的间隔
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: data,
textStyle: {
color: [],
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 20,
}
},
series: [{
name: '行业占比',
type: 'pie',
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 20, //最小的扇区角度0 ~ 360
center: ['35%', '50%'], //饼图的中心(圆心)坐标
radius: [40, 100], //饼图的半径
// avoidLabelOverlap: true, ////是否启用防止标签重叠
itemStyle: { //图形样式
normal: {
borderColor: 'transparent',
borderWidth: 2,
},
},
label: { //标签的位置
normal: {
show: true,
position: 'inside', //标签的位置
formatter: "{c} : {d}%",
textStyle: {
color: '#fff',
}
},
emphasis: {
show: true,
textStyle: {
fontWeight: 'bold'
}
}
},
data: data
}, {
name: '',
type: 'pie',
clockwise: false,
silent: true,
minAngle: 20, //最小的扇区角度0 ~ 360
center: ['35%', '50%'], //饼图的中心(圆心)坐标
radius: [0, 100], //饼图的半径
itemStyle: { //图形样式
normal: {
borderColor: '#1e2539',
borderWidth: 1.5,
opacity: 0.5,
}
},
label: { //标签的位置
normal: {
show: false,
}
},
data: data
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echarts_2() {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_2'));
var xData = function () {
var data = ['星期一', '星期二', '星期三', '星期四', '星期四五', '星期六', '星期天'];
return data;
}();
var data = [700, 650, 450, 750, 600, 800, 900]
option = {
// backgroundColor: "#141f56",
tooltip: {
show: "true",
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.4)', // 背景
padding: [8, 10], //内边距
// extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
formatter: function (params) {
if (params.seriesName != "") {
return params.name + ' ' + params.value + ' kW·h ';
}
},
},
grid: {
borderWidth: 0,
top: 20,
bottom: 35,
left: 40,
right: 10,
textStyle: {
color: "#fff"
}
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)',
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
},
},
data: xData,
}],
yAxis: {
min: 10,
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)',
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
}
},
axisLabel: {
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
},
formatter: '{value}',
},
},
series: [{
type: 'bar',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00c0e9'
}, {
offset: 1,
color: '#3b73cf'
}]),
barBorderRadius: 50,
borderWidth: 0,
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(105,123, 214, 0.7)'
}
},
zlevel: 2,
barWidth: '20%',
data: data,
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echarts_3() {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts_3'));
var xData = function () {
var data = ['星期一', '星期二', '星期三', '星期四', '星期四五', '星期六', '星期天'];
return data;
}();
var data = [120, 200, 150, 180, 140, 220, 250]
option = {
// backgroundColor: "#141f56",
tooltip: {
show: "true",
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.4)', // 背景
padding: [8, 10], //内边距
// extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
formatter: function (params) {
if (params.seriesName != "") {
return params.name + ' ' + params.value + ' kW·h ';
}
},
},
grid: {
borderWidth: 0,
top: 20,
bottom: 35,
left: 40,
right: 10,
textStyle: {
color: "#fff"
}
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
}
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgba(255,255,255,.7)',
fontWeight: 'normal',
fontSize: '12',
},
},
data: xData,
}],
yAxis: {
min: 10,
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.6)',
fontWeight: 'normal',
fontSize: '12',
},
formatter: '{value}',
},
},
series: [{
type: 'bar',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fccb05'
}, {
offset: 1,
color: '#f5804d'
}]),
barBorderRadius: 50,
borderWidth: 0,
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(105,123, 214, 0.7)'
}
},
zlevel: 2,
barWidth: '20%',
data: data,
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb1(total, val) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('zb1'));
option = {
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#49bcf7',
label: {
normal: {
position: 'center'
}
},
data: [{
value: val,
name: '男厕比例',
label: {
normal: {
formatter: Math.round(val / total * 100) + '%',
textStyle: {
fontSize: 30,
color: '#fff',
}
}
}
},
{
value: total,
label: {
normal: {
formatter: function (params) {
return '男厕比例'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb2(total, val) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('zb2'));
option = {
//animation: false,
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#49bcf7',
label: {
normal: {
position: 'center'
}
},
data: [{
value: val,
name: '女厕比例',
label: {
normal: {
formatter: Math.round(val / total * 100) + '%',
textStyle: {
fontSize: 24,
color: '#fff',
}
}
}
}, {
value: total,
label: {
normal: {
formatter: function (params) {
return '女厕比例'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb3(total, val) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('zb3'));
option = {
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#62c98d',
label: {
normal: {
position: 'center'
}
},
data: [{
value: val,
name: '童厕比例',
label: {
normal: {
formatter: Math.round(val / total * 100) + '%',
textStyle: {
fontSize: 24,
color: '#fff',
}
}
}
}, {
value: total,
label: {
normal: {
formatter: function (params) {
return '童厕比例'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb4(total, val) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('zb4'));
option = {
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#29d08a',
label: {
normal: {
position: 'center'
}
},
data: [{
value: val,
name: '残疾厕比例',
label: {
normal: {
formatter: Math.round(val / total * 100) + '%',
textStyle: {
fontSize: 24,
color: '#fff',
}
}
}
}, {
value: total,
label: {
normal: {
formatter: function (params) {
return '残疾厕所比例'
},
textStyle: {
color: '#aaa',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}

@ -0,0 +1,262 @@
$(function () {
map();
function map() {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));
var data = [
{ name: '北海驿站', value: 60 },
{ name: '西安驿站', value: 61 },
{ name: '金坛驿站', value: 62 },
{ name: '东营驿站', value: 62 },
{ name: '牡丹江驿站', value: 63 },
{ name: '遵义驿站', value: 63 },
{ name: '绍兴驿站', value: 63 },
{ name: '扬州驿站', value: 64 },
{ name: '常州驿站', value: 64 },
{ name: '潍坊驿站', value: 65 },
{ name: '重庆驿站', value: 66 },
{ name: '台州驿站', value: 67 },
{ name: '南京驿站', value: 67 },
{ name: '滨州驿站', value: 70 },
{ name: '贵阳驿站', value: 71 },
{ name: '无锡驿站', value: 71 },
{ name: '本溪驿站', value: 71 },
{ name: '渭南驿站', value: 72 },
{ name: '马鞍山驿站', value: 72 },
{ name: '宝鸡驿站', value: 72 },
{ name: '焦作驿站', value: 75 },
{ name: '句容驿站', value: 75 },
{ name: '北京驿站', value: 79 },
{ name: '徐州驿站', value: 79 },
{ name: '衡水驿站', value: 80 },
{ name: '包头驿站', value: 80 },
{ name: '绵阳驿站', value: 80 },
{ name: '枣庄驿站', value: 84 },
{ name: '杭州驿站', value: 84 },
{ name: '淄博驿站', value: 85 },
{ name: '鞍山驿站', value: 86 },
{ name: '溧阳驿站', value: 86 },
{ name: '安阳驿站', value: 90 },
{ name: '开封驿站', value: 90 },
{ name: '济南驿站', value: 92 },
{ name: '德阳驿站', value: 93 },
{ name: '温州驿站', value: 95 },
{ name: '九江驿站', value: 96 },
{ name: '邯郸驿站', value: 98 },
{ name: '临安驿站', value: 99 },
{ name: '兰州驿站', value: 99 },
{ name: '沧州驿站', value: 100 },
{ name: '临沂驿站', value: 103 },
{ name: '南充驿站', value: 104 },
{ name: '天津驿站', value: 105 },
{ name: '富阳驿站', value: 106 },
{ name: '泰安驿站', value: 112 },
{ name: '诸暨驿站', value: 112 },
{ name: '郑州驿站', value: 113 },
{ name: '哈尔滨驿站', value: 114 },
{ name: '聊城驿站', value: 116 },
{ name: '芜湖驿站', value: 117 },
{ name: '唐山驿站', value: 119 },
{ name: '平顶山驿站', value: 119 },
{ name: '邢台驿站', value: 119 },
{ name: '德州驿站', value: 120 },
{ name: '济宁驿站', value: 120 },
{ name: '荆州驿站', value: 127 },
{ name: '宜昌驿站', value: 130 },
{ name: '义乌驿站', value: 132 },
{ name: '丽水驿站', value: 133 },
{ name: '洛阳驿站', value: 134 },
{ name: '秦皇岛驿站', value: 136 },
{ name: '株洲驿站', value: 143 },
{ name: '石家庄驿站', value: 147 },
{ name: '莱芜驿站', value: 148 },
{ name: '常德驿站', value: 152 },
{ name: '保定驿站', value: 153 },
{ name: '湘潭驿站', value: 154 },
{ name: '金华驿站', value: 157 },
{ name: '岳阳驿站', value: 169 },
{ name: '长沙驿站', value: 175 },
{ name: '衢州驿站', value: 177 },
{ name: '廊坊驿站', value: 193 },
{ name: '菏泽驿站', value: 194 },
{ name: '合肥驿站', value: 229 },
{ name: '武汉驿站', value: 273 },
{ name: '大庆驿站', value: 279 }
];
var geoCoordMap = {
'北海驿站': [109.12, 21.49],
'西安驿站': [108.95, 34.27],
'金坛驿站': [119.56, 31.74],
'东营驿站': [118.49, 37.46],
'牡丹江驿站': [129.58, 44.6],
'遵义驿站': [106.9, 27.7],
'绍兴驿站': [120.58, 30.01],
'扬州驿站': [119.42, 32.39],
'常州驿站': [119.95, 31.79],
'潍坊驿站': [119.1, 36.62],
'重庆驿站': [106.54, 29.59],
'台州驿站': [121.420757, 28.656386],
'南京驿站': [118.78, 32.04],
'滨州驿站': [118.03, 37.36],
'贵阳驿站': [106.71, 26.57],
'无锡驿站': [120.29, 31.59],
'本溪驿站': [123.73, 41.3],
'渭南驿站': [109.5, 34.52],
'马鞍山驿站': [118.48, 31.56],
'宝鸡驿站': [107.15, 34.38],
'焦作驿站': [113.21, 35.24],
'句容驿站': [119.16, 31.95],
'北京驿站': [116.46, 39.92],
'徐州驿站': [117.2, 34.26],
'衡水驿站': [115.72, 37.72],
'包头驿站': [110, 40.58],
'绵阳驿站': [104.73, 31.48],
'枣庄驿站': [117.57, 34.86],
'杭州驿站': [120.19, 30.26],
'淄博驿站': [118.05, 36.78],
'鞍山驿站': [122.85, 41.12],
'溧阳驿站': [119.48, 31.43],
'安阳驿站': [114.35, 36.1],
'开封驿站': [114.35, 34.79],
'济南驿站': [117, 36.65],
'德阳驿站': [104.37, 31.13],
'温州驿站': [120.65, 28.01],
'九江驿站': [115.97, 29.71],
'邯郸驿站': [114.47, 36.6],
'临安驿站': [119.72, 30.23],
'兰州驿站': [103.73, 36.03],
'沧州驿站': [116.83, 38.33],
'临沂驿站': [118.35, 35.05],
'南充驿站': [106.110698, 30.837793],
'天津驿站': [117.2, 39.13],
'富阳驿站': [119.95, 30.07],
'泰安驿站': [117.13, 36.18],
'诸暨驿站': [120.23, 29.71],
'郑州驿站': [113.65, 34.76],
'哈尔滨驿站': [126.63, 45.75],
'聊城驿站': [115.97, 36.45],
'芜湖驿站': [118.38, 31.33],
'唐山驿站': [118.02, 39.63],
'平顶山驿站': [113.29, 33.75],
'邢台驿站': [114.48, 37.05],
'德州驿站': [116.29, 37.45],
'济宁驿站': [116.59, 35.38],
'荆州驿站': [112.239741, 30.335165],
'宜昌驿站': [111.3, 30.7],
'义乌驿站': [120.06, 29.32],
'丽水驿站': [119.92, 28.45],
'洛阳驿站': [112.44, 34.7],
'秦皇岛驿站': [119.57, 39.95],
'株洲驿站': [113.16, 27.83],
'石家庄驿站': [114.48, 38.03],
'莱芜驿站': [117.67, 36.19],
'常德驿站': [111.69, 29.05],
'保定驿站': [115.48, 38.85],
'湘潭驿站': [112.91, 27.87],
'金华驿站': [119.64, 29.12],
'岳阳驿站': [113.09, 29.37],
'长沙驿站': [113, 28.21],
'衢州驿站': [118.88, 28.97],
'廊坊驿站': [116.7, 39.53],
'菏泽驿站': [115.480656, 35.23375],
'合肥驿站': [117.27, 31.86],
'武汉驿站': [114.31, 30.52],
'大庆驿站': [125.03, 46.58]
};
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
// backgroundColor: '#404a59',
/*** title: {
text: '实时行驶车辆',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},**/
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + " : " + params.value[2]
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: true
}
},
roam: true,
zoom: 1.2,
itemStyle: {
normal: {
areaColor: 'rgba(2,37,101,.5)',
borderColor: 'rgba(112,187,252,.5)'
},
emphasis: {
areaColor: 'rgba(2,37,101,.8)'
}
}
},
series: [
{
name: '驿站地点',
type: 'scatter',
symbol: 'pin',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 4;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ffeb7b'
}
}
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
})

@ -28,10 +28,18 @@
/// </summary>
private void InitializeComponent()
{
this.components = new System.ComponentModel.Container();
this.SuspendLayout();
//
// FormScreen
//
this.AutoScaleDimensions = new System.Drawing.SizeF(7F, 17F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(800, 450);
this.ClientSize = new System.Drawing.Size(1904, 1041);
this.Margin = new System.Windows.Forms.Padding(1, 1, 1, 1);
this.Name = "FormScreen";
this.Text = "Form1";
this.ResumeLayout(false);
}
#endregion

@ -1,64 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema
Version 2.0
The primary goals of this format is to allow a simple XML format
that is mostly human readable. The generation and parsing of the
various data types are done through the TypeConverter classes
associated with the data types.
Example:
... ado.net/XML headers & schema ...
<resheader name="resmimetype">text/microsoft-resx</resheader>
<resheader name="version">2.0</resheader>
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
<data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
<value>[base64 mime encoded serialized .NET Framework object]</value>
</data>
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
<value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
<comment>This is a comment</comment>
</data>
There are any number of "resheader" rows that contain simple
name/value pairs.
Each data row contains a name, and value. The row also contains a
type or mimetype. Type corresponds to a .NET class that support
text/value conversion through the TypeConverter architecture.
Classes that don't support this are serialized and stored with the
mimetype set.
The mimetype is used for serialized objects, and tells the
ResXResourceReader how to depersist the object. This is currently not
extensible. For a given mimetype the value must be set accordingly:
Note - application/x-microsoft.net.object.binary.base64 is the format
that the ResXResourceWriter will generate, however the reader can
read any of the formats listed below.
mimetype: application/x-microsoft.net.object.binary.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.soap.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.bytearray.base64
value : The object must be serialized into a byte array
: using a System.ComponentModel.TypeConverter
: and then encoded with base64 encoding.
-->
<root>
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
<xsd:element name="root" msdata:IsDataSet="true">

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<ItemGroup>
<Compile Update="Form1.cs">
<SubType>Form</SubType>
</Compile>
</ItemGroup>
</Project>
<ItemGroup>
<Compile Update="FormScreen.cs">
<SubType>Form</SubType>
</Compile>
</ItemGroup>
</Project>

@ -1 +1 @@
b83ba758c28e2e18db0688eaddd79d31054512ae
87c8b191ce86c391d7644d23afb2bb18dce613cf

@ -4,7 +4,6 @@ D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\bin\Debug\net6.0-
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\bin\Debug\net6.0-windows\GuideScreen.UI.dll
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\bin\Debug\net6.0-windows\GuideScreen.UI.pdb
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.UI.csproj.AssemblyReference.cache
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.Form1.resources
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.UI.csproj.GenerateResource.cache
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.UI.GeneratedMSBuildEditorConfig.editorconfig
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.UI.AssemblyInfoInputs.cache
@ -15,3 +14,4 @@ D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.UI.pdb
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.UI.genruntimeconfig.cache
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\ref\GuideScreen.UI.dll
D:\Source\wisdomstation\guidescreen\GuideScreen\GuideScreen.UI\obj\Debug\net6.0-windows\GuideScreen.FormScreen.resources

Loading…
Cancel
Save