echart实现物流快递大数据大屏看板效果代码
代码语言:html
所属分类:图表
代码描述:使用echart实现的物流快递大数据大屏看板效果代码,包含派件数、收件书、物流公司分类、收入、全国统计、支持分类条件查询。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 1920) { docEl.style.fontSize = '100px'; //1rem = 100px } else { docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> <style> /** 初始化 **/ html, body { width: 100%; height: 100%; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, button, textarea, p, blockquote, th, td, form, pre { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #333; } body { -webkit-font-feature-settings: 'kern' 1; -moz-font-feature-settings: 'kern' 1; -o-font-feature-settings: 'kern' 1; text-rendering: geometricPrecision; font-family: "Microsoft YaHei"; } a:active, a:hover { outline: 0 } img { display: inline-block; border: none; vertical-align: middle; } li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } h1, h2, h3 { font-size: 14px; font-weight: 400; } h4, h5, h6 { font-size: 100%; font-weight: 400; } button, input, select, textarea { font-size: 100%; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } /** 滚动条 **/ ::-webkit-scrollbar { width: 5px; height: 10px; } ::-webkit-scrollbar-button:vertical { display: none; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: rgba(14, 148, 234, 0.2); } ::-webkit-scrollbar-thumb { border-radius: 0; background-color: rgba(0, 0, 0, .3); } ::-webkit-scrollbar-thumb:vertical:hover { background-color: rgba(0, 0, 0, .35); } ::-webkit-scrollbar-thumb:vertical:active { background-color: rgba(0, 0, 0, .38); } /*下拉框*/ .select { width: 1.6rem; height: 0.4rem; position: relative; font-size: 0.18rem; color: #cdddf7; outline: none; } .select-div { box-sizing: border-box; width: 1.6rem; height: 0.4rem; line-height: 0.4rem; border: 1px solid #0E94EA; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/arrow.png) 95% center no-repeat; padding-left: 10px; cursor: default; position: absolute; top: 0; left: 0; color: #cdddf7; } .select-ul { position: absolute; width: 1.6rem; top: 0.5rem; left: 0; z-index: 10; display: none; } .select-ul.company { height: 1.2rem; overflow-y: auto; } .select-ul>li { height: 0.4rem; line-height: 0.4rem; padding-left: 10px; box-sizing: border-box; background-color: rgba(14, 148, 234, 0.2); cursor: default; color: #cdddf7; } .select-ul>li.active, .select-ul>li:hover { color: white; background: #0e94eb; } .select-ul>li { width: 1.6rem; } .data-box { width: 4.9rem; position: absolute; margin: auto; top: 0.42rem; bottom: 0; left: 0; right: 0; } .chart-box { position: absolute; top: 0.42rem; bottom: 0; width: 90%; margin: auto; left: 0; right: 0; height: auto; } .container-flex { width: 100%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/index_bg.png) left top no-repeat; background-size: 100% 100%; display: flex; flex-flow: row nowrap; justify-content: center; outline: none; } .box-left { width: 28%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/line_img.png) top right repeat-y; } .left-top { width: 100%; height: 20.4%; position: relative; } .left-top>.current-num { width: 4.9rem; height: 1.8rem; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/border_bg01.png) top left no-repeat; background-size: 100% 100%; } .current-num>div { width: 100%; height: 0.8rem; line-height: 0.8rem; text-align: center; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/title_bg01.png) center center no-repeat; font-size: 0.2rem; color: #0e94ea; background-size: 1.8rem 0.25rem; font-weight: 900; } .current-num>p { font-size: 0.46rem; text-align: center; color: white; } .left-center { width: 100%; height: 37%; position: relative; } .pie-chart>div { float: left; width: 50%; height: 100%; position: relative; } .pie-data { height: 2.25rem; position: absolute; margin: auto; top: 0; left: 0; width: 100%; bottom: 0; display: flex; align-items: center; flex-flow: row wrap; overflow-y: auto; padding-right: 5px; } .pie-data p { width: 100%; height: 0.45rem; line-height: 0.45rem; font-size: 0.2rem; color: #cdddf7; display: flex; flex-flow: row nowrap; justify-content: space-around; cursor: default; } .pie-data p>span { width: 0; flex-grow: 1; margin: 0 5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pie-data p>.pie-number { flex-grow: 2; } .legend { display: inline-block; width: 0.2rem; height: 0.16rem; line-height: 0.2rem; border-radius: 2px; background: white; } .left-bottom { width: 100%; height: 42.6%; position: relative; } .filter-con { width: 100%; height: 0.4rem; position: absolute; float: left; top: 10px; left: 0; display: none; flex-flow: row nowrap; justify-content: space-between; /* visibility: hidden;*/ z-index: 999; } .pop-filter { width: 5.2rem; top: 1.1rem; left: 0.5rem; } .pop-filters { width: 5.2rem; top: 1.1rem; left: 0.5rem; } .gd-map { width: 100%; height: 90%; } .box-center { width: 44%; height: 100%; /* background: green;*/ } .center-top { width: 100%; height: 8.8%; position: relative; top: 0; left: 0; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/title_border.png) bottom center no-repeat; display: flex; justify-content: center; align-items: center; } .center-top>h1 { color: #cdddf7; font-size: 0.45rem; font-weight: 900; letter-spacing: 5px; } .center-center { width: 100%; height: 15.3%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .weather-box { width: 4.1rem; height: 1.1rem; border: 1px solid #0E94EA; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; } .weather-box>.data { width: 2.19rem; height: 0.65rem; border-right: 2px solid #cdddf7; } .data>p { font-size: 0.16rem; margin: 0 5px; color: #cdddf7; text-align: center; margin: 0; } .data>p>span { margin: 0 5px; } .data>p.time { font-size: 0.42rem; height: 0.42rem; line-height: 0.42rem; } .weather-box>.weather { width: 1.8rem; height: 0.65rem; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; margin-left: 10px; } .weather>img { height: 100%; } .weather>div { width: 0.8rem; height: 100%; } .weather>div>p { font-size: 0.12rem; color: #cdddf7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 0.24rem; line-height: 0.24rem; } .weather>div>p.active { color: white; font-size: 0.16rem; } .select-box { width: 3.4rem; height: 1.1rem; box-sizing: border-box; position: relative; } .select-pop { width: 1.6rem; } .select-box>ul, .select-pop>ul { width: 1.6rem; height: 0.4rem; font-size: 0.18rem; overflow: hidden; border: 1px solid #0E94EA; position: absolute; top: 0; left: 0; } .select-box>ul>li, .select-pop>ul>li { width: 0.8rem; height: 0.4rem; line-height: 0.4rem; text-align: center; float: left; color: #cdddf7; cursor: pointer; } .select-box>ul>li.active, .select-pop>ul>li.active { background: #0e94eb; color: white; } .select-box>div { width: 100%; height: 0.4rem; position: absolute; bottom: 0; left: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; } .center-center>img { width: 0.13rem; height: 1.1rem; margin: 0 0.2rem; } .center-bottom { width: 100%; height: 75.9%; position: relative; } .center-bottom>.city-data { width: 8.05rem; height: 100%; margin: auto; position: absolute; } .city-box { width: 1.8rem; /* height: 1.9rem;*/ border: 1px solid #0e94ea; position: absolute; top: 0; left: 0; } .city-box>p { height: 0.4rem; line-height: 0.4rem; text-align: center; border-bottom: 1px solid #0e94ea; font-size: 0.18rem; color: #cdddf7; box-sizing: border-box; } .city-box>p>span { color: #d09d26; } .city-btn { width: 100%; /* height: 0.5rem;*/ display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; overflow: hidden; } .city-btn>li, .city-div>li { font-size: 0.14rem; height: 0.2rem; line-height: 0.2rem; float: left; color: white; margin: 0.02rem 0; padding: 0 0.03rem; cursor: pointer; } .city-btn>li.active, .city-btn>li:hover, .city-div>li.active, .city-div>li:hover { background: #0e94ea; } .city-div { width: 100%; height: 1rem; display: flex; flex-flow: row wrap; /* align-items: center;*/ justify-content: flex-start; overflow-y: auto; } .city-div>li { padding: 0 0.05rem; text-align: center; } .ranking-box { width: 2.5rem; border: 1px solid #0e94ea; position: absolute; left: 0; bottom: 20px; background-color: rgba(14, 148, 235, 0.102); } .ranking-box>li { width: 100%; height: 0.3rem; line-height: 0.3rem; display: flex; flex-flow: row nowrap; justify-content: space-around; font-size: 0.18rem; color: rgba(255, 255, 255, .7); } .ranking-box>li>span { width: 0; flex-grow: 1; text-align: center; } .ranking-box>li>p { width: 0; flex-grow: 2; color: rgba(255, 255, 255, .7); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ranking-box>li:nth-child(2n+1) { background: rgba(14, 148, 235, 0.102); } .ranking-box>li:first-child { height: 0.4rem; line-height: 0.4rem; font-size: 0.2rem; background: rgba(14, 148, 235, 0.8); } .ranking-box>li:first-child>p { color: white; } .box-right { width: 28%; height: 100%; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/line_img.png) top left repeat-y; } .right-top { width: 100%; height: 41%; box-sizing: border-box; padding-top: 0.2rem; position: relative; } .right-top>.data-box, .right-top>.chart-box { top: 1rem; } .table1 { font-size: 0.16rem; border: 1px solid #0e94ea; border-top: none; border-right: none; margin: auto; } .table1 tr { border-top: 1px solid #0e94ea; background: rgba(14, 148, 234, 0.1); } .table1 tr.bg-color { background: rgba(14, 148, 234, 0.2); } .table1 tr td { border-right: 1px solid #0e94ea; height: 0.4rem; line-height: 0.4rem; color: #cdddf7; text-align: center; } .table1 tr td.data-table { color: #fff; } .table1 tr td:nth-child(2n+1) { width: 1rem; } .table1 tr td:nth-child(2n) { width: 1.4rem; } .table2 { font-size: 0.16rem; border: 1px solid #0e94ea; border-top: none; border-right: none; margin: auto; } .table2 tr { border-top: 1px solid #0e94ea; background: rgba(14, 148, 234, 0.1); } .table2 tr.bg-color { background: rgba(14, 148, 234, 0.2); } .table2 tr td { border-right: 1px solid #0e94ea; height: 0.6rem; line-height: 0.6rem; color: #cdddf7; text-align: center; } .table2tr td.data-table { color: #fff; } .table2 tr td:nth-child(2n+1) { width: 1.8rem; } .table2 tr td:nth-child(2n) { width: 2.5rem; } .right-center { width: 100%; height: 29%; position: relative; } .time-box { width: 3.9rem; height: 0.4rem; position: absolute; top: 5px; right: 0; overflow: hidden; z-index: 10; display: none; } .time-div { float: left; width: 1.8rem; height: 0.4rem; position: relative; } .time-div.end { float: right; } .time-div>img { width: 0.2rem; height: 0.2rem; margin: auto; position: absolute; top: 0; bottom: 0; right: 0.1rem; } .time-input { width: 1.8rem; height: 0.4rem; box-sizing: border-box; border: 1px solid #0E94EA; font-size: 0.16rem; background: rgba(14, 148, 234, 0.2); position: absolute; top: 0; left: 0; color: #cdddf7; padding-left: 10px; } .data-box>.data-number { width: 4.9rem; height: 2.3rem; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/bg_img03.png) top left no-repeat; background-size: 100% 100%; color: #cdddf7; font-size: 0.4rem; line-height: 2.3rem; text-align: center; } .right-bottom { width: 100%; height: 30%; position: relative; } .data-box>.settings-box { box-sizing: border-box; width: 4.9rem; height: 2.38rem; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(14, 148, 234, 0.2); border: 1px solid #0E94EA; color: white; font-size: 0.18rem; overflow: hidden; } .settings-box>p { color: #cdddf7; margin-bottom: 0.46rem; padding-left: 0.4rem; height: 0.22rem; line-height: 0.22rem; } .settings-box>p:first-child { padding-top: 0.46rem; } .settings-box>div { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; padding-top: 0.2rem; } .settings-box>div>p { width: 2.9rem; font-size: 0.14rem; padding: 0; color: #cdddf7; } .settings-box>p>img { width: 0.2rem; height: 0.22rem; margin-right: 5px; } .settings-box>p>span, .settings-box>div>p>span { color: white; margin: 0 0.15rem; } .settings-box>div>img { height: 0.2rem; margin: 0 0.05rem; } .config { text-decoration: underline; cursor: pointer; } .settings-box>form label { color: #cdddf7; margin-right: 10px; } .four-f { letter-spacing: 0.045rem; } .settings-box>form input { width: 1.2rem; height: 0.4rem; border: 1px solid #0E94EA; background: rgba(14, 148, 235, 0.2); color: white; padding-left: 0.1rem; } .settings-box>form>div { width: 94%; margin: auto; } .set-ter { height: 0.64rem; line-height: 0.64rem; } .set-time { height: 0.4rem; width: 3.56rem; padding-left: 1.2rem; } .set-time>.time-div, .set-time>.time-div>input { width: 1.6rem; } .end-1 { margin-left: 0.1rem; } .set-peo { height: 0.70rem; line-height: 0.7rem; } .settings-box>.set-btn { height: 0.64rem; line-height: 0.64rem; text-align: center; padding-top: 0; } .set-btn>button { width: 0.9rem; height: 0.4rem; border: 1px solid #0E94EA; background: rgba(14, 148, 235, 0.2); color: white; margin: 0 5px; cursor: pointer; } .settings-box>.close-icon { display: block; width: 0.16rem; height: 0.16rem; position: absolute; top: 5px; right: 5px; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/close_icon.png) top left no-repeat; background-size: 100% 100%; cursor: pointer; } .settings-box>.kf { padding-top: 0.8rem; line-height: 0.3rem; } .title-box { width: 4.9rem; height: 0.42rem; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/box_title.png) top left no-repeat; background-size: 100% 100%; margin: auto; display: flex; flex-flow: row nowrap; align-items: center; position: relative; } .title-box>h6, .title-box>p { font-size: 0.2rem; color: white; height: 0.42rem; line-height: 0.42rem; margin-left: 0.4rem; } .title-box>p>span { cursor: pointer; color: rgba(255, 255, 255, .6); } .title-box>p>span.active { color: rgba(255, 255, 255, 1); } .line-img { width: 1px; height: 0.2rem; margin: 0 10px; } .title-box>.line-img { position: absolute; right: 1.3rem; } .title-box>button { font-size: 0.18rem; border: none; background: transparent; color: #cdddf7; height: 0.42rem; position: absolute; right: 0.6rem; display: flex; flex-flow: row nowrap; align-items: center; cursor: pointer; } .title-box>button:hover { color: white; } .title-box>button>img { width: 0.2rem; height: 0.2rem; margin-right: 5px; } .unit { font-size: 0.16rem; height: 0.4rem; color: #cdddf7; text-align: right; padding-right: 0.3rem; line-height: 0.4rem; } .container { width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: absolute; top: 0; left: 0; display: flex; visibility: hidden; justify-content: center; align-items: center; } .pop-up { width: 70%; height: 80%; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/popUP_bg.png) top left no-repeat; background-size: 100% 100%; position: absolute; padding: 0.2rem 0.5rem; visibility: hidden; } .pop-up .title { width: 100%; height: 0.9rem; line-height: 0.9rem; font-size: 0.3rem; color: white; padding-left: 0.2rem; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/title_line.png) center left no-repeat; } .pop-up .pie-chart { width: 76%; height: 80%; } .pop-up .pie-data { width: 80%; } .pop-chart { width: 80%; top: 1.5rem; left: 2.3rem; bottom: 0.5rem; } .pop-charts { width: 60%; top: 0.45rem; left: 2.3rem; bottom: 0.5rem; } .pop-up .pie-data p { height: 0.6rem; line-height: 0.6rem; font-size: 0.28rem; } .pop-up .pie-data .legend { width: 0.38rem; height: 0.28rem; vertical-align: middle; } .close-pop { display: inline-block; position: absolute; top: 0.3rem; right: 0.5rem; width: 13px; height: 0.9rem; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/close.png) center left no-repeat; background-size: 13px 13px; cursor: pointer; z-index: 99; } .pop-data { width: 2rem; position: absolute; top: 2.25rem; bottom: 0.5rem; left: 0.5rem; } .cont-div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 0.2rem 0.5rem; visibility: hidden; } .pop-data-box { width: 60%; height: 50%; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/bg_img04.png) top left no-repeat; background-size: 100% 100%; position: absolute; margin: 0 auto; bottom: 20%; left: 0; right: 0; display: flex; justify-content: center; align-items: center; color: #cdddf7; font-size: 0.88rem; } .pop-data-box p { color: #cdddf7; } .btn-class { height: 0.4rem; padding: 0 15px; border: 1px solid #0E94EA; font-size: 0.18rem; background: transparent; color: #cdddf7; position: absolute; top: 1.7rem; left: 0.5rem; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; cursor: pointer; } .btn-class>img { width: 0.18rem; height: 0.18rem; } .enlarge-btn { width: 0.36rem; height: 0.36rem; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/menu_btn.png) top left no-repeat; background-size: 100% 100%; float: left; border: none; cursor: pointer; } .enlarge-btn:hover, .enlarge-btn.active { background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/menu_on.png) top left no-repeat; background-size: 100% 100%; } .enlarge-box { height: 0.36rem; position: absolute; bottom: 20px; left: 3rem; overflow: hidden; } .modal-btn { float: left; display: none; } .modal-btn>li { float: left; width: 0.36rem; height: 0.36rem; line-height: 0.36rem; box-sizing: border-box; border: 1px solid #0E94EA; border-left: none; color: #cdddf7; font-size: 0.18rem; text-align: center; cursor: default; position: relative; } .modal-btn>li>div { position: absolute; top: 0; left: 0; width: 0.36rem; height: 0.36rem; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/fangda.png) top left no-repeat; background-size: 100% 100%; display: none; } .modal-btn>li:hover>div { display: block; } .pop-time .time-box { top: 1.28rem; left: -3rem; } .set-div { width: 9.8rem; height: 88%; margin: 0 auto; overflow: hidden; overflow-y: auto; font-size: 0.18rem; } .four-f { letter-spacing: 0.045rem; } .set-box { height: 0.63rem; display: flex; flex-flow: row nowrap; align-items: center; } .set-box>label { color: #cdddf7; margin-right: 10px; float: left; } .set-box>input, .pages-div>input { width: 0.8rem; height: 0.4rem; border: 1px solid #0E94EA; background: rgba(14, 148, 235, 0.2); color: white; padding-left: 0.1rem; } .set-box>.input-edit { width: 4.3rem; } .pages-div>input { background: transparent; margin: 0 0.2rem; } .set-box>input:nth-child(2n+1) { margin: 0 0.07rem; } .set-box>button, .pages-div>button { width: 0.36rem; height: 0.36rem; line-height: 0.38rem; text-align: center; background-color: transparent; border: 1px solid #0E94EA; color: white; padding-left: 0.1rem; cursor: pointer; } .plus { margin: 0 0.07rem; background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/plus.png) center center no-repeat; background-size: 0.18rem; } .mineus { background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/jian.png) center center no-repeat; background-size: 0.18rem; margin-left: 0.1rem; } .set-box>.add-btn { width: 1rem; margin-left: 0.4rem; height: 0.4rem; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; } .add-btn>img { width: 0.18rem; } .table3 { font-size: 0.16rem; border: 1px solid #0e94ea; border-top: none; margin: 10px auto; } .table3 tr { border-top: 1px solid #0e94ea; background: rgba(14, 148, 234, 0.1); } .table3 thead tr { background: rgba(14, 148, 234, 0.4); } .table3 tr.bg-color { background: rgba(14, 148, 234, 0.2); } .table3 tr td:nth-child(2n+1), .table3 tr td:nth-child(2n+1)>p { width: 3rem; } .table3 tr td:nth-child(2n), .table3 tr td:nth-child(2n)>p { width: 1.8rem; } .table3 tr td, .table3 tr th { border-right: 1px solid #0e94ea; height: 0.4rem; line-height: 0.4rem; color: #cdddf7; text-align: center; } .table3 tr td p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cdddf7; } .table3 thead tr th { border-right: none; } .pages-div { height: 0.63rem; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } .prev { background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/prev.png) center center no-repeat; background-size: 0.12rem; } .next { background: url(//repo.bfw.wiki/bfwrepo/images/bigdata/3/next.png) center center no-repeat; background-size: 0.12rem; } .pages-div p { color: white; margin: 0 0.1rem; } .pages-div>.skip { width: 0.7rem; height: 0.4rem; line-height: 0.4rem; } @media screen and (max-height: 670px) { .right-top { height: 47%; } .right-center { height: 23%; } .data-box>.data-number { height: 1.65rem; line-height: 1.65rem; } .data-box>.settings-box { height: 2rem; } } .edit-div { width: 6.5rem; height: 2.9rem; font-size: 0.18rem; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; padding: 0 0.4rem; border: 1px solid #0e94eb; background-color: rgb(20, 32, 48); box-shadow: 0 0 10px #cdddf7; box-sizing: border-box; } .edit-div h4 { font-size: 0.2rem; color: white; height: 0.65rem; line-height: 0.65rem; } .edit-box { justify-content: flex-end; } .edit-box>button { width: 0.92rem; height: 0.4rem; line-height: 0.4rem; margin: 0 0.17rem; } .table3 tr td p.edit { color: #0e94eb; cursor: pointer; } .table3 tr td p.edit:hover, .table3 tr td p.edit.active { color: #d09d26; } .tishi { position: absolute; margin: auto; top: 0.4rem; left: 0; right: 0; width: 4.8rem; text-align: center; height: 0.4rem; line-height: 0.4rem; border: 1px solid #d09d26; background: rgba(239, 176, 19, 0.2); font-size: 0.16rem; color: white; display: none; } @media screen and (max-height: 610px) { .right-top { height: 49% } .right-center { height: 21%; } .data-box>.data-number { height: 1.4rem; line-height: 1.4rem; } .data-box>.settings-box { height: 1.6rem; } .pop-data .ranking-box { height: 1.9rem; overflow-y: auto; } } </style> </head> <body style="visibility: hidden;"> <div class="container-flex" tabindex="0" hidefocus="true"> <div class="box-left"> <div class="left-top"> <div class="current-num"> <div>当前到件量</div> <p>123,456,789</p> </div> </div> <div class="left-center"> <div class="title-box"> <h6>派件入库量占比</h6> </div> <div class="chart-box pie-chart"> <div id="pie"></div> <div> <div class="pie-data"> </div> </div> </div> </div> <div class="left-bottom" class="select"> <div class="title-box"> <h6>广东省寄派件数据</h6> <img class="line-img" src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/line-blue.png" alt=""> <button id="filBtn"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/select_icon.png" alt="">筛选</button> </div> <div class="chart-box"> <div class="filter-con" id="filCon" data-type="1"> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 派件 </div> <ul class="select-ul"> <li class="active" data-value="1">派件</li> <li data-value="2">寄件</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 公司 </div> <ul class="select-ul company"> <li class="active" data-value="">公司</li> <li data-value="1">顺丰</li> <li data-value="2">京东</li> <li data-value="2">EMS</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 快件类型 </div> <ul class="select-ul"> <li class="active" data-value="">快件类型</li> <li data-value="0">文件</li> <li data-value="1">物品</li> </ul> </div> </div> <div id="gdMap" class="gd-map"></div> </div> </div> </div> <div class="box-center"> <div class="center-top"> <h1>智慧物流服务中心</h1> </div> <div class="center-center"> <div class="weather-box"> <div class="data"> <p class="time" id="time">00:00:00</p> <p id="date"></p> </div> <div class="weather"> <img id="weatherImg" src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/weather/weather_img01.png" alt=""> <div id="weather"> <p class="active">多云</p> <p>16-22℃</p> <p>深圳市南山区</p> </div> </div> </div> <img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/line_bg.png" alt=""> <div class="select-box"> <ul id="barType"> <li class="active" data-value="1">派件</li> <li data-value="2">寄件</li> </ul> <div data-type="2"> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 公司 </div> <ul class="select-ul company"> <li class="active" data-value="">公司</li> <li data-value="1">顺丰</li> <li data-value="2">京东</li> <li data-value="2">EMS</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 快件类型 </div> <ul class="select-ul"> <li class="active" data-value="">快件类型</li> <li data-value="0">文件</li> <li data-value="1">物品</li> </ul> </div> </div> </div> </div> <div class="center-bottom"> <div class="chart-box"> <div id="chart4" style="width:100%;height:95%;"></div> </div> <div class="city-data"> <div class="city-box"> <p id="titleQ"><span>全网</span>到珠海</p> <ul class="city-btn" data-city="1"> <li class="active">全网</li> <li>ABCDE</li> <li>FGHIJ</li> <li>KLMNO</li> <li>PQRST</li> <li>UVWXYZ</li> </ul> <ul class="city-div" id="city"> </ul> </div> <ul class="ranking-box"> <li><span></span> <p>城市</p> <p>派件</p> </li> </ul> <div class="enlarge-box"> <button class="enlarge-btn" id="fangda"></button> <ul class="modal-btn"> <li> <div></div>1</li> <li> <div></div>2</li> <li> <div></div>3</li> <li> <div></div>4</li> <li> <div></div>5</li> <li> <div></div>6</li> </ul> </div> </div> </div> </div> <div class="box-right"> <div class="right-top"> <div class="title-box"> <h6 id="barTitle">派件数据</h6> <img class="line-img" src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/line-blue.png" alt=""> <button data-state=1 id="tabBtn"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/chart_icon.png" alt=""><span>图表</span></button> </div> <p class="unit">单位:件</p> <div class="chart-box"> <div id="chart3" style="width:100%;height:100%;"></div> </div> <div class="data-box" style="display:none;"> <table class="table1"> <tr> <td>入库件</td> <td colspan="3" class="table-data dph-data1">0</td> </tr> <tr class="bg-color"> <td rowspan="2">在库件</td> <td rowspan="2" class="table-data dph-data2">0</td> <td>正常件</td> <td class="table-data dph-data3">0</td> </tr> <tr class="bg-color"> <td>滞留件</td> <td class="table-data dph-data5">0</td> </tr> <tr> <td rowspan="2">出库件</td> <td rowspan="2" class="dph-data6">0</td> <td>派送件</td> <td class="table-data dph-data7">0</td> </tr> <tr> <td>自提件</td> <td class="table-data dph-data8">0</td> </tr> <tr class="bg-color"> <td>退签件</td> <td colspan="3" class="table-data dph-data9">0</td> </tr> <tr> <td>丢失件</td> <td colspan="3" class="table-data dph-data4">0</td> </tr> </table> <table class="table1" style="display:none;"> <tr> <td>入库件</td> <td colspan="3" class="table-data mail-data1">1</td> </tr> <tr class="bg-color"> <td rowspan="2">在库件</td> <td rowspan="2" class="table-data mail-data2">1</td> <td>正常件</td> <td class="table-data mail-data7">1</td> </tr> <tr class="bg-color"> <td>滞留件</td> <td class="table-data mail-data4">1</td> </tr> <tr> <td>出库件</td> <td colspan="3" class="mail-data6">1</td> </tr> <tr class="bg-color"> <td>丢失件</td> <td colspan="3" class="mail-data3">1</td> </tr> <tr> <td>撤销件</td> <td colspan="3" class="table-data mail-data5">1</td> </tr> </table> </div> </div> <div class="right-center"> <div class="title-box"> <p id="switchBtn"><span class="active" data-dataType="income">收入数据</span><img class="line-img" src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/line-blue.png" alt=""><span data-dataType="expend">支出数据</span></p> <img class="line-img" src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/line-blue.png" alt=""> <button id="dateBtn"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/data_icon.png" alt="">日期</button> </div> <div class="data-box"> <p class="data-number" id="totalProfit">123,456.5元</p> <div class="time-box" id="timeBox"> <div class="time-div"> <input class="time-input" type="text" value="" id="startTime"> <img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/selsct_time.png" alt=""> </div> <div class="time-div end"> <input class="time-input" type="text" value="" id="endTime"> <img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/selsct_time.png" alt=""> </div> </div> </div> </div> <div class="right-bottom"> <div class="title-box"> <button id="setBtn"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/settings_icon.png" alt="">设置</button> </div> <div class="data-box"> <div class="settings-box"> <p><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/teacher_icon.png" alt="">今日值班:<span id="name_a"></span><span id="date_a"></span></p> <p><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/people_iocn.png" alt="">负责人:<span id="lea_a"></span></p> </div> </div> </div> </div> </div> <div class="container"> <div class="pop-up"> <span class="close-pop"></span> <h2 class="title">当前到件量</h2> <div class="pop-data-box"> <p>123,456,789</p> </div> </div> <div class="pop-up"> <span class="close-pop"></span> <h2 class="title">派件入库量占比</h2> <div class="chart-box pie-chart"> <div id="pie1"></div> <div> <div class="pie-data"> </div> </div> </div> </div> <div class="pop-up"> <span class="close-pop"></span> <h2 class="title">广东省寄派件数据 </h2> <div class="filter-con pop-filter" style="display:flex" data-type="3"> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 派件 </div> <ul class="select-ul"> <li class="active" data-value="1">派件</li> <li data-value="2">寄件</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 公司 </div> <ul class="select-ul company"> <li class="active" data-value="">公司</li> <li data-value="1">顺丰</li> <li data-value="2">京东</li> <li data-value="2">EMS</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 快件类型 </div> <ul class="select-ul"> <li class="active" data-value="">快件类型</li> <li data-value="0">文件</li> <li data-value="1">物品</li> </ul> </div> </div> <div class="chart-box pop-chart"> <div id="gdMaps" class="gd-map"></div> </div> </div> <div class="pop-up"> <span class="close-pop"></span> <div class="filter-con pop-filters" style="display:flex" data-type="4"> <div class="select-pop" tabindex="0" hidefocus="true"> <ul id="barTypes"> <li class="active" data-value="1">派件</li> <li data-value="2">寄件</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 公司 </div> <ul class="select-ul company"> <li class="active" data-value="">公司</li> <li data-value="1">顺丰</li> <li data-value="2">京东</li> <li data-value="2">EMS</li> </ul> </div> <div class="select" tabindex="0" hidefocus="true"> <div class="select-div"> 快件类型 </div> <ul class="select-ul"> <li class="active" data-value="">快件类型</li> <li data-value="0">文件</li> <li data-value="1">物品</li> </ul> </div> </div> <div class="cont-div"> <div class="chart-box pop-charts"> <div id="chart4s" style="width:100%;height:95%;"></div> </div> </div> <div class="cont-div"> <h2 class="title" id="barTitles">派件数据</h2> <button class="btn-class" data-state=1 id="tabBtns"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/chart_icon.png" alt=""><span>图表</span></button> <div class="chart-box pop-chart"> <div id="chart3s" style="width:100%;height:90%;"></div> </div> <div class="data-box" style="top:25%;width:8.6rem;display:none;"> <table class="table2"> <tr> <td>入库件</td> <td colspan="3" class="table-data dph-data1">0</td> </tr> <tr class="bg-color"> <td rowspan="2">在库件</td> <td rowspan="2" class="table-data dph-data2">0</td> <td>正常件</td> <td class="table-data dph-data3">0</td> </tr> <tr class="bg-color"> <td>滞留件</td> <td class="table-data dph-data5">0</td> </tr> <tr> <td rowspan="2">出库件</td> <td rowspan="2" class="dph-data6">0</td> <td>派送件</td> <td class="table-data dph-data7">0</td> </tr> <tr> <td>自提件</td> <td class="table-data dph-data8">0</td> </tr> <tr class="bg-color"> <td>退签件</td> <td colspan="3" class="table-data dph-data9">0</td> </tr> <tr> <td>丢失件</td> <td colspan="3" class="table-data dph-data4">0</td> </tr> </table> <table class="table2" style="display:none;"> <tr> <td>入库件</td> <td colspan="3" class="table-data mail-data1">0</td> </tr> <tr class="bg-color"> <td rowspan="2">在库件</td> <td rowspan="2" class="table-data mail-data2">0</td> <td>正常件</td> <td class="table-data mail-data7">0</td> </tr> <tr class="bg-color"> <td>滞留件</td> <td class="table-data mail-data4">0</td> </tr> <tr> <td>出库件</td> <td colspan="3" class="mail-data6">0</td> </tr> <tr class="bg-color"> <td>丢失件</td> <td colspan="3" class="mail-data3">0</td> </tr> <tr> <td>撤销件</td> <td colspan="3" class="table-data mail-data5">0</td> </tr> </table> </div> </div> <div class="cont-div"> <h2 class="title" id="titles"></h2> <button class="btn-class" id="dateBtns"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/data_icon.png" alt="">日期</button> <div class="data-box pop-time"> <div class="time-box" id="timeBoxs"> <div class="time-div"> <input class="time-input" type="text" value="" id="startTimes"> <img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/selsct_time.png" alt=""> </div> <div class="time-div end"> <input class="time-input" type="text" value="" id="endTimes"> <img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/selsct_time.png" alt=""> </div> </div> </div> <div class="pop-data-box" id="totalProfits"> <p></p> </div> </div> <div class="pop-data"> <div class="city-data"> <div class="city-box"> <p id="titleQs"><span>全网</span>到珠海</p> <ul class="city-btn" data-city="2"> <li class="active">全网</li> <li>ABCDE</li> <li>FGHIJ</li> <li>KLMNO</li> <li>PQRST</li> <li>UVWXYZ</li> </ul> <ul class="city-div" id="citys"> </ul> </div> <ul class="ranking-box"> <li><span></span> <p>城市</p> <p>派件</p> </li> </ul> </div> </div> </div> <div class="pop-up"> <span class="close-pop"></span> <h2 class="title">设置</h2> <div class="set-div"> <div class="set-box"> <label class="four-f" for="">排班日期</label> <div class="time-div"> <input class="time-input" type="text" value="" id="times"> <img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/selsct_time.png" alt=""> </div> </div> <div class="set-box"> <label for="">值班人</label> <input type="text" value=""> <button class="plus" id="addT"></button> <button class="mineus" id="mineusT" style="display:none;"></button> </div> <div class="set-box"> <label for="">负责人</label> <input type="text" value=""> <button class="plus" id="addL"></button> <button class="mineus" id="mineusL" style="display:none;"></button> <button class="add-btn" id="addSet"><img src="//repo.bfw.wiki/bfwrepo/images/bigdata/3/plus.png" alt="">添加</button> </div> <table class="table3"> <thead> <tr> <th>值班人</th> <th>排班日期</th> <th>负责人</th> <th>操作</th> </tr> </thead> <tbody id="tList"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> <div class="pages-div" class="mineus"> <button class="prev"></button> <p id="page"><span>0</span>/<span>0</span></p> <button class="next"></button> <input type="number"> <button class="skip">跳转</button> </div> </div> <div class="tishi">日期已存在!</div> <div class="edit-div" style="display:none;"> <h4>编辑</h4> <span class="close-edit"></span> <div class="set-box"> <label for="">值班人</label> <input class="input-edit" id="editT" type="text" value=""> </div> <div class="set-box"> <label for="">负责人</label> <input class="input-edit" id="editL" type="text" value=""> </div> <div class="set-box edit-box"> <button id="qxEdit">取消</button> <button id="qdEdit">确定</button> </div> </div> </div> </div> <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/layer/layer.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layer/laydate/laydate.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" src="//repo.bfw.wiki/bfwrepo/js/echarts/province/guangdong.js"></script> <script type="text/javascript"> function fnW(str) { var num; str >= 10 ? num = str : num = "0" + str; return num; } //获取当前时间 var timer = setInterval(function () { var date = new Date(); var year = date.getFullYear(); //当前年份 var month = date.getMonth(); //当前月份 var data = date.getDate(); //天 var hours = date.getHours(); //小时 var minute = date.getMinutes(); //分 var second = date.getSeconds(); //秒 var day = date.getDay(); //获取当前星期几 var ampm = hours < 12 ? 'am' : 'pm'; $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second)); $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + ampm + '</span><span>周' + day + '</span>') }, 1000) //页面地图数据 var geoCoordMap = { '海门': [121.15, 31.89], '鄂尔多斯': [109.781327, 39.608266], '招远': [120.38, 37.35], '舟山': [122.207216, 29.985295], '齐齐哈尔': [123.97, 47.33], '盐城': [120.13, 33.38], '赤峰': [118.87, 42.28], '青岛': [120.33, 36.07], '乳山': [121.52, 36.89], '金昌': [102.188043, 38.520089], '泉州': [118.58, 24.93], '莱西': [120.53, 36.86], '日照': [119.46, 35.42], '胶南': [119.97, 35.88], '南通': [121.05, 32.08], '拉萨': [91.11, 29.97], '云浮': [112.02, 22.93], '梅州': [116.1, 24.55], '文登': [122.05, 37.2], '上海': [121.48, 31.22], '攀枝花': [101.718637, 26.582347], '威海': [122.1, 37.5], '承德': [117.93, 40.97], '厦门': [118.1, 24.46], '汕尾': [115.375279, 22.786211], '潮州': [116.63, 23.68], '丹东': [124.37, 40.13], '太仓': [121.1, 31.45], '曲靖': [103.79, 25.51], '烟台': [121.39, 37.52], '福州': [119.3, 26.08], '瓦房店': [121.979603, 39.627114], '即墨': [120.45, 36.38], '抚顺': [123.97, 41.97], '玉溪': [102.52, 24.35], '张家口': [114.87, 40.82], '阳泉': [113.57, 37.85], '莱州': [119.942327, 37.177017], '湖州': [120.1, 30.86], '汕头': [116.69, 23.39], '昆山': [120.95, 31.39], '宁波': [121.56, 29.86], '湛江': [110.359377, 21.270708], '揭阳': [116.35, 23.55], '荣成': [122.41, 37.16], '连云港': [119.16, 34.59], '葫芦岛': [120.836932, 40.711052], '常熟': [120.74, 31.64], '东莞': [113.75, 23.04], '河源': [114.68, 23.73], '淮安': [119.15, 33.5], '泰州': [119.9, 32.49], '南宁': [108.33, 22.84], '营口': [122.18, 40.65], '惠州': [114.4, 23.09], '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0