echart实现金色贵气数据大屏大数据看板中控可视化效果代码

代码语言:html

所属分类:图表

代码描述:echart实现金色贵气数据大屏大数据看板中控可视化效果代码

代码标签: echart 金色 贵气 数据 大屏 大数据 看板 中控 可视化

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
<style>

.ztree * {padding:0; margin:0; font-size:14px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
.ztree {margin:0; padding:5px; color:#333}
.ztree li{padding:0; margin:0; list-style:none; line-height:17px; text-align:left; white-space:nowrap; outline:0}
.ztree li ul{ margin:0; padding:0 0 0 18px}
.ztree li ul.line{ background:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/line_conn.png) 0 0 repeat-y;}

.ztree li a {padding-right:3px; margin:0; cursor:pointer; height:21px; color:#333; background-color: transparent; text-decoration:none; vertical-align:top; display: inline-block}
.ztree li a:hover {text-decoration:underline}
.ztree li a.curSelectedNode {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; opacity:0.8;}
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#e5e5e5; color:black; height:21px; border:1px #666 solid; opacity:0.8;}
.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#aaa; color:white; height:21px; border:1px #666 solid;
  opacity:0.8; filter:alpha(opacity=80)}
.ztree li a.tmpTargetNode_prev {}
.ztree li a.tmpTargetNode_next {}
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0;
  font-size:12px; border:1px #585956 solid; *border:0px}
.ztree li span {line-height:21px; margin-right:2px}
.ztree li span.button {line-height:0; margin:0; padding: 0; width:21px; height:21px; display: inline-block; vertical-align:middle;
  border:0 none; cursor: pointer;outline:none;
  background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
  background-image:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/bootstrap.pngg"); *background-image:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/bootstrap.giff")}

.ztree li span.button.chk {width:13px; height:13px; margin:0 2px; cursor: auto}
.ztree li span.button.chk.checkbox_false_full {background-position: -5px -5px;}
.ztree li span.button.chk.checkbox_false_full_focus {background-position: -5px -26px;}
.ztree li span.button.chk.checkbox_false_part {background-position: -5px -48px;}
.ztree li span.button.chk.checkbox_false_part_focus {background-position: -5px -68px;}
.ztree li span.button.chk.checkbox_false_disable {background-position: -5px -89px;}
.ztree li span.button.chk.checkbox_true_full {background-position: -26px -5px;}
.ztree li span.button.chk.checkbox_true_full_focus {background-position: -26px -26px;}
.ztree li span.button.chk.checkbox_true_part {background-position: -26px -48px;}
.ztree li span.button.chk.checkbox_true_part_focus {background-position: -26px -68px;}
.ztree li span.button.chk.checkbox_true_disable {background-position: -26px -89px;}
.ztree li span.button.chk.radio_false_full {background-position: -47px -5px;}
.ztree li span.button.chk.radio_false_full_focus {background-position: -47px -26px;}
.ztree li span.button.chk.radio_false_part {background-position: -47px -47px;}
.ztree li span.button.chk.radio_false_part_focus {background-position: -47px -68px;}
.ztree li span.button.chk.radio_false_disable {background-position: -47px -89px;}
.ztree li span.button.chk.radio_true_full {background-position: -68px -5px;}
.ztree li span.button.chk.radio_true_full_focus {background-position: -68px -26px;}
.ztree li span.button.chk.radio_true_part {background-position: -68px -47px;}
.ztree li span.button.chk.radio_true_part_focus {background-position: -68px -68px;}
.ztree li span.button.chk.radio_true_disable {background-position: -68px -89px;}

.ztree li span.button.switch {width:21px; height:21px}
.ztree li span.button.root_open{background-position:-105px -63px}
.ztree li span.button.root_close{background-position:-126px -63px}
.ztree li span.button.roots_open{background-position: -105px 0;}
.ztree li span.button.roots_close{background-position: -126px 0;}
.ztree li span.button.center_open{background-position: -105px -21px;}
.ztree li span.button.center_close{background-position: -126px -21px;}
.ztree li span.button.bottom_open{background-position: -105px -42px;}
.ztree li span.button.bottom_close{background-position: -126px -42px;}
.ztree li span.button.noline_open{background-position: -105px -84px;}
.ztree li span.button.noline_close{background-position: -126px -84px;}
.ztree li span.button.root_docu{ background:none;}
.ztree li span.button.roots_docu{background-position: -84px 0;}
.ztree li span.button.center_docu{background-position: -84px -21px;}
.ztree li span.button.bottom_docu{background-position: -84px -42px;}
.ztree li span.button.noline_docu{ background:none;}

