hxx/visualization
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
jiutianzhiyu 2021-04-26 18:14:04 +08:00
commit 49befa3980
29 changed files with 1778 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

447
css/index.css Normal file
View File

@ -0,0 +1,447 @@
html,body{
width: 100%;
height: 100%;
}
body{
background-image: url(../images/bg.jpg);
color: #4c9bfd;
font-size: .666667rem;
}
/* 整体布局 */
.layout{
min-width: 1024px;
max-width: 1920px;
min-height: 780px;
margin: 0 auto;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-size: contain;
padding:3.666667rem .833333rem 0;
display: flex;
}
.cloumn{
flex: 3;
height: 400px;
/* background-color: #f00; */
}
.cloumn:nth-child(2){
flex: 4;
margin: 1.333333rem .833333rem 0;
}
.borderimage{
border:1px solid;
border-image-source: url('../images/border.png');
/* 上 右 下 左 */
/* 上 左右 下 */
/* 上下 左右 */
/* 四周一样 */
border-image-slice: 55 42 26 138;
border-image-width: 2.291667rem 1.75rem 1.083333rem 5.75rem;
padding:.416667rem;
box-sizing: border-box;
margin-bottom: .833333rem;
}
/* 左侧 */
/* 基本信息 */
.baseinfo{
height: 4.666667rem;
display: flex;
justify-content: space-around;
}
.baseinfo h2{
color: #fff;
font-size: 1.25rem;
font-weight: normal;
line-height: 30px;
}
.baseinfo .item:nth-child(2) .icon-dot{
color: red;
}
/* 监控区域 */
.monitor{
height: 20rem;
}
.monitor{
height: 20rem;
flex-direction: column;
}
.monitor .tabs{
margin-bottom: .625rem;
padding: 5px 0;
}
.monitor .tabs a{
font-size: .833333rem;
padding: 0 .833333rem;
}
.monitor .tabs a.active{
color: #fff;
}
.monitor .tabs a:nth-child(1){
border-right: .083333rem solid red;
}
.monitor .content{
display: none;
}
.monitor .content .title {
padding: .416667rem;
display: flex;
background-color: #1b1d27;
}
.monitor .content .title span{
flex: 1;
}
.monitor .content .list{
height: 13.166667rem;
overflow: hidden;
}
.monitor .content .list ul{
width: 100%;
/* animation-name:指定动画的名称
animation-duration:动画的完成时间，以秒为做单位 ，如果没有设置则默认为0，动画不会有效果
animation-interation-count:动画的执行的次数，默认为1，如果需要无限循环，设置为infinite
animation-delay:动画的延迟，默认为0
animation-timing-function:动画的速度曲线，如linear:匀速
animation-direction:动画方向，如果设置来回：alternate
animation-play-state:动画播放的状态，play paused
*/
animation: move 10s linear infinite;
}
/* 鼠标上移，停止动画 */
.monitor .content .list ul:hover{
animation-play-state: paused;
}
/* 创建一个动画 */
@keyframes move {
from{}
to{
/* 往上移动50% */
transform: translateY(-50%);
}
}
.monitor .content li{
display: flex;
padding: .166667rem 0;
position: relative;
}
.monitor .content li span{
flex: 1;
font-size: .5rem;
}
.monitor .content li span:nth-child(1){
padding-left: .625rem;
}
.monitor .content li span:nth-child(2){
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: .833333rem;
}
.monitor .icon-dot{
position: absolute;
left: 0;
opacity: 0;
}
.monitor .content li:hover .icon-dot{
opacity: 1;
}
/* 点位站点统计 */
.site{
height: 14.166667rem;
padding: 1.25rem .833333rem 0;
display: flex;
flex-direction: column;
}
.site h3{
color: #fff;
}
.site .data{
flex: 1;
padding-bottom: .833333rem;
display: flex;
}
.site .data .pie{
flex: 2;
}
.site .data .info{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: rgba(0,0,255,0.2);
}
.site .data .info h2{
color: #fff;
font-size: 1.25rem;
}
/* 中间 */
.map{
height: 23.75rem;
display: flex;
flex-direction: column;
}
.map h3 {
line-height: 1;
padding: 0.667rem 0;
margin: 0;
font-size: 0.833rem;
color: #fff;
}
.map .icon-cube {
color: #68d8fe;
}
.map .chart {
flex: 1;
background-color: rgba(255, 255, 255, 0.05);
}
.map .maparea {
width: 100%;
height: 100%;
}
/* 用户统计 */
.user{
height: 14.166667rem;
margin-top: .833333rem;
}
.user h2{
color:#fff;
font-size: 0.783333rem;
padding: .416667rem 0;
}
.user .chart{
display: flex;
justify-content: space-between;
}
.user .bar {
flex: 3;
height: 10rem;
}
.user .data {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background-image: url(../images/rect.png);
padding: 1.5rem 1.25rem;
box-sizing: border-box;
}
.user .data h2{
font-size: 1rem;
color: #fff;
}
/* 右侧 */
.order{
height: 6.166667rem;
padding: .416667rem .625rem;
}
.order .tabs {
display: flex;
}
.order .tabs a {
display: block;
padding: 0 .833333rem;
font-size: .75rem;
color: #1950c4;
border-right: 0.083rem solid #00f2f1;
}
.order .tabs a:first-child {
padding-left: 0;
}
.order .tabs a:last-child {
border-right: none;
}
.order .tabs a.active {
color: #fff;
font-size: 0.833rem;
}
.order .data{
margin-top: 0.833rem;
display: flex;
}
.order .item {
flex: 1;
}
.order .item h2{
font-size: 1.166667rem;
color: #fff;
margin-bottom: 0.417rem;
}
.sales{
height: 10.333333rem;
display: flex;
flex-direction: column;
padding: .416667rem .625rem;
}
.sales .caption {
display: flex;
line-height: 1;
}
.sales .caption h2{
font-size: 1.066667rem;
color: #fff;
padding-right: 0.75rem;
border-right: 0.083rem solid #00f2f1;
}
.sales .caption a {
font-size: .866667rem;
padding: .208333rem;
border-radius: .166667rem;
margin: 0 .833333rem;
}
.sales .caption a.active {
background-color: #4c9bfd;
color: #fff;
}
.sales .line{
flex: 1;
padding-top: 0.6rem;
}
.season{
height: 9.666667rem;
display: flex;
}
.channel{
flex: 1;
}
.channel {
margin-right: 0.833rem;
display: flex;
flex-direction: column;
}
.channel h3 {
color: #fff;
font-size: .833333rem;
margin-bottom: .416667rem;
}
.channel .data {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.channel .data .item{
width: 50%;
margin-bottom: .625rem;
}
.channel .data .item:nth-of-type(2n){
text-align: center;
}
.channel .data .item h4{
font-size: 1.5rem;
color: #fff;
}
.channel .data .item h4 small{
font-size: .5rem;
}
.channel .data .item > span {
padding: .333333rem 0;
}
/* 季度区块 */
.quarter {
flex: 1;
display: flex;
flex-direction: column;
}
.quarter .chart {
flex: 1;
padding-top: 0.75rem;
}
.quarter .box {
position: relative;
}
.quarter .label {
transform: translate(-50%, -30%);
color: #fff;
font-size: 1.25rem;
position: absolute;
left: 50%;
top: 50%;
}
.quarter .label small {
font-size: 50%;
}
.quarter .gauge {
height: 3.5rem;
}
.quarter .data {
display: flex;
justify-content: space-between;
}
.quarter .item {
width: 50%;
}
.quarter h3 {
color: #fff;
font-size: 0.8rem;
margin-bottom: 0.4rem;
}
.quarter span {
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #4c9bfd;
font-size: 0.583rem;
}
.list{
height: 11.8rem;
display: flex;
}
.list .all{
width: 10rem;
display: flex;
flex-direction: column;
font-size: .666667rem;
}
.list .all ul{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.list .all [class^='icon-']{
font-size: 1.466667rem;
vertical-align: middle;
margin-right: .625rem;
}
.list .province{
flex: 1;
flex-direction: column;
}
.list .province li.active{
color:#fff;
}
.list .province i{
float: right;
}
.list .province .data{
flex: 1;
display: flex;
margin-top: .625rem;
}
.list .province .data ul {
flex: 1;
}
.list .province .data ul li {
display: flex;
justify-content: space-between;
padding: 0.5rem;
}
.list .province .data ul.sub{
display: flex;
color: #52ffff;
flex-direction: column;
justify-content: space-around;
font-size: 0.5rem;
background-color: rgba(10, 67, 188, 0.4);
}
.list .province .data ul.sub li {
padding: 0.417rem 0.6rem;
}

16
css/reset.css Normal file
View File

@ -0,0 +1,16 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h4,h3,ul,div{
margin: 0;
padding: 0;
font-weight: normal;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}

62
fonts/icomoon.css Normal file
View File

@ -0,0 +1,62 @@
@font-face {
font-family: 'icomoon';
src: url('icomoon.eot');
src: url('icomoon.eot#iefix') format('embedded-opentype'),
url('icomoon.ttf') format('truetype'),
url('icomoon.woff') format('woff'),
url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-dot:before {
content: "\e900";
}
.icon-cup1:before {
content: "\e901";
}
.icon-cup2:before {
content: "\e902";
}
.icon-cup3:before {
content: "\e903";
}
.icon-clock:before {
content: "\e904";
}
.icon-down:before {
content: "\e905";
}
.icon-cube:before {
content: "\e906";
}
.icon-plane:before {
content: "\e907";
}
.icon-train:before {
content: "\e908";
}
.icon-bus:before {
content: "\e909";
}
.icon-bag:before {
content: "\e90a";
}
.icon-up:before {
content: "\e90b";
}

BIN
fonts/icomoon.eot Normal file
View File

Binary file not shown.

22
fonts/icomoon.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="857.6" descent="-166.4" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="dot" d="M510-44.4v0c-109.2 0-198.8 89.2-198.8 198.8v395.2c0 109.2 89.2 198.8 198.8 198.8v0c109.2 0 198.8-89.2 198.8-198.8v-395.6c0-109.2-89.6-198.4-198.8-198.4z" />
<glyph unicode="&#xe901;" glyph-name="cup1" d="M824.4 674c0 68.8-56.4 124.8-124.8 124.8h-375.6c-68.8 0-124.8-56.4-124.8-124.8-214 0-187.6 0-187.6-124.8 0-103.2 84.4-187.6 187.6-187.6 8 0 14 1.6 22 1.6 42-122 140.8-232.8 259.2-250v-145.2h-93.6c-17.2 0-31.2-14-31.2-31.2s14-31.2 31.2-31.2h250c17.2 0 31.2 14 31.2 31.2s-14 31.2-31.2 31.2h-93.6v145.2c118.8 17.2 217.2 126.4 259.2 250 6.4 0 14-1.6 22-1.6 103.2 0 187.6 84.4 187.6 187.6-2 124.8 24.8 124.8-187.6 124.8zM199.2 424c-68.8 0-125.2 56-125.2 124.8s1.6 62.4 124.8 62.4l0.4-187.2zM578.8 296h-94.4v202.4c0 29.2-0.8 46.8-2 52.8-1.6 6-5.2 10.4-11.6 13.6s-20.4 4.4-42 4.4h-9.2v44c45.6 10 80 30 103.6 60.4h55.6v-377.6zM824.4 424v187.2c123.6 0 124.8 6.4 124.8-62.4-1.6-68.8-56.4-124.8-124.8-124.8z" />
<glyph unicode="&#xe902;" glyph-name="cup2" d="M824.4 674c0 68.8-56.4 124.8-124.8 124.8h-375.6c-68.8 0-124.8-56.4-124.8-124.8-214 0-187.6 0-187.6-124.8 0-103.2 84.4-187.6 187.6-187.6 8 0 14 1.6 22 1.6 42-122 140.8-232.8 259.2-250v-145.2h-93.6c-17.2 0-31.2-14-31.2-31.2s14-31.2 31.2-31.2h250c17.2 0 31.2 14 31.2 31.2s-14 31.2-31.2 31.2h-93.6v145.2c118.8 17.2 217.2 126.4 259.2 250 6.4 0 14-1.6 22-1.6 103.2 0 187.6 84.4 187.6 187.6-2 124.8 24.8 124.8-187.6 124.8zM74 548.8c0 68.8 1.6 62.4 124.8 62.4l0.4-187.2c-68.8 0-125.2 56-125.2 124.8zM618 359.2v-63.6h-205.2v53.2c60.8 99.6 96.8 161.2 108.4 184.8s17.2 42 17.2 55.2c0 10-1.6 17.6-5.2 22.8s-8.8 7.6-16 7.6-12.4-2.8-16-8.4c-3.6-5.6-5.2-16.4-5.2-33.2v-35.6h-83.6v14c0 20.8 1.2 37.6 3.2 49.6s7.6 24 16 35.6 19.6 20.4 33.2 26.4 29.6 9.2 48.8 9.2c37.2 0 65.2-9.2 84-27.6 19.2-18.4 28.4-41.6 28.4-70 0-21.6-5.2-44-16-68s-42.4-74.4-94.4-152h102.4zM824.4 424v187.2c123.6 0 124.8 6.4 124.8-62.4-1.6-68.8-56.4-124.8-124.8-124.8z" />
<glyph unicode="&#xe903;" glyph-name="cup3" d="M824.4 674c0 68.8-56.4 124.8-124.8 124.8h-375.6c-68.8 0-124.8-56.4-124.8-124.8-214 0-187.6 0-187.6-124.8 0-103.2 84.4-187.6 187.6-187.6 8 0 14 1.6 22 1.6 42-122 140.8-232.8 259.2-250v-145.2h-93.6c-17.2 0-31.2-14-31.2-31.2s14-31.2 31.2-31.2h250c17.2 0 31.2 14 31.2 31.2s-14 31.2-31.2 31.2h-93.6v145.2c118.8 17.2 217.2 126.4 259.2 250 6.4 0 14-1.6 22-1.6 103.2 0 187.6 84.4 187.6 187.6-2 124.8 24.8 124.8-187.6 124.8zM74 548.8c0 68.8 1.6 62.4 124.8 62.4l0.4-187.2c-68.8 0-125.2 56-125.2 124.8zM620 337.2c-6.8-16.4-18.4-28.8-35.2-37.6-16.8-8.4-38-12.8-64-12.8-29.6 0-52.8 4.8-69.6 14.8s-28 22-33.2 36.4-8 39.2-8 74.8v29.6h93.2v-60.8c0-16 0.8-26.4 2.8-30.8s6-6.4 12.8-6.4c7.2 0 12 2.8 14.4 8.4s3.6 20 3.6 43.6v26c0 14.4-1.6 24.8-4.8 31.6s-8 10.8-14.4 13.2c-6.4 2-18.4 3.2-36.8 3.6v53.6c22 0 36 0.8 41.2 2.4s9.2 5.2 11.2 11.2c2.4 5.6 3.6 14.8 3.6 26.8v20.8c0 13.2-1.2 21.6-4 26-2.8 4-6.8 6.4-12.4 6.4-6.4 0-10.8-2-13.2-6.4s-3.6-13.6-3.6-28v-30.8h-93.2v32c0 35.6 8 60 24.4 72.4s42.4 18.8 78 18.8c44.4 0 74.8-8.8 90.4-26 16-17.2 23.6-41.6 23.6-72.4 0-20.8-2.8-36-8.4-45.2s-15.6-18-30-25.6c14-4.8 24.8-12.4 31.6-23.6 6.8-10.8 10.4-36.4 10.4-76.4-0.4-30.4-3.6-53.2-10.4-69.6zM824.4 424v187.2c123.6 0 124.8 6.4 124.8-62.4-1.6-68.8-56.4-124.8-124.8-124.8z" />
<glyph unicode="&#xe904;" glyph-name="clock" d="M502.898 788.907c-245.76 0-443.733-197.973-443.733-443.733s200.249-443.733 443.733-443.733c245.76 0 443.733 197.973 443.733 443.733s-200.249 443.733-443.733 443.733zM791.893 210.916c-6.827-13.653-18.204-20.48-31.858-20.48-4.551 0-9.102 0-13.653 2.276l-261.689 118.329c-11.378 4.551-20.48 18.204-20.48 31.858v245.76c0 18.204 15.929 34.133 34.133 34.133s34.133-15.929 34.133-34.133v-225.28l241.209-109.227c18.204-6.827 25.031-25.031 18.204-43.236z" />
<glyph unicode="&#xe905;" glyph-name="down" d="M174.56 163.976l288.192-242.864c26.864-22.384 70.512-22.384 97.368 0l288.192 242.864c43.088 36.936 12.312 99.608-48.128 99.608h-110.24v448.8c0 49.248-40.288 89.536-89.536 89.536h-179.072c-49.248 0-89.536-40.288-89.536-89.536v-448.8h-109.12c-61-0.56-91.216-63.232-48.128-99.608z" />
<glyph unicode="&#xe906;" glyph-name="cube" d="M930.8 632.4c-2 1.2-4.4 2.4-6.4 3.2l-378 219.6c-21.2 12-47.2 12-68.4 0l-384.8-222.8c-21.2-12.4-34.4-34.8-34-59.2l1.2-442.4c0-24.4 12.8-47.2 34-59.2l378.4-219.6c1.6-1.2 3.2-2 4.8-3.2 3.6-2 7.6-3.6 11.6-5.2 0 0 0.4 0 0.4 0 0.4 0 1.2-0.4 1.6-0.4 6.4-2 12.8-3.2 19.6-3.2 0 0 0 0 0 0 0.4 0 0.8 0 0.8 0v0c12 0 23.6 2.8 34 8.8l385.2 222.4c21.2 12.4 34.4 34.8 34 59.2v442.8c0.4 24.4-12.8 47.2-34 59.2zM512.4 716.4l246.4-143.2-248.4-143.2-61.6 36-184.8 107.2 248.4 143.2zM829.2 169.6l-249.2-143.2v285.2l249.2 143.2v-285.2z" />
<glyph unicode="&#xe907;" glyph-name="plane" d="M937.2 777.6c-22 18.4-53.2 20.8-93.6 7.6s-76.8-36-108.8-68.4l-101.2-101.2-421.6 100.8c-7.2 1.6-13.2 0.8-19.2-5.2l-80.8-81.2c-4.4-4.4-6.4-10-5.6-17.2 1.2-6.8 5.2-12 10.8-15.2l321.6-176.8-164-164-122.8 33.6c-0.8 0.8-2.4 0.8-5.2 0.8-5.6 0-10.8-2-14.4-5.6l-61.2-61.6c-4.8-4.8-6.4-10-5.6-16 0.8-6.8 4-11.2 8.4-14.4l159.6-119.6 119.6-159.6c3.6-4.8 8.8-7.6 15.2-8.4h1.2c5.6 0 10.8 2 14.4 5.6l60.8 60.8c5.6 5.6 6.8 12.8 5.2 19.6l-33.6 122.8 164 164 176.8-321.6c3.2-5.6 6.8-8.8 13.2-10 1.2-0.8 2.4-0.8 4.4-0.8 5.2 0 8.8 1.2 12 4l81.2 60.8c7.2 5.6 9.6 12.8 7.6 20.8l-101.2 440.8 102 102c32.4 32.4 55.2 68.4 68.4 108.8 13.2 40.8 10.8 72-7.6 94z" />
<glyph unicode="&#xe908;" glyph-name="train" d="M576 237.2v-256h277.2c35.2 0 64-28.8 64-64s-28.8-64-64-64h-682.4c-35.2 0-64 28.8-64 64s28.8 64 64 64h277.2v256h-64c-35.2 0-64 28.8-64 64s28.8 64 64 64h256c35.2 0 64-28.8 64-64s-28.8-64-64-64h-64zM427.6 784c7.2 46.4 50.8 78.4 97.6 71.2 36.8-5.6 65.2-34.4 71.2-71.2 88-16.8 169.2-59.6 232.4-123.2 174.8-174.8 174.8-458.4 0-633.6-24.8-24.8-65.6-24.8-90.4 0s-24.8 65.6 0 90.4v0c124.8 124.8 124.8 327.6 0 452.4s-327.6 124.8-452.4 0-124.8-327.6 0-452.4c0 0 0 0 0 0 24.8-24.8 24.8-65.6 0-90.4s-65.6-24.8-90.4 0c-175.2 174.8-175.2 458.4-0.4 633.6 63.2 63.2 144.4 106.4 232.4 123.2v0z" />
<glyph unicode="&#xe909;" glyph-name="bus" d="M203.902 20.316c-76.37 13.852-131.4 80.862-131.026 158.354l3.744 479.182c0.748 87.6 72.252 158.354 159.852 158.354h551.058c87.6 0 159.104-70.754 159.852-158.354l3.744-479.182c0.374-69.631-43.8-131.4-110.062-153.114l31.072-53.534c16.846-28.452 7.112-65.138-21.338-81.984s-65.138-7.112-81.984 21.338c0 0.374-0.374 0.374-0.374 0.748l-59.898 103.698c-0.374 0.748-0.748 1.124-1.124 1.872h-366.874c-0.374-0.748-0.748-1.498-1.124-1.872l-59.898-103.698c-16.472-28.826-52.784-38.934-81.61-22.462s-38.934 52.784-22.462 81.61c0 0.374 0.374 0.374 0.374 0.748l28.077 48.292zM452.102 656.354h-279.648c-10.856 0-19.842-8.984-19.842-19.842v0-239.59c0-10.856 8.984-19.842 19.842-19.842v0h279.648c10.856 0 19.842 8.984 19.842 19.842v0 239.59c0 10.856-8.984 19.842-19.842 19.842 0 0 0 0 0 0zM851.544 656.354h-279.648c-10.856 0-19.842-8.984-19.842-19.842v0-239.59c0-10.856 8.984-19.842 19.842-19.842 0 0 0 0 0 0h279.648c10.856 0 19.842 8.984 19.842 19.842v0 239.59c0 10.856-8.984 19.842-19.842 19.842 0 0 0 0 0 0zM731.75 296.97c-32.944 0-59.898-26.954-59.898-59.898s26.954-59.898 59.898-59.898 59.898 26.954 59.898 59.898-26.954 59.898-59.898 59.898zM292.25 296.97c-32.944 0-59.898-26.954-59.898-59.898s26.954-59.898 59.898-59.898 59.898 26.954 59.898 59.898-26.58 59.898-59.898 59.898z" />
<glyph unicode="&#xe90a;" glyph-name="bag" d="M816.928 591.86h-87.137c0 120.346-97.563 218.028-217.791 218.028s-217.791-97.681-217.791-218.028h-87.137c-47.902 0-86.659-39.26-86.659-87.231l-0.478-523.315c0.109-48.101 39.043-87.067 87.119-87.231h609.844c48.090 0.163 87.028 39.13 87.137 87.222v523.299c-0.109 48.101-39.043 87.067-87.119 87.231h-0.017zM512 722.682c0.034 0 0.079 0 0.119 0 72.12 0 130.585-58.465 130.585-130.585 0-0.084 0-0.168 0-0.252v0.011h-261.406c0 0.069 0 0.153 0 0.237 0 72.12 58.465 130.585 130.585 130.585 0.040 0 0.084 0 0.124 0h-0.006zM512 286.577c-120.228 0-217.791 97.681-217.791 218.077h87.112c0-0.079 0-0.17 0-0.261 0-72.12 58.465-130.585 130.585-130.585 0.040 0 0.084 0 0.124 0h-0.006c0.022 0 0.048 0 0.074 0 72.12 0 130.585 58.465 130.585 130.585 0 0.084 0 0.168 0 0.252v-0.011h87.137c0-120.371-97.588-218.052-217.816-218.052z" />
<glyph unicode="&#xe90b;" glyph-name="up" d="M848.728 541.856l-288.368 242.696c-26.864 22.392-70.752 22.392-97.616 0l-288.368-242.696c-42.984-36.72-12.536-99.408 48.36-99.408h110.152c0 0 0-0.896 0-0.896v-447.776c0-49.256 40.296-89.552 89.552-89.552h179.112c49.256 0 89.552 40.296 89.552 89.552v447.776c0 0 0 0.896 0 0.896h109.256c60.896 0 91.344 62.688 48.36 99.408z" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
fonts/icomoon.ttf Normal file
View File

Binary file not shown.

BIN
fonts/icomoon.woff Normal file
View File

Binary file not shown.

BIN
images/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
images/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
images/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
images/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
images/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
images/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
images/7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
images/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 KiB

BIN
images/border.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
images/border.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
images/border1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
images/btn_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
images/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 B

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
images/rect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

443
index.html Normal file
View File

@ -0,0 +1,443 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化-智能看板</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/icomoon.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/myrem.js"></script>
<script src="./js/china.js"></script>
<script src="./js/mychart-map.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div class="layout">
<div class="cloumn">
<div class="baseinfo borderimage">
<div class="item">
<h2>2,190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>3,001</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>108</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
</div>
<div class="monitor borderimage">
<div class="tabs">
<a href="javscript:;" class="active" data-index='0'>故障设备监控</a>
<a href="javscript:;" data-index='1'>异常设备监控</a>
</div>
<div class="content" style="display: block;">
<div class="title">
<span>故障时间</span>
<span>设备地址</span>
<span>异常代码</span>
</div>
<div class="list">
<ul>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180909</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180910</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180911</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="title">
<span>异常时间</span>
<span>设备地址</span>
<span>异常代码</span>
</div>
<div class="list">
<ul>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
</ul>
</div>
</div>
</div>
<div class="site borderimage">
<h3>点位站点分布统计</h3>
<div class="data">
<div class="pie"></div>
<div class="info">
<div class="item">
<h2>2,190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>2,190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="cloumn">
<div class="map">
<span>
<i class="icon-cube"></i>设备数据统计
</span>
<div class="maparea"></div>
</div>
<div class="user borderimage">
<h2>全国用户总量统计</h2>
<div class="chart">
<div class="bar"></div>
<div class="data">
<div class="item">
<h2>2190</h2>
<span>
<i class="icon-dot"></i>设备总数
</span>
</div>
<div class="item">
<h2>190</h2>
<span>
<i class="icon-dot" style="color:green"></i>设备总数
</span>
</div>
</div>
</div>
</div>
</div>
<div class="cloumn">
<div class="order borderimage">
<div class="tabs">
<a href="javascript:;" class="active" data-type='day365'>365天</a>
<a href="javascript:;" data-type='day90'>90天</a>
<a href="javascript:;" data-type='day30'>30天</a>
<a href="javascript:;" data-type='day1'>24小时</a>
</div>
<div class="data">
<div class="item">
<h2 class="order_orders">2190</h2>
<span>
<i class="icon-dot"></i>订单量
</span>
</div>
<div class="item">
<h2 class="order_count">190</h2>
<span>
<i class="icon-dot" style="color:green"></i>销售额(万元)
</span>
</div>
</div>
</div>
<div class="sales borderimage">
<div class="caption">
<h2>销售额统计</h2>
<!-- 前台页面的属性定义不是自由的，很多时候都必须根据后台的设定来设置
你在前台页面不能乱键 -->
<a href="javascript:;" class="active" data-type='year'>年</a>
<a href="javascript:;" data-type='quarter'>季</a>
<a href="javascript:;" data-type='month'>月</a>
<a href="javascript:;" data-type='week'>周</a>
</div>
<div class="line"></div>
</div>
<div class="season">
<div class="channel borderimage">
<h3>渠道分布</h3>
<div class="data">
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
</div>
</div>
<div class="quarter borderimage">
<h3>一季度销售进度</h3>
<div class="chart">
<div class="box">
<div class="gauge"></div>
<div class="label">75<small> %</small></div>
</div>
<div class="data">
<div class="item">
<h4>1,321</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
销售额(万元)
</span>
</div>
<div class="item">
<h4>150%</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
同比增长
</span>
</div>
</div>
</div>
</div>
</div>
<div class="list borderimage">
<div class="all">
<h3>全国热榜</h3>
<ul>
<li>
<i class="icon-cup1" style="color: #d93f36;"></i>
可爱多
</li>
<li>
<i class="icon-cup2" style="color: #68d8fe;"></i>
娃哈啥
</li>
<li>
<i class="icon-cup3" style="color: #4c9bfd;"></i>
喜之郎
</li>
</ul>
</div>
<div class="province">
<h3>各省热销 <i class="date">// 近30日 //</i></h3>
<div class="data">
<ul class="sup">
<li>
<span>北京</span>
<span>25,179 <s class="icon-up"></s></span>
</li>
<li>
<span>河北</span>
<span>23,252 <s class="icon-down"></s></span>
</li>
<li>
<span>上海</span>
<span>20,760 <s class="icon-up"></s></span>
</li>
<li>
<span>江苏</span>
<span>23,252 <s class="icon-down"></s></span>
</li>
<li>
<span>山东</span>
<span>20,760 <s class="icon-up"></s></span>
</li>
</ul>
<ul class="sub">
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

46
js/china.js Normal file
View File

File diff suppressed because one or more lines are too long

22
js/echarts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

382
js/index.js Normal file
View File

@ -0,0 +1,382 @@
$(function () {
//1. 复制一份list标签里面的li, 为css滚动动画提供
$('.monitor .content').each(function () {
$(this).find('ul').append($(this).find('ul').children('li').clone())
});
//2. 故障监控按键点击切换
$('.monitor .tabs').on('click', 'a', function () {
//2.0 添加移除active类名
$(this).addClass('active').siblings().remove('active')
//2.1 找到下标
let index = $(this).index()
//2.2 设置对应content显示
$('.monitor .content').eq(index).show().siblings('.content').hide()
});
// 3. 添加饼状图
(function () {
let mychart = echarts.init($('.site .pie')[0])
let option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [{
name: '面积模式',
type: 'pie',
radius: ['5%', '60 %'],
labelLine: {
// 连接扇形图线长
length: 3,
// 连接文字线长
length2: 3,
},
center: ['50%', '50%'],
roseType: 'area',
data: [{
value: 10,
name: 'rose1'
},
{
value: 5,
name: 'rose2'
},
{
value: 15,
name: 'rose3'
},
{
value: 25,
name: 'rose4'
},
{
value: 20,
name: 'rose5'
},
{
value: 35,
name: 'rose6'
},
{
value: 30,
name: 'rose7'
},
{
value: 40,
name: 'rose8'
}
]
}]
}
// 基于准备好的dom，初始化echarts实例
mychart.setOption(option)
})();
//4.添加柱状图
(function () {
let mychart = echarts.init($('.user .bar')[0])
let item = {
value: 1200,
itemStyle: {
color: '#254065'
},
// 设置提示弹出框的样式
tooltip: {
// 这个可以设置整个框的样式
// extraCssText: 'opacity:0'
trigger: 'none'
},
// 设置鼠标移上时柱状条的背景色
emphasis: {
itemStyle: {
color: '#254065'
}
}
}
let option = {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'red' // 0% 处的颜色
}, {
offset: 1,
color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
},
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '5%',
right: '5%',
top: '5%',
bottom: '5%',
containLabel: true,
},
xAxis: [{
type: 'category',
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
axisTick: {
alignWithLabel: true
},
axisLabel: {
color: '#4c9bfd'
},
axisLine: {
lineStyle: {
color: '#68d8fe'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: ['#68d8fe']
}
},
axisLine: {
lineStyle: {
color: '#68d8fe'
}
}
}],
series: [{
name: '设备数量',
type: 'bar',
barWidth: '50%',
data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
}]
}
mychart.setOption(option)
})();
//5.订单量统计
//5.1 造一个假的订单数据
let orderData = [{
num: 3650000,
money: 36500000
},
{
num: 90000,
money: 900000
},
{
num: 30000,
money: 300000
},
{
num: 2400,
money: 24000
}
];
(function () {
//设置初始下标
let index = 0
//5.2 绑定鼠标点击事件
$('.order .tabs').on('click', 'a', function () {
//修改类名
$(this).addClass('active').siblings().removeClass('active')
//找到下标
let temp = $(this).index()
index = temp
//修改元素内容为对应下标的数组数据
$('.order .data .item .order_orders').text(orderData[temp]['num'])
$('.order .data .item .order_count').text(orderData[temp]['money'])
})
//开始自动执行一次
$('.order .tabs a').eq(index).click()
//自动轮播
let timeId = setInterval(function () {
index++
if (index == $('.order .tabs a').length) {
index = 0
}
$('.order .tabs a').eq(index).click()
}, 5000)
})();
//6.销售统计
(function () {
//造一个假的数据
let data = {
year: [
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
],
quarter: [
[230, 750, 120, 970],
[430, 310, 60, 230],
['春', '夏', '秋', '冬']
],
month: [
[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36, 34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36, 34, 87, 32, 76, 98, 12, 32],
[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98, 56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98, 56, 43, 98, 21, 56, 87, 43],
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
],
week: [
[43, 73, 62, 54, 91, 54, 66],
[32, 54, 34, 87, 32, 45, 76],
['星期1', '星期2', '星期3', '星期4', '星期5', '星期6', '星期日']
]
}
//画图
let mychart = echarts.init($('.sales .line')[0])
let option = {
legend: {
data: ['预期销售额', '实际销售额度'],
textStyle: {
color: '#4c9bfd'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
color: "#4c9bfd",
interval: 0
},
axisLine: {
lineStyle: {
color: '#68d8fe'
}
},
data: data.year[2],
boundaryGap: false,
},
yAxis: {
type: 'value',
axisLabel: {
color: "#4c9bfd"
},
axisLine: {
lineStyle: {
color: '#68d8fe'
}
},
splitLine: {
lineStyle: {
color: ['#68d8fe']
}
},
},
color: ['yellow', 'red'],
series: [{
name: '预期销售额',
data: data.year[0],
type: 'line',
smooth: true,
},
{
name: '实际销售额度',
data: data.year[1],
type: 'line',
smooth: true,
},
]
}
mychart.setOption(option)
//起始下标
let index = 0
//点击事件
$('.sales .caption').on('click', 'a', function () {
//修改class
$(this).addClass('active').siblings('a').removeClass('active')
//更改index
index = $(this).index() - 1 //兄弟里还有一个h2
//获取当前的自定义属性
let current = $(this).data('type')
//更改option里面的数据
option.series[0].data = data[current][0]
option.series[1].data = data[current][1]
option.xAxis.data = data[current][2]
//重新渲染图形
mychart.setOption(option)
})
//定时器轮播
let timeId
function slideshow() {
timeId = setInterval(function () {
index++
if (index == $('.sales .caption a').length) {
index = 0
}
$('.sales .caption a').eq(index).click()
}, 5000);
}
slideshow()
//鼠标悬停停止轮播
$('.sales').on('mouseenter', function () {
clearInterval(timeId)
})
//鼠标移开继续轮播
$('.sales').on('mouseleave', function () {
slideshow()
})
})();
})

