数据可视化大屏——物流大数据服务平台（二）

张人玉2025-05-13 16:33

代码分析：

物流大数据平台代码分析

这是一个基于 Bootstrap 和 ECharts 构建的物流大数据平台前端页面，设计采用了经典的三栏布局，主要展示河南省及全国的物流数据可视化内容。下面从多个维度进行分析：

1. 页面结构分析

整体采用了清晰的三部分结构：

  • 顶部导航：简洁的标题栏，显示平台名称
  • 中间内容区：三栏布局，包含多个数据展示模块
  • 底部数据区：横向三栏布局，展示更多详细数据表格

html

复制代码 
<div class="header"> ... </div>
<div class="data_content">
    <div class="data_time"> ... </div>
    <div class="data_main"> ... </div>
    <div class="data_bottom"> ... </div>
</div>

2. 数据可视化模块

页面使用了多种图表类型展示物流数据：

  • 中国地图（id="chart_map"）：主中心区域，展示全国物流分布
  • 河南省地图（id="chart_2"）：左侧区域，展示省内物流情况
  • 货运收入趋势图（id="chart_1"）：左上角区域
  • 货物周转分析图（id="chart_3"）：右上角区域
  • 高速公路分析图（id="chart_4"）：右侧下方区域
  • 飞机场分布图表（id="chart_5"）：底部左侧区域

3. 边框装饰效果

页面大量使用了自定义边框装饰效果，通过以下结构实现：

html

复制代码 
<div class="t_line_box">
    <i class="t_l_line"></i> 
    <i class="l_t_line"></i> 
</div>

这种方式通过 CSS 实现了模块的边框装饰，增强了视觉层次感。

4. 交互设计

  • 所有数据模块都添加了点击交互效果（cursor: pointer）
  • 部分模块添加了按钮悬停效果（如 t_btn6、t_btn9 等类）
  • 地图模块可以点击查看详情

5. 响应式设计

代码中使用了一些基础的响应式设计元素：

  • Bootstrap 的栅格系统（fl、fr 类可能是浮动布局）
  • 媒体查询确保在不同屏幕尺寸下有良好显示

6. 数据表格

页面包含三个数据表格，展示了不同维度的物流数据：

  • 河南省交通数据
  • 河南省业务量数据
  • 河南省汽车运输数据

每个表格都包含历史数据和预测数据，便于对比分析。

7. 技术栈分析

  • 前端框架：Bootstrap
  • 图表库：ECharts
  • 地图服务：高德地图 API
  • 基础库：jQuery