.ztree li span.button.ico_open{margin-right:2px; background-position: -147px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_close{margin-right:2px; margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico_docu{margin-right:2px; background-position: -147px -43px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit {margin-left:2px; margin-right: -1px; background-position: -189px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.edit:hover {
  background-position: -168px -21px;
}
.ztree li span.button.remove {margin-left:2px; margin-right: -1px; background-position: -189px -42px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.remove:hover {
  background-position: -168px -42px;
}
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position: -189px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.add:hover {
  background-position: -168px 0;
}
.ztree li span.button.ico_loading{margin-right:2px; background:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)}

span.tmpzTreeMove_arrow {width:16px; height:21px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute;
    background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
    background-position:-168px -84px; background-image:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/bootstrap.pngg"); *background-image:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/bootstrap.giff")}

ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)}
.ztreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute}
/*:此代码只作为演示用,不是源代码。源码地址唯一出处: https://www.bootstrapmb.com/item/14888(这个说明仅在演示里会看到,下载的源码里没有)*/@charset "utf-8";*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*,body{padding:0;margin:0;font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB",微软雅黑,STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif,HYWenHei-GEW}

body,html{height:100%}
li{list-style-type:none}
i{margin:0;padding:0;text-indent:0}
img{border:none;max-width:100%;
    /* image-rendering: -webkit-optimize-contrast;  */
}
a{text-decoration:none;color:#fff}
a.active,a:focus{outline:0!important;text-decoration:none}
h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0;margin:0}
a:hover{color:#06c;text-decoration:none!important}
i{font-style:normal}

/* 滚动条 */
::-webkit-scrollbar {width:3px;position:absolute;}
::-webkit-scrollbar-thumb {background:#ff0000}
::-webkit-scrollbar-track {background:#6c1a1a}

body{color:#fff;font-size:15px;overflow-x:hidden;}
.bg1{background:#c02c28 url(//repo.bfw.wiki/bfwrepo/images/echarts/map/01.jpg) no-repeat fixed center top;background-size:100% 100%}
.bg2{background:#8e0f16 url(//repo.bfw.wiki/bfwrepo/images/echarts/map/02.jpg) no-repeat fixed center top;background-size:100% 100%}
.bg3{background:#8c0000 url(//repo.bfw.wiki/bfwrepo/images/echarts/map/03.jpg) no-repeat fixed center top;background-size:100% 100%}
.bg4{background:#b42209 url(//repo.bfw.wiki/bfwrepo/images/echarts/map/04.jpg) no-repeat fixed center top;background-size:100% 100%}
.bg5{background:#050101 url(//repo.bfw.wiki/bfwrepo/images/echarts/map/05.jpg) no-repeat fixed center top;background-size:100% 100%}
.bg6{background:#af0009 url(//repo.bfw.wiki/bfwrepo/images/echarts/map/06.jpg) no-repeat fixed center top;background-size:100% 100%}


body::before{content:"";position:absolute;width:100%;opacity:1;transition:all .5s;height:100%;top:0;left:0;pointer-events:none;background-color:transparent;background-image:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/pattern.png);background-size:4.6875rem;background-repeat:repeat;background-attachment:initial;z-index:11;opacity:.8}

.mainbox>ul{display:flex;padding:10px 15px}
.mainbox>ul>li{width:25%;padding:0 8px}
.mainbox>ul,
.mainbox>ul>li{ height: 100%;}
/* 标题 */
.tit{padding:10px 10px 0 30px;font-size:16px;font-weight:500;color:#ffdbb5;position:relative;font-weight:bolder;display:flex}
.tit:before{transform:rotate(45deg);border-radius:3px;position:absolute;content:"";width:6px;height:6px;border:2px solid #fc6;left:12px;top:16px}



/* 边框&背景 */
.card{position:relative;height:300px; margin-bottom:10px; backdrop-filter:blur(3px);background:linear-gradient(135deg,rgba(247,111,0,.2),transparent,transparent);box-shadow:0 0 20px rgba(0,0,0,.1);}
.card::before{position:absolute;right:0;top:0;pointer-events:none;content:"";border-right:2px solid #ffd797;border-top:2px solid #ffd797;width:calc(100% - 200px);height:calc(100% - 20px); }
.card:after{position:absolute;left:190px;top:0;pointer-events:none;content:"";background:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/line01.png);width:70px;height:11px;}
.boxnav{padding:10px 15px;height:calc(100% - 33px);position:relative;z-index:10}
.boxnav::before{position:absolute;left:0;bottom:0;pointer-events:none;content:"";border-left:2px solid #ffd797;border-bottom:2px solid #ffd797;width:calc(100% - 100px);height:calc(100% - 50px);}
.boxnav:after{position:absolute;right:0;bottom:0;pointer-events:none;content:"";background:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/line02.png);width:75px;height:11px;}
.boxnav:after,
.boxnav::before,
.card:after,
.card::before{opacity: .15;}

/* 动画 */
.fadeIn{opacity:0;animation:fadeIn 1.5s forwards}
.fadeInDown{opacity:0;transform:translate3d(0,-100%,0);animation:fadeInDown .6s forwards}
.fadeInUp{animation:fadeInUp 1s forwards;opacity:0}
.fadeInLeft{animation:fadeInLeft .6s forwards}
.bounceIn{transform:scale(0,1);animation:bounceIn .6s forwards}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}
to{opacity:1;transform:scale(1)}
}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
.delay02{animation-delay:.2s}
.delay04{animation-delay:.4s}
.delay06{animation-delay:.6s}
.delay08{animation-delay:.8s}
.delay1{animation-delay:1s}
.delay12{animation-delay:1.2s}
.delay14{animation-delay:1.4s}
.delay16{animation-delay:1.6s}
.delay18{animation-delay:1.8s}
.delay2{animation-delay:2s}

/* 滚动所需 */
.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_down .str_move,.str_vertical .str_move{white-space:normal;width:100%}
.noStop .str_move,.no_drag .str_move,.str_static .str_move{cursor:inherit}
.str_wrap img{max-width:none!important}

.listhead{display:flex;justify-content:space-between;color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.1)}
.listnav{height:calc(100% - 30px);border-bottom:1px solid rgba(255,255,255,.1)}
.listnav ul li{height:100%;display:flex;justify-content:space-between}
.listhead span,.listnav li span{width:100%;padding:8px 0;text-align:center;font-size:13px}
.listhead span{padding-top:0}
.listnav ul li:nth-child(odd){background:rgba(255,255,255,.05)}
.listnav ul li{border:1px solid rgba(255,255,255,.1);border-top:none;border-bottom:none}

/* 数字类 更多模板下载请访问:http://www.bootstrapmb.com  */
.txtnum{height:100%;display:flex;align-items:center}
.txtnum li{width:100%;text-align:center;position:relative}
.txtnum span{color:rgba(255,255,255,.5);}
.txtnum p{font-size:24px;font-style:normal;font-weight:bolder;}
.txtnum li:after{height:100%;width:100%;content:"";left:0;top:-2px;position:absolute;background:-webkit-radial-gradient(50% 50%,farthest-corner,#fffea8 0,transparent,transparent);opacity:.5}
.txtnum li::before{height:120%;width:1px;content:"";right:0;top:-10%;position:absolute;background:linear-gradient(to bottom,transparent,#fffea8,transparent);opacity:.5}
.txtnum li:last-child::before{display:none}

/* 头部大标题  */
.heads{display:flex;justify-content:center;align-items:center;position:relative;padding-bottom:10px}
.headtxt{display:flex;justify-content:center;align-items:center;position:relative;}
.heads .span2{position:absolute;font-size:108px;transform:scale(1,.9);font-weight:bolder;color:#ff911b;z-index:1;color:#fffbf1;text-shadow:0 1px 0 #ff911b,0 2px 0 #ff911b,0 3px 0 #ff911b,0 4px 0 #ff911b,0 5px 0 #ff911b,0 6px 0 transparent,0 7px 0 transparent,0 8px 0 transparent,0 9px 0 transparent,0 10px 10px rgb(0 0 0 / 40%);font-family:"微软雅黑"}
.heads .span1{transform:scale(1,.9);position:relative;z-index:2;font-size:108px;font-family:"微软雅黑";background:linear-gradient(178deg,#fffcf3,#ffee7e);font-weight:bolder;background-size:cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent}
.heads .light{position: absolute; bottom: -20px;display: flex; justify-content: center;  max-width: 1920px;}
.heads .light img{ }

/* .others{position: absolute;width: 1920px; left: calc(50% - 960px); top: 0;} */
.others{position: relative; height: 100%; display: flex; align-items: center; }
.others>span{ position: absolute;}
.others .img1{ top: 5px; width: 200px; right: 50px;}
.others .img2{  width: 180px; left: 130px; top: -10px}
.others .img3{  width: 100px; left: 30px; transform: rotate(45deg); top: 0px;}

/* 图标类 */
.drqk{height:100%;display:flex;align-items:center;flex-wrap:wrap}
.drqk li{width:50%;display:flex;align-items:center}
.icon{display:flex;position:relative;justify-content:center;align-items:center;flex-shrink:0;margin-right:15px;padding:6px;width:60px;height:60px}
.icon::before{position:absolute;content:"";background:url(//repo.bfw.wiki/bfwrepo/images/echarts/map/bg2.png) no-repeat center center;background-size:auto 100%;width:100%;height:100%;left:0;top:0}
.drqk li span{opacity:.5;font-size:12px}
.drqk li i{font-size:12px;opacity:.5}
.drqk li em{background:linear-gradient(0deg,#fffcf2,#ffeebf);font-style:normal;background-size:cover;font-family:"等线";font-weight:bolder;font-size:24px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent}

/* 背景动画类 */
.linebox{ position: absolute; width: 100%;  transform: scale(1); overflow: hidden; padding-top: 40px; height: 100%; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center;}
.linebox>span{ position: absolute;  opacity: .1; width: 100%; height: 100%;}
.linebox>span img{width: 100%; height: 100%; object-fit: contain;}
.linebox .line1{ width: 30%; animation:scales1 60s linear infinite}
.linebox .line2{ width: 40%; opacity: .1; animation:scales2 55s linear infinite}
.linebox .line3{ width: 47%; opacity: .2; animation:scales1 50s linear infinite}
.linebox .line4{ width: 60%; opacity: .2; animation:scales2 45s linear infinite}
.linebox .line5{ width: 20%; opacity: .3; animation:scales1 40s linear infinite}
.linebox .line6{ width: 70%;  animation:scales2 35s linear infinite}
.linebox .line7{ width: 75%; animation:scales1 30s linear infinite}

@keyframes scales1{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}

@keyframes scales2{
0%{transform: rotate(0deg);}
100%{transform: rotate(-360deg);}
}

</style>

</head>

<body class="bg5">
    <div class="mainbox" style="width:100%; height: 100%; ">
        <div class="heads" style="height: 150px ">
            <div class="others">
                <span class="img1"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/img3.png"></span>
            </div>
            <div class="headtxt">
                <span class="span1">梦想起航 再创辉煌</span>
                <span class="span2">梦想起航 再创辉煌</span>
            </div>
            <div class="others">
                <span class="img2"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/img1.png"></span>
                <span class="img3"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/img1.png"></span>
            </div>
        </div>
        <ul style="height:calc(100% - 150px); padding:0 15px; ">
            <li style="width: 27%">
                <div class="box card fadeIn delay06" style="height:200px">
                    <div class="tit">标题文字</div>
                    <div class="boxnav" id="">
                        <ul class="drqk clearfix">
                            <li>
                                <div class="icon"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/icon1.png"></div>
                                <div>
                                    <span>今日总订单</span>
                                    <p><em>1358</em><i>单位</i></p>
                                </div>
                            </li>
                            <li>
                                <div class="icon"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/icon2.png"></div>
                                <div>
                                    <span>今日总收入</span>
                                    <p><em>1983</em><i>万元</i></p>
                                </div>
                            </li>
                            <li>
                                <div class="icon"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/icon3.png"></div>
                                <div>
                                    <span>今日总访客</span>
                                    <p><em>930</em><i>单位</i></p>
                                </div>
                            </li>
                            <li>
                                <div class="icon"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/icon4.png"></div>
                                <div>
                                    <span>今日总收藏</span>
                                    <p><em>930</em><i>单位</i></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box card fadeIn delay06" style="height:calc(33.33% - 90px)">
                    <div class="tit">标题文字</div>
                    <div class="boxnav">
                        <div class="listhead ">
                            <span>名称</span>
                            <span>车牌</span>
                            <span>矿种</span>
                            <span>重量</span>
                        </div>
                        <div class="listnav  scrollDiv">
                            <ul>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                                <li> <span>郁兴石场</span> <span>98739</span> <span>1-4渣</span> <span>12-04</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="box card fadeIn delay06" style="height:calc(33.33% - 70px)">
                    <div class="tit">标题文字</div>
                    <div class=.........完整代码请登录后点击上方下载按钮下载查看

网友评论0