5
js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

314
js/mychart-map.js Normal file
View File

@ -0,0 +1,314 @@
$(function () {
var chinaGeoCoordMap = {
"福建": [119.4543, 25.9222],
"泉州": [118.4543, 25.0222],
'大庆': [126.9688, 45.868],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
'黑龙江': [127.9688, 45.368],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891]
};
var chinaDatas = [
[{
name: '黑龙江',
value: 0.88
}],
[{
name: '内蒙古',
value: 0.12
}],
[{
name: '吉林',
value: 0.89
}],
[{
name: '辽宁',
value: 0.86
}],
[{
name: '河北',
value: 0.88
}],
[{
name: '北京',
value: 0.83
}],
[{
name: '天津',
value: 0.71
}],
[{
name: '山西',
value: 0.63
}],
[{
name: '陕西',
value: 0.56
}],
[{
name: '宁夏',
value: 0.17
}],
[{
name: '云南',
value: 0.11
}],
[{
name: '四川',
value: 1
}],
[{
name: '重庆',
value: 0.80
}],
[{
name: '山东',
value: 0.77
}],
[{
name: '河南',
value: 0.75
}],
[{
name: '江苏',
value: 0.88
}],
[{
name: '安徽',
value: 0.73
}],
[{
name: '湖北',
value: 0.75
}],
[{
name: '浙江',
value: 0.82
}],
[{
name: '福建',
value: 0.67
}],
[{
name: '江西',
value: 0.71
}],
[{
name: '湖南',
value: 0.75
}],
[{
name: '广东',
value: 0.78
}],
[{
name: '海南',
value: 0.1
}],
[{
name: '新疆',
value: 0
}],
[{
name: '上海',
value: 0.91
}]
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [119.4543, 25.9222]; //目的点
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[
['泉州', chinaDatas]
].forEach(function (item, i) {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) { //圆环显示文字
return params.data.name;
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function (val) {
return 5 + val[2] * 5; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: "#0f0"
}
},
emphasis: {
show: true,
color: "#f60"
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
}
);
});
option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
return res;
}
},
// backgroundColor: "#013954",
visualMap: { //图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', //地图背景色
borderColor: '#516a89', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' //悬浮背景
}
}
},
series: series
};
let myecharts = echarts.init($('.map .maparea')[0])
myecharts.setOption(option)
})

19
js/myrem.js Normal file
View File

@ -0,0 +1,19 @@
// 实现rem适配
(function () {
var setFont = function () {
var html = document.documentElement
// 获取屏幕的宽度
var width = html.clientWidth
if (width < 1024) width = 1024
if (width > 1920) width = 1920
// 计算当前屏幕下，一个rem所代表的px大小
var fontSize = width / 80 + 'px'
console.log(fontSize)
// 将字体大小赋值给htm根元素，因为rem是参照html根元素的
html.style.fontSize = fontSize
}
setFont()
window.onresize = function () {
setFont()
}
})()