echarts实现红色大屏数据可视化看板图表效果代码-html代码-BFW代码库

代码语言：html
所属分类：图表
代码描述：echarts实现红色大屏数据可视化看板图表效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
<style>
@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  ;background-size:100% 100%}
.bg2{background:#8e0f16 ;background-size:100% 100%}
.bg3{background:#8c0000  ;background-size:100% 100%}
.bg4{background:#b42209 ;background-size:100% 100%}
.bg5{background:#050101 ;background-size:100% 100%}
.bg6{background:#af0009 ;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/mu/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{height:26vh;margin-bottom:10px;border-radius:5px;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);position:relative;border:none}
.card:after{position:absolute;left:0;top:0;z-index:1;pointer-events:none;content:"";width:100%;height:100%;background:linear-gradient(315deg,rgba(255,47,47,.5),transparent,transparent)} */


/* 边框&背景 */
.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/mu/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/mu/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}

/* 数字类 */
.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/mu/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="bg6">
    
    <div class="mainbox" style="width:100%; height: 100%; ">
        <div class="heads" style="height: 150px ">

            <!-- <div class="light"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line.png"></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/mu/img1.png"></span>
                <span class="img3"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/img1.png"></span>
            </div>
        </div>
        <ul style="height:calc(100% - 150px); padding:0 15px; ">
            <li style="width: 27%">
                <div class="box card fadeIn delay1" style="height:100px">
                    <!-- <div class="tit">数字模块1</div> -->
                    <div class="boxnav" style="height: 100%">
                        <ul class="txtnum clearfix">
                            <li>
                                <div>
                                    <p>1258</p>
                                    <span>今日总订单</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>1283</p>
                                    <span>今日总收入</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>920</p>
                                    <span>今日总访客</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>17</p>
                                    <span>个数自动</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>


                <div class="box card fadeIn delay06" style="height:calc(33.33% - 40px)">
                    <div class="tit">标题文字</div>
                    <div class="boxnav" id="echarts9">
                    </div>
                </div>
                <div class="box card fadeIn delay06" style="height:calc(33.33% - 50px)">
                    <div class="tit">标题文字</div>
                    <div class="boxnav" id="echarts10">
                    </div>
                </div>

                <div class="box card fadeIn delay06" style="height:calc(33.33% - 50px)">
                    <div class="tit">标题文字</div>
                    <div class="boxnav" id="echarts8">
                    </div>
                </div>



            </li>
            <li style="width: 46%">
                <div class="box card fadeIn delay06" style="height:calc(75% - 10px)">
                    <div class="tit">标题文字</div>
                    <div class="linebox" style=" transform: scale(.9); padding: 0; top: 10px;">
                        <span class="line1"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line1.png"></span>
                        <span class="line2"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line2.png"></span>
                        <span class="line3"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line3.png"></span>
                        <span class="line4"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line4.png"></span>
                        <span class="line5"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line5.png"></span>
                        <span class="line6"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line6.png"></span>
                        <span class="line7"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/mu/line7.png"></span>
                    </div>
                    <div class="boxnav" id="map2">
                    </div>
                </div>

                <div class="box card fadeIn delay06" style="height:calc(25% - 10px)">
                    <div class="tit">标题文字</div>
                    <div class="boxnav" id="echarts1">
                    </div>
                </div>

            </li>
            <li style="width: 27%">

                <div class="box card fadeIn delay06" style="height:calc(33.33% - 10px)">
                    <div class="tit">标题文字</div>
                    <div class="boxnav">
                        <div class="listhead ">
                            <span>名称</span>
                            <span>车牌</span>
                            <span>矿种</span>
                            <span>重量</span>

                        </div>
                        <div .........完整代码请登录后点击上方下载按钮下载查看