完整代码：

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物流大数据平台</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .t_btn {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .t_btn li {
            display: inline-block;
            margin: 0 10px 10px 0;
        }

        .t_btn button,
        .t_a {
            display: inline-block;
            padding: 10px 5px;
            width: 80px;
            border-style: solid;
            border-width: 0;
            cursor: pointer;
            font-family: inherit;
            font-weight: bold;
            line-height: normal;
            margin: 0 0 0.5em 0;
            position: relative;
            text-decoration: none;
            text-align: center;
            display: inline-block;
            font-size: 1em;
            background-color: #2C58A6;
            border-color: #0263ff;
            color: white;
            box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
            margin-right: 0.5em;
            border-radius: 4px;
        }

        .t_height {
            line-height: 80px;
            position: absolute;
            right: 28px;
            top: 0;
        }
    </style>
</head>

<body>
<!--header-->
<script src="https://webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2"></script>
<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title">
            物流大数据服务平台
        </div>
    </div>
    <div class="header_nav fl">
    </div>
    <div class="header_myself fr t_height">
        <a class="t_a" href="../index.html">返回 &nbsp;</a>
    </div>
</div>

<!-- 新增按钮容器 -->
<div class="button-container">
    <div class="container">
        <ul class="t_btn">
            <li>
                <button class="t_btn0">中国地图</button>
            </li>
            <li>
                <button class="t_btn3">中国铁路</button>
            </li>
            <li>
                <button class="t_btn14">GPS</button>
            </li>
            <li>
                <button class="t_btn13">河南省</button>
            </li>
            <li>
                <button class="t_btn2">河南飞机场</button>
            </li>
            <li>
                <button class="t_btn4">河南铁路</button>
            </li>
            <li>
                <button class="t_btn1">河南公路</button>
            </li>
            <li>
                <button class="t_btn6">交通就业量</button>
            </li>
            <li>
                <button class="t_btn7">河南货运量</button>
            </li>
            <li>
                <button class="t_btn5">各市货运量</button>
            </li>
            <li>
                <button class="t_btn8">货物周转量</button>
            </li>
            <li>
                <button class="t_btn9">运输线长度</button>
            </li>
            <li>
                <button class="t_btn10">河南业务量</button>
            </li>
            <li>
                <button class="t_btn11">营运汽车</button>
            </li>
            <li>
                <button class="t_btn12">公共交通</button>
            </li>
        </ul>
    </div>
</div>

<!--main-->
<div class="data_content">
    <div class="data_main">
        <div class="main_left fl">
            <div class="left_1" style="display:none">
                <div class="main_title">
                    河南省地图
                </div>
            </div>
        </div>
        <div class="main_center fl">
            <div class="center_text t_cos0">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    中国地图
                </div>
                <div id="chart_map" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos1" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南省高速公路
                </div>
                <div id="chart_2" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos2" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南省飞机场
                </div>
                <div id="chart_0" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos3" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    中国铁路
                </div>
                <div id="chart_4" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos4" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南货运量收入
                </div>
                <div id="chart_1" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos5" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    交通就业人员
                </div>
                <div id="chart_3" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos6" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南省铁路
                </div>
                <div id="chart_6" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos7" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南总货运量
                </div>
                <div id="chart_7" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos8" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南货物周转量
                </div>
                <div id="chart_8" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos9" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南运输线长度
                </div>
                <div id="chart_9" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos10" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南业务量
                </div>
                <div id="chart_10" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos11" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南公路营运
                </div>
                <div id="chart_11" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos12" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南城市交通
                </div>
                <div id="chart_12" class="chart" style="width:100%;height:778px;"></div>
            </div>
            <div class="center_text t_cos13" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    河南省地图
                </div>
                <div id="chart_13" class="chart" style="width:100%;height:778px; cursor: pointer;"></div>
            </div>
            <div class="center_text t_cos14" style="display:none">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    GPS
                </div>
                <div id="chart_14" class="chart" style="width:100%;height:778px; cursor: pointer;"></div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/common.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=dApOtvB5E3x6byHpUGHbRF1fxctCBdjw"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/dataTool.js"></script>
<script src="../js/base.js"></script>
<script src="../js/china.js"></script>
<script src="../js/henan.js"></script>
<script src="../js/bmap.js"></script>
<script src="../js/echarts-all.js"></script>
</html>

代码框架：

效果展示：

完整代码连接：

物流大数据服务平台.rar资源-CSDN文库https://download.csdn.net/download/weixin_66547608/90779579?spm=1001.2014.3001.5501

20套大屏可视化交互动态模板网页前端模板.rar资源-CSDN文库https://download.csdn.net/download/weixin_66547608/90779594?spm=1001.2014.3001.5503

相关推荐
@十八子德月生1 小时前
8天Python从入门到精通【itheima】-1~5
大数据·开发语言·python·学习
元6331 小时前
Hadoop集群的常用命令
大数据·hadoop
武汉格发Gofartlic3 小时前
FEKO许可证的安全与合规性
大数据·运维·安全
姬激薄3 小时前
HDFS概述
大数据·hadoop·hdfs
依年南台3 小时前
克隆虚拟机组成集群
大数据·hadoop
依年南台4 小时前
搭建大数据学习的平台
大数据·学习
请你喝好果汁6415 小时前
TWASandGWAS中GBS filtering and GWAS（1）
信息可视化·数据挖掘·数据分析
Leo.yuan6 小时前
数据分析怎么做？高效的数据分析方法有哪些？
大数据·数据库·信息可视化·数据挖掘·数据分析
杜清卿7 小时前
Spark处理过程-转换算子和行动算子
大数据·分布式·spark
热门推荐
01【分布式】Hadoop完全分布式的搭建（零基础）02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08苍穹外卖面试总结09DeepSeek各版本说明与优缺点分析10YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU