master

分支 (1)

管理

管理

master

echarts-data-visualization
/
index.html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>物流大数据展示平台</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/echarts.js"></script>
  <script src="./js/jquery-3.7.1.js"></script>
</head>

<body>
  <div class="huanying">欢迎来到物流大数据分析平台</div>
  <div class="header">
    <div class="header-left" id="time"></div>
    <div class="header-right">物流大数据分析平台欢迎您！</div>
    <div class="sysName">
      <h1 class="tit">物流大数据分析平台</h1>
      <div class="header-img"></div>
    </div>
    <div class="menu">
      <ul>
          <li><a href="./index.html" class="menuActive">总数据</a></li>
          <li><a href="./logistics-operation.html">物流运营综合分析</a></li>
          <li class="sysnameN"></li>
          <li><a href="./logistics-market.html">物流市场分析</a></li>
          <li><a href="./logistics-order.html">物流订单分析</a></li>
      </ul>
    </div>
    <div class="header-bottom"></div>
  </div>
  <div class="chartWarp userWarp">
    <div class="pure-g user-row1">
      <div class="pure-u-7-24 col2 alter724">
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">城市物流数据统计</h2>
            </div>
          </div>
          <div class="bd">
            <div id="cityData" class="chartDiv"></div>
          </div>
        </div>
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">包裹量排名</h2>
            </div>
          </div>
          <div class="bd">
            <!-- <div id="pack-box" class="chartDiv"></div> -->
            <ul class="pack-list">
              <li class="pack-no">
                <span>NO.1</span>
                湖北，包裹累计<span>188000</span>件
              </li>
              <li class="pack-no">
                <span>NO.2</span>
                四川，包裹累计<span>165000</span>件
              </li>
              <li class="pack-no">
                <span>NO.3</span>
                北京，包裹累计<span>159000</span>件
              </li>
              <li class="pack-no">
                <span>NO.4</span>
                浙江，包裹累计<span>152000</span>件
              </li>
              <li class="pack-no">
                <span>NO.5</span>
                河北，包裹累计<span>147000</span>件
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pure-u-10-24 alter1024">
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">基本信息</h2>
            </div>
          </div>
          <div class="bd">
            <div id="baseInfo" class="chartDiv"></div>
          </div>
        </div>
      </div>
      <div class="pure-u-7-24 col2 alter724">
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">商品销售排行</h2>
            </div>
          </div>
          <div class="bd">
            <div id="goodsSale" class="chartDiv">
              <div class="sale-head">
                <span class="col">排名</span>
                <span class="col">商品名称</span>
                <span class="col">销量</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col"><i>1</i></span>
                    <span class="col">女装</span>
                    <span class="col">4562万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>2</i></span>
                    <span class="col">手机配件</span>
                    <span class="col">4125万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>3</i></span>
                    <span class="col">手机</span>
                    <span class="col">4100万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>4</i></span>
                    <span class="col">流行饰品</span>
                    <span class="col">3989万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>5</i></span>
                    <span class="col">男装</span>
                    <span class="col">3956万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>6</i></span>
                    <span class="col">运动</span>
                    <span class="col">3823万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>7</i></span>
                    <span class="col">手表</span>
                    <span class="col">3723万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>8</i></span>
                    <span class="col">服饰配件</span>
                    <span class="col">3500万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>9</i></span>
                    <span class="col">电脑</span>
                    <span class="col">3412万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>10</i></span>
                    <span class="col">化妆品</span>
                    <span class="col">3312万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>11</i></span>
                    <span class="col">女鞋</span>
                    <span class="col">2856万</span>
                  </div>
                  <div class="row">
                    <span class="col"><i>12</i></span>
                    <span class="col">礼品</span>
                    <span class="col">2631万</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">各平台占比</h2>
            </div>
          </div>
          <div class="bd pie">
            <div id="platformPercent" class="chartDiv"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pure-g user-row2">
      <div class="pure-u-7-24 col2 alter724">
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">商品分类占比</h2>
            </div>
          </div>
          <div class="bd">
            <div id="goodsPercent" class="chartDiv"></div>
          </div>
        </div>
      </div>
      <div class="pure-u-10-24 alter1024">
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">下单付款月统计</h2>
            </div>
          </div>
          <div class="bd" style="height: calc(100% - 32px)">
            <div id="payMonth" class="chartDiv"></div>
          </div>
        </div>
      </div>
      <div class="pure-u-7-24 col2 alter724">
        <div class="chartBlock">
          <div class="hd">
            <div class="chartTit">
              <h2 class="titContent">全球贸易国家城市排行</h2>
            </div>
          </div>
          <div class="bd">
            <div id="worldRank" class="chartDiv"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function getCurrentDateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      const weekday = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(now);
      return `${year}-${month}-${day}&nbsp;&nbsp;${hours}:${minutes}:${seconds}&nbsp;&nbsp;<span>${weekday}</span>`;
    }
    document.getElementById('time').innerHTML = getCurrentDateTime()
    setInterval(() => {
      document.getElementById('time').innerHTML = getCurrentDateTime()
    }, 1000)

    const packNo = document.querySelectorAll('.pack-no')
    let len = 0
    setInterval(() => {
      packNo[len].classList.add('pack-no-active')
      setTimeout(() => {
        packNo[len].style.transform = 'rotateX(90deg)'
      }, 800)
      setTimeout(() => {
        packNo[len].style.transform = 'rotateX(0deg)'
        packNo[len].classList.remove('pack-no-active')
        len++
        if (len === 5) {
          len = 0
        }
      }, 1200)
    }, 1500)

    $('.marquee .row').each(function(index, ele) {
      let colorArr = [
        "#FE4365", "#FF7A01", "#2ecc71", "#20A8FE", "#83AF9B", "#607d8b", "#FC9D9A", "#9b59b6", "#2980b9","#3498db","#F2719A","#9B8BFF"]
      $(this).children('span').eq(0).css('background-color', colorArr[index])
    })
    $('.marquee').append($('.marquee .row').clone())
    $('.huanying').fadeIn()
    setTimeout(() => {
      $('.huanying').fadeOut()
    }, 2000)
  </script>

  <script src="./js/index.js"></script>
</body>

</html>