HTML+CSS+JS数据可视化大屏平台模板实例15-智慧物流_html5数据可视化模板资源-CSDN文库

共25个文件

png：11个

js：8个

css：4个

版权申诉

数据可视化大屏

5星 · 超过95%的资源 164 浏览量 2022-03-25 08:50:52 上传评论收藏 550KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML+CSS+JS数据可视化大屏平台模板实例15-智慧物流.rar （25个子文件）

HTML+CSS+JS数据可视化大屏平台模板实例15-智慧物流

智慧物流服务中心-首页.html 38KB

HTML+CSS+JS数据可视化大屏平台模板实例15-智慧物流.JPG 221KB

智慧物流服务中心-首页_files

laydate.css 6KB

data_icon.png 280B

guangdong.js 71KB

layer.min.js 15KB

line_bg.png 273B

selsct_time.png 499B

weather_img01.png 2KB

laydate.js 14KB

settings_icon.png 557B

jquery-3.3.1.min.js 85KB

teacher_icon.png 609B

echarts.min.js 701KB

layer.css 11KB

style.css 26KB

rem.js 689B

select_icon.png 367B

chart_icon.png 262B

china.js 59KB

line-blue.png 932B

plus.png 242B

base.js 54KB

laydate(1).css 3KB

people_iocn.png 529B

<!DOCTYPE html>  <html lang="en" style="font-size: 66.6667px;"><head><meta http-equiv="Content-Type" content="text/html; 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"> <script type="text/javascript" src="./智慧物流服务中心-首页_files/rem.js"></script><style type="text/css"></style> <link rel="stylesheet" href="./智慧物流服务中心-首页_files/style.css"> <title>智慧物流服务中心-首页</title> <link rel="stylesheet" href="./智慧物流服务中心-首页_files/layer.css" id="layui_layer_skinlayercss" style=""><link type="text/css" rel="stylesheet" href="./智慧物流服务中心-首页_files/laydate.css"><link type="text/css" rel="stylesheet" href="./智慧物流服务中心-首页_files/laydate(1).css" id="LayDateSkin"></head> <body style="visibility: visible;"> <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" _echarts_instance_="ec_1648169170526" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 161px; height: 197px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="241" height="295" style="position: absolute; left: 0px; top: 0px; width: 161px; height: 197px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></div> <div> <div class="pie-data"> <p><span><i class="legend" style="background:#0e94eb"></i></span>顺丰<span class="pie-number" style="color:#0e94eb">192581</span>30.87%</p><p><span><i class="legend" style="background:#c440ef"></i></span>京东<span class="pie-number" style="color:#c440ef">215635</span>34.08%</p><p><span><i class="legend" style="background:#efb013"></i></span>EMS<span class="pie-number" style="color:#efb013">224585</span>35.49%</p></div> </div> </div> </div> <div class="left-bottom"> <div class="title-box"> <h6>广东省寄派件数据</h6> <img class="line-img" src="./智慧物流服务中心-首页_files/line-blue.png" alt=""> <button id="filBtn"><img src="./智慧物流服务中心-首页_files/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" _echarts_instance_="ec_1648169170528" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;"><div style="position: relative; overflow: hidden; width: 323px; height: 205px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="484" height="307" style="position: absolute; left: 0px; top: 0px; width: 323px; height: 205px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div></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">08:46:41</p> <p id="date"><span>2022/3/25</span><span>am</span><span>周5</span></p> </div> <div class="weather"> <img id="weatherImg" src="./智慧物流服务中心-首页_files/weather_img01.png" alt=""> <div id="weather"> <p class="active">多云</p> <p>16-22℃</p> <p>深圳市南山区</p> </div> </div> </div> <img src="./智慧物流服务中心-首页_files/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">

评论收藏

内容反馈

版权申诉