基于Echarts+HTML5可视化数据大屏展示-物流信息展示系统

本文展示了一个物流信息展示系统的前端界面实现。系统采用响应式设计，通过jQuery动态调整字体大小以适应不同屏幕。页面布局分为header和center两大区域，header显示时间、标题等基本信息，center区域通过多个div容器展示各类物流数据图表，包括地图、柱状图等可视化组件。使用ECharts实现数据可视化，并引入中国地图数据。整体界面采用左右分栏布局，通过CSS实现边框和定位效果。代码

java水泥工

406人浏览 · 2025-11-27 09:30:00

java水泥工 · 2025-11-27 09:30:00 发布

效果展示：
在这里插入图片描述

代码结构：
在这里插入图片描述

主要代码实现
index.html布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>物流信息</title>
  <link rel="stylesheet" href="css/public.css">
  <link rel="stylesheet" href="css/index3.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script>
    $(document).ready(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 22 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 22 })
      });
    });
  </script>
</head>

<body>

  <div class="main">
    <div class="header">
      <div class="header-left fl" id="time"></div>
      <div class="header-center fl">
        <div class="header-title">
          物流信息展示系统
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-right fl"></div>
      <div class="header-bottom fl"></div>
    </div>

    <div class="center">
      <div class="center-left fl">
        <div class="center-left-cen rightTop border">
          <div class="center-left-cen-left fl">
            <div class="center-left-cen-top1 fl rightTop border">
              <div class="allnav" id="chart_7" style="height: 2.4rem;"></div>
            </div>
            <div class="center-left-cen-top2 fl rightTop border">
              <div class="allnav" id="Gender" style="height: 2.4rem;"></div>
            </div>
          </div>
          <div class="center-left-cen-right fr">
            <div class="allnav" id="china"></div>
          </div>

          <div class="center-left-zhong rightTop border fl">
            <div class="center-left-zhong-left fl">
              <div class="allnav" id="char_1" style="height: 2.4rem;"></div>
            </div>
            <div class="center-left-zhong-right fr">
              <div class="allnav" id="char_2" style="height: 2.2rem;"></div>
            </div>
          </div>
          <div class="center-left-bottm rightTop border fr">
            <div class="allnav" id="chart_5" style="height: 2.4rem;"></div>
          </div>
        </div>

      </div>



      <div class="center-right fr">
        <div class="center-right-top rightTop border">
          <div class="allnav" id="chart_3" style="height: 3rem;"></div>
        </div>
        <div class="center-right-cen-left fl rightTop border">
          <div class="allnav" id="chart_6" style="height: 3rem;"></div>
        </div>
        <div class="center-right-cen-right fr rightTop border">
          <div class="allnav" id="chart_8" style="height: 3.2rem;"></div>
        </div>
        <div class="center-right-bottom rightTop border fl">
          <div class="allnav" id="maps" style="height: 3.35rem;"></div>
        </div>
      </div>



    </div>



  </div>


  <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
  <script src="js/china.js"></script>
  <script src="js/index3.js"></script>
  <script src="js/newmap.js"></script>

  <script>

  </script>
</body>

</html>