echarts实现销售大数据大屏看板效果代码
代码语言：html
所属分类：其他
代码描述：echarts实现销售大数据大屏看板效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@charset "utf-8";
body{ color:#000; background:#FFF; font:12px/1.6 Verdana, Helvetica, sans-serif; text-align:center; }
*{ margin:0; padding:0; }
input,select{ font-size:12px; vertical-align:middle; }
body div{ text-align:left; }
textarea,input{ word-wrap:break-word; word-break:break-all; padding:0px; }
li{ list-style-type:none; }
img{ border:0 none; }
a{ text-decoration:none; color:#333; }
a:link, a:visited{ color:#333; text-decoration: none; outline: none; }
a:hover{ color:#0E4470; text-decoration: none; }
h1{ font-size:24px; }
h2{ font-size:20px; }
h3{ font-size:18px; }
h4{ font-size:16px; }
h5{ font-size:14px; }
h6{ font-size:12px; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { height: 1%; }
.clearfix { display: block; clear:both; float:none; }
.fleft{ float:left}
.fright{ float:right}
.tleft{ text-align:left}
.tright{ text-align:right}
.tcenter { text-align: center; }
::-moz-selection { background:#70A102; color:#fff; text-shadow: #000 0 1px 0; }
::selection { background: #70A102; color: #fff; text-shadow: #000 0 1px 0; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f17 { font-size: 17px; }
.f18 { font-size: 18px; }
.f19 { font-size: 19px; }
.f20 { font-size: 20px; }
.f21 { font-size: 21px; }
.f22 { font-size: 22px; }
.f23 { font-size: 23px; }
.f24 { font-size: 24px; }
.f25 { font-size: 25px; }
.f26 { font-size: 26px; }
.f27 { font-size: 27px; }
.f28 { font-size: 28px; }
.f29 { font-size: 29px; }
.f30 { font-size: 30px; }
.yh { font-family: Microsoft YaHei; }
.noyh{ font-family:Verdana, Helvetica, sans-serif; }
.noBold { font-weight: normal; }
.bold { font-weight: bold; }
.ofHidden { overflow: hidden; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1px; }
.pl2 { padding-left: 2px; }
.pl3 { padding-left: 3px; }
.pl4 { padding-left: 4px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1px; }
.pt2 { padding-top: 2px; }
.pt3 { padding-top: 3px; }
.pt4 { padding-top: 4px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1px; }
.pb2 { padding-bottom: 2px; }
.pb3 { padding-bottom: 3px; }
.pb4 { padding-bottom: 4px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1px; }
.pr2 { padding-right: 2px; }
.pr3 { padding-right: 3px; }
.pr4 { padding-right: 4px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1px; }
.ml2 { margin-left: 2px; }
.ml3 { margin-left: 3px; }
.ml4 { margin-left: 4px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1px; }
.mr2 { margin-right: 2px; }
.mr3 { margin-right: 3px; }
.mr4 { margin-right: 4px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1px; }
.mt2 { margin-top: 2px; }
.mt3 { margin-top: 3px; }
.mt4 { margin-top: 4px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1px; }
.mb2 { margin-bottom: 2px; }
.mb3 { margin-bottom: 3px; }
.mb4 { margin-bottom: 4px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.pd0{ padding:0; }
.pd1{ padding:1px; }
.pd2{ padding:2px; }
.pd3{ padding:3px; }
.pd4{ padding:4px; }
.pd5{ padding:5px; }
.pd10{ padding:10px; }
.pd15{ padding:15px; }
.pd20{ padding:20px; }
.pd25{ padding:25px; }
.pd30{ padding:30px; }
.border_ccc{ border:1px solid #CCC; }
.box-shadow{ box-shadow: 0 0 15px #cccccc; -webkit-box-shadow: 0 0 15px #cccccc; -moz-box-shadow: 0 0 15px #cccccc; }
.radius4{ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.radius5{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.radius6{ -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; }
.radius7{ -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; }
.radius8{ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
.radius9{ -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; }
.radius10{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
.block { width:1200px; clear:both; margin:0 auto; }
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.text-nowrap{white-space:nowrap}
.text-lowercase{text-transform:lowercase}
.text-uppercase{text-transform:uppercase}
.text-capitalize{text-transform:capitalize}
.text-muted{color:#777}
.c_333{ color:#333}
.c_666{ color:#666}
.c_999{ color:#999}
button,
input,
optgroup,
select,
textarea { margin: 0; font: inherit; color: inherit; }
button { overflow: visible; }
button,
select { text-transform: none; }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled],
html input[disabled] { cursor: default; }
button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }
input { line-height: normal; }
input[type="checkbox"],
input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.btn:hover,
.btn:focus,
.btn.focus { color: #333; text-decoration: none; }
.btn:active,
.btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:focus,
.btn-default.focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; }
.btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; }
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; }
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus { color: #333; background-color: #d4d4d4; border-color: #8c8c8c; }
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default { background-image: none; }
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; }
.btn-default .badge { color: #fff; background-color: #333; }
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.btn-primary:focus,
.btn-primary.focus { color: #fff; background-color: #286090; border-color: #122b40; }
.btn-primary:hover { color: #fff; background-color: #286090; border-color: #204d74; }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary { color: #fff; background-color: #286090; border-color: #204d74; }
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus { color: #fff; background-color: #204d74; border-color: #122b40; }
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary { background-image: none; }
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active { background-color: #337ab7; border-color: #2e6da4; }
.btn-primary .badge { color: #337ab7; background-color: #fff; }
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-success:focus,
.btn-success.focus { color: #fff; background-color: #449d44; border-color: #255625; }
.btn-success:hover { color: #fff; background-color: #449d44; border-color: #398439; }
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; }
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus { color: #fff; background-color: #398439; border-color: #255625; }
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success { background-image: none; }
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c; }
.btn-success .badge { color: #5cb85c; background-color: #fff; }
.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
.btn-info:focus,
.btn-info.focus { color: #fff; background-color: #31b0d5; border-color: #1b6d85; }
.btn-info:hover { color: #fff; background-color: #31b0d5; border-color: #269abc; }
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info { color: #fff; background-color: #31b0d5; border-color: #269abc; }
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus { color: #fff; background-color: #269abc; border-color: #1b6d85; }
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info { background-image: none; }
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #46b8da; }
.btn-info .badge { color: #5bc0de; background-color: #fff; }
.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
.btn-warning:focus,
.btn-warning.focus { color: #fff; background-color: #ec971f; border-color: #985f0d; }
.btn-warning:hover { color: #fff; background-color: #ec971f; border-color: #d58512; }
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning { color: #fff; background-color: #ec971f; border-color: #d58512; }
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus { color: #fff; background-color: #d58512; border-color: #985f0d; }
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning { background-image: none; }
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #eea236; }
.btn-warning .badge { color: #f0ad4e; background-color: #fff; }
.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.btn-danger:focus,
.btn-danger.focus { color: #fff; background-color: #c9302c; border-color: #761c19; }
.btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; }
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; }
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus { color: #fff; background-color: #ac2925; border-color: #761c19; }
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger { background-image: none; }
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d43f3a; }
.btn-danger .badge { color: #d9534f; background-color: #fff; }
.btn-link { font-weight: normal; color: #337ab7; border-radius: 0; }
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; }
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active { border-color: transparent; }
.btn-link:hover,
.btn-link:focus { color: #23527c; text-decoration: underline; background-color: transparent; }
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus { color: #777; text-decoration: none; }
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1);}
10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);}
40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes tada{
0%{-moz-transform:scale(1);}
10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);}
40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
body{
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/bg.jpg") no-repeat center top #0b1530;
background-size:100% auto;
width:1920px;
}
.header{}
.header .title{
font-size: 40px;
text-align: center;
color: #ffffff;
height: 90px;
line-height: 90px;
}
.main{
padding: 0 21px;
margin-top: 15px;
}
.main .box.bg{
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/box-bg.png") no-repeat center top;
background-size:100% 100%;
}
.main .box.bg-title{
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/box-bg-title.png") no-repeat center top;
background-size:100% 100%;
}
.main .box.center-top-bg{
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/box-bg-center-top.png") no-repeat center top;
background-size:100% 100%;
height: 624px;
}
.main .box.center-bottom-bg{
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/box-bg-center-bottom.jpg") no-repeat center top;
background-size:100% 100%;
}
.main .box.right-bottom-bg{
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/box-bg-right-bottom.png") no-repeat center top;
background-size:100% 100%;
}
.main .box .title{
font-size: 24px;
text-align: center;
color: #fefeff;
height: 49px;
line-height: 49px;
}
.main .main-left{
width: 499px;
}
.main .main-center{
width: 840px;
margin-left: 20px;
margin-right: 20px;
}
.main .main-right{
width: 499px;
}
/* 投诉排名 */
.main .main-left .ranking{}
.main .main-left .ranking .title2{
color: #ffffff;
font-size: 29px;
padding: 25px 0 0 15px;
}
.main .main-left .ranking .content{
padding: 30px 20px;
}
.main .main-left .ranking .content ul li{
height: 22px;
line-height: 22px;
margin-top: 35px;
}
.main .main-left .ranking .content ul li .label{
color: #ffffff;
font-size: 20px;
}
.main .main-left .ranking .content ul li .percentage{
color: #0de0e5;
font-size: 16px;
}
.main .main-center{
}
.main .main-center .center-bottom{
margin-top: 11px;
}
.main .main-center .center-bottom .title2{
height: 50px;
line-height: 50px;
color: #91a1e0;
font-size: 22px;
padding-left: 15px;
}
.main .main-center .center-bottom .content thead{height: 38px; line-height: 38px; color: #ffffff; background-color: #1759c7; font-size: 18px;text-align: center; font-weight: normal;}
.main .main-center .center-bottom .content tr td{
height: 38px;
line-height: 38px;
color: #ffffff;
font-size: 18px;
text-align: center;
font-weight: normal;
}
.main .main-center .center-bottom .content tr:nth-of-type(odd){ background:#142960;} /*奇数行*/
.main .main-center .center-bottom .content tr:nth-of-type(even){ background:#163c87;} /*偶数行*/
/* 3D旋转缺素材，暂搁置，有兴趣的可以在html页面中放开 */
.ball-box{
width: 377px;
height: 395px;
margin: 0 auto;
padding-top: 64px;
/* width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px; */
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-perspective: 3000px;
-o-perspective: 3000px;
perspective: 3000px;
}
@-webkit-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(0) rotateY(0deg);
-moz-transform: rotateZ(0) rotateY(0deg);
-ms-transform: rotateZ(0) rotateY(0deg);
-o-transform: rotateZ(0) rotateY(0deg);
transform: rotateZ(0) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(0) rotateY(360deg);
-moz-transform: rotateZ(0) rotateY(360deg);
-ms-transform: rotateZ(0) rotateY(360deg);
-o-transform: rotateZ(0) rotateY(360deg);
transform: rotateZ(0) rotateY(360deg);
}
}
@-moz-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(0) rotateY(0deg);
-moz-transform: rotateZ(0) rotateY(0deg);
-ms-transform: rotateZ(0) rotateY(0deg);
-o-transform: rotateZ(0) rotateY(0deg);
transform: rotateZ(0) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(0) rotateY(360deg);
-moz-transform: rotateZ(0) rotateY(360deg);
-ms-transform: rotateZ(0) rotateY(360deg);
-o-transform: rotateZ(0) rotateY(360deg);
transform: rotateZ(0) rotateY(360deg);
}
}
@-ms-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(0) rotateY(0deg);
-moz-transform: rotateZ(0) rotateY(0deg);
-ms-transform: rotateZ(0) rotateY(0deg);
-o-transform: rotateZ(0) rotateY(0deg);
transform: rotateZ(0) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(0) rotateY(360deg);
-moz-transform: rotateZ(0) rotateY(360deg);
-ms-transform: rotateZ(0) rotateY(360deg);
-o-transform: rotateZ(0) rotateY(360deg);
transform: rotateZ(0) rotateY(360deg);
}
}
@-o-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(0) rotateY(0deg);
-moz-transform: rotateZ(0) rotateY(0deg);
-ms-transform: rotateZ(0) rotateY(0deg);
-o-transform: rotateZ(0) rotateY(0deg);
transform: rotateZ(0) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(0) rotateY(360deg);
-moz-transform: rotateZ(0) rotateY(360deg);
-ms-transform: rotateZ(0) rotateY(360deg);
-o-transform: rotateZ(0) rotateY(360deg);
transform: rotateZ(0) rotateY(360deg);
}
}
@keyframes rotate3d {
0%{
-webkit-transform: rotateZ(0) rotateY(0deg);
-moz-transform: rotateZ(0) rotateY(0deg);
-ms-transform: rotateZ(0) rotateY(0deg);
-o-transform: rotateZ(0) rotateY(0deg);
transform: rotateZ(0) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(0) rotateY(360deg);
-moz-transform: rotateZ(0) rotateY(360deg);
-ms-transform: rotateZ(0) rotateY(360deg);
-o-transform: rotateZ(0) rotateY(360deg);
transform: rotateZ(0) rotateY(360deg);
}
}
.ball{
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate3d 30s linear infinite;
-moz-animation: rotate3d 30s linear infinite;
-ms-animation: rotate3d 30s linear infinite;
-o-animation: rotate3d 30s linear infinite;
animation: rotate3d 30s linear infinite;
}
/* .ball:after{
display: block;
content: '';
width: 1px;
height: 500px;
background-color: #ff0;
position: absolute;
top: -100px;
left: 150px;
} */
.ball > div{
position: absolute;
width: 100%;
height: 100%;
background: url("//repo.bfw.wiki/bfwrepo/images/bigdata/5/earth.png") no-repeat;
/* border: 1px #ffffff solid;
position: absolute;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; */
}
.ball .line1{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.ball .line2{
-webkit-transform: rotateY(36deg);
-moz-transform: rotateY(36deg);
-ms-transform: rotateY(36deg);
-o-transform: rotateY(36deg);
transform: rotateY(36deg);
}
.ball .line3{
-webkit-transform: rotateY(72deg);
-moz-transform: rotateY(72deg);
-ms-transform: rotateY(72deg);
-o-transform: rotateY(72deg);
transform: rotateY(72deg);
}
.ball .line4{
-webkit-transform: rotateY(108deg);
-moz-transform: rotateY(108deg);
-ms-transform: rotateY(108deg);
-o-transform: rotateY(108deg);
transform: rotateY(108deg);
}
.ball .line1{
-webkit-transform: rotateY(144deg);
-moz-transform: rotateY(144deg);
-ms-transform: rotateY(144deg);
-o-transform: rotateY(144deg);
transform: rotateY(144deg);
}
</style>
</head>
<body>
<div class="header">
<div class="title">
<!-- 销售大数据分析 -->
</div>
</div>
<!-- <div class="menu"> -->
<!-- 预留菜单位置 -->
<!-- </div> -->
<div class="main clearfix">
<div class="main-left fleft">
<div class="box bg-title">
<div class="title text-center">订单品类占比</div>
<div class="content" style="height: 415px;">
<div id="chart1" style="width: 100%; height: 400px;"></div>
</div>
</div>
<div class="box bg ranking mt30">
<div class="title2">投诉排名</div>
<div class="content" style="height: 334px; overflow: hidden;">
<div id="chart2" style="width: 100%; height: 430px;"></div>
</div>
</div>
</div>
<div class="main-center fleft">
<div class="box center-top-bg">
<div id="chart3" style="width: 100%; height: 620px;"></div>
<!-- <div class="ball-box">
<div class="ball">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
</div> -->
</div>
<div class="box center-bottom center-bottom-bg">
<div class="title2 text-left">商家订单</div>
<div class="content">
<table width="100%">
<thead>
<th>排名</th>
<th>商家名称</th>
<th>商品种类</th>
<th>消费占比</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>阿斯丹丹</td>
<td>服装</td>
<td>20%</td>
</tr>
<tr>
<td>2</td>
<td>阿斯丹丹</td>
<td>化妆品</td>
<td>10%</td>
</tr>
<tr>
<td>3</td>
<td>阿斯丹丹</td>
<td>小吃</td>
<td>10%</td>
</tr>
<tr>
<td>4</td>
<td>阿斯丹丹</td>
<td>生活用品</td>
<td>10%</td>
</tr>
<tr>
<td>5</td>
<td>阿斯丹丹</td>
<td>美妆用品</td>
<td>15%</td>
</tr>
<tr>
<td>6</td>
<td>孩子王</td>
<td>儿童用品</td>
<td>19%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="main-right fright">
<div class="box bg-title">
<div class="title text-center">投诉热门关键</div>
<div class="content" style="height: 360px; overflow: hidden; padding:0 13px;">
<div id="chart4" style="width: 100%; height: 340px;"></div>
</div>
</div>
<div class="box right-bottom-bg mt30">
<div class="content" style="height: 520px;overflow: hidden; overflow: hidden; padding:0 13px;">
<div id="chart5" style="width: 100%; height: 515px;"></div>
</div>
</div>
</div>
</div>
<!-- JS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.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/world.js"></script>
<script>
function rsz() {
var zoom = $(window).width() / 1920;
document.body.style.zoom = zoom;
}
$(function () {
rsz();
leftTopCharts();
leftBottomCharts();
centerTopCharts();
rightTopCharts();
rightBottomCharts();
// itv();
// setInterval("itv()", 1000);
});
$(window).resize(function () {
rsz();
});
/**
* 左上角第一个图表：订单品类占比（备选）
*/
function leftTopChartsBak() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart1'));
var colorList = [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
},
{
offset: 1,
color: '#FDB36ac2' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
},
{
offset: 1,
color: '#FECE4391' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
]
var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']
function getRich() {
let result = {}
colorLine.forEach((v, i) => {
result[`hr${i}`] = {
backgroundColor: colorLine[i],
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12]
}
result[`a${i}`] = {
padding: [8, -60, -20, -20],
color: colorLine[i],
fontSize: 12
}
})
return result
}
let data = [{
'name': '北京',
'value': 25
}, {
'name': '上海',
'value': 20
}, {
'name': '广州',
'value': 18
}, {
'name': '深圳',
'value': 15
}, {
'name': '未知',
'value': 13
}, {
'name': '海外',
'value': 9
}].sort((a, b) => {
return b.value - a.value
})
data.forEach((v, i) => {
v.labelLine = {
lineStyle: {
width: 1,
color: colorLine[i]
}
}
})
option = {
// 图例
legend: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
colo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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