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="boxnav" id="echarts9">
</div>
</div>
<div class="box card fadeIn delay06" style="height:calc(33.33% - 80px)">
<div class="tit">标题文字</div>
<div class="boxnav" id="echarts10">
</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/map/line1.png"></span>
<span class="line2"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/line2.png"></span>
<span class="line3"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/line3.png"></span>
<span class="line4"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/line4.png"></span>
<span class="line5"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/line5.png"></span>
<span class="line6"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/line6.png"></span>
<span class="line7"><img src="//repo.bfw.wiki/bfwrepo/images/echarts/map/line7.png"></span>
</div>
<div class="boxnav" id="map">
</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" id="echarts8">
</div>
</div>
<div class="box card fadeIn delay06" style="height:calc(33.33% - 10px)">
<div class="tit">标题文字</div>
<div class="boxnav" id="echarts12">
</div>
</div>
<div class="box card fadeIn delay06" style="height:calc(33.33% - 10px)">
<div class="tit">标题文字</div>
<div class="boxnav" id="echarts2">
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echart-china.js"></script>
<script type="text/javascript" >
var fontFamily = "苹方" //图表的字体
var colors = ["#fbe0b6", "#ffc27f", "#f89e5d", "#e77d4a", "#d55d39", "#c9472e"] //主题色
var fontsize = 13 //字号
//渐变色
var jbcolor = [
["#fff1cc", "#ffd797"],
["#c9f9ff", "#37daed"],
["#e8ffe1", "#73ff94"],
['#f7e9ff', '#de9fff'],
]
if ($(window).width() < 1800) {
var fontsize = 12 //小屏下的字号
}
//X 轴样式
var xAxis = {
type: 'category',
// boundaryGap: false,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontFamily: fontFamily,
fontSize: fontsize,
color: "rgba(255, 255, 255,.75)",
},
},
axisLine: {
show: false
},
data: []
}
//Y轴样式 更多模板下载请访问：http://www.bootstrapmb.com
var yAxis = {
type: 'value',
axisTick: {
show: false
},
splitNumber: 2,
axisLabel: {
textStyle: {
fontFamily: fontFamily,
fontSize: fontsize,
color: "rgba(255,255,255,.85)",
},
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.05)'
}
}
}
//图表的边距
var grids = {
left: '2',
top: 30,
right: '15',
bottom: '10',
containLabel: true
}
//图表说明
var legends = {
x: 'center',
y: '0',
// icon: 'circle',
itemGap: 8,
textStyle: {
fontFamily: fontFamily,
color: 'rgba(255,255,255,.5)'
},
itemWidth: 10,
itemHeight: 10,
}
// 以上为公共样式变量
// 折线图
option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 255,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,0.5)',
}, {
offset: 1,
color: 'rgba(0, 255, 255,0)'
}],
global: false
}
},
},
},
// legend: legends,
grid: grids,
xAxis: xAxis,
yAxis: yAxis,
series: [{
name: '用电',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
showSymbol: false,
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: jbcolor[0][0]
},
{
offset: 1,
color: jbcolor[0][1]
},
]
),
width: 3,
shadowBlur: 10,
shadowColor: 'rgba(149, 49, 49, 0.7)'
}
},
itemStyle: {
normal: {
color: '#ff7e00',
borderColor: '#ffedd8',
borderWidth: 3
}
},
data: [60, 20, 50, 10, 70, 40, 130, 40, 70, 40, 130, 40],
}]
};
//饼图
option2 = {
color: colors,
tooltip: {
trigger: 'item',
// formatter: "{b} : {c} ({d}%)"
},
legend: legends,
series: [{
type: 'pie',
radius: ["20%", "60%"],
center: ["50%", "50%"],
roseType: 'area',
// roseType: 'radius',
data: [{
value: 150,
name: '综合服务'
},
{
value: 90,
name: '简事快办'
}
],
label: {
normal: {
formatter: ['{b|{b}}', '{c|{d}%}'].join('\n'),
rich: {
c: {
color: 'rgba(255,255,255,.85)',
fontSize: 15,
fontFamily: "等线",
},
b: {
color: 'rgba(255,255,255,.85)',
fontSize: 12,
fontFamily: fontFamily,
height: 20
},
},
}
},
itemStyle: {
normal: {
shadowBlur: 30,
borderRadius: 3,
shadowColor: 'rgba(149, 49, 49, 0.4)'
}
},
}]
};
//横柱图
option3 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter:'{b} ,
},
grid: grids,
xAxis:xAxis,
yAxis: yAxis,
series: [{
name: '异形柱图',
type: 'pictorialBar',
barCategoryGap: '-20%',
symbol: 'path://M150 50 L130 130 L170 130 Z',
itemStyle: {
normal: {
color: jbcolor[0][1],
opacity: .8
}
},
data: [30, 60, 120, 59, 109, 180, 100, 109, 60, 30],
z: 10
}]
};
// 仪表盘
var demoData = [{
name: '功率输出',
unit: '%',
value: 68,
}, ];
option4 = {
series: (function () {
var result = [];
demoData.forEach(function (item) {
result.push({
name: item.name,
type: 'gauge',
radius: '80%',
startAngle: 225,
endAngle: -45,
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
width: 50,
color: [
[
item.value / 100, new echarts.graphic.LinearGradient(
0, 1, 1, 0, [{
offset: 0,
color: 'rgba(255, 36, 74,0)',
},
{
offset: 1,
color: jbcolor[0][1],
}
]
)
],
[
1, 'rgba(255,255,255,.0)'
]
]
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
pointer: {
show: true,
length: '50%'
},
detail: {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0