效果展示：
代码结构：
主要代码实现
index.html布局
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据展示</title>
<link rel="stylesheet" href="css/wodry.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/public.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script>
$(function () {
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 38 //li的高度
});
});
$(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="left-top rightTop border">
<!--<h1 id="ceshi">数据可视化</h1>-->
<div class="title">基本信息</div>
<div class="top-list">
<p>当你征服一座山峰时，它已经在你脚下了，你必须再找一座山峰去征服，否则，你只有下山，走下坡路了</p>
<ul>
<li>成交额：4250万</li>
<li>成交量：3545万件</li>
<li>在线总数：1254万</li>
<li>总包裹量：7854万</li>
<li>在线商家：68万</li>
<li>已发件：154万</li>
</ul>
</div>
</div>
<div class="left-cen rightTop border">
<div class="title">包裹量排名</div>
<ul class="company" id="ceshi">
<li class="wodryRX0">
<span>NO.1</span>
湖南，包裹累计18.8万件</li><br/>
<li class="wodryRX1">NO.2
河南，包裹累计16.5万件</li>
<br/>
<li class="wodryRX2">NO.3
贵州，包裹累计15.9万件</li>
<br/>
<li class="wodryRX3">NO.4
上海，包裹累计15.2万件</li>
<br/>
<li class="wodryRX4">NO.5
北京，包裹累计14.7万件</li>
</ul>
</div>
<div class="left-bottom rightTop border">
<div class="title">商品分类占比</div>
<div class="bottom-b">
<div id="chart3" class="allnav"></div>
</div>
</div>
</div>
<div class="center-cen fl">
<div class="cen-top rightTop border">
<div class="top-title">
<ul>
<li>
<p>数量统计</p>
<span>3</span>
<span>6</span>
<span>5</span>
<b>个</b>
</li>
<li>
<p>同比上升</p>
<span>1</span>
<span>3</span>
<b>%</b>
</li>
</ul>
</div>
<div class="top-bottom">
<div id="map" class="allnav" style="height: 4.4rem"></div>
</div>
</div>
<div class="cen-bottom rightTop border">
<div class="title">月统计</div>
<div class="bottom-b">
<div id="chart4" class="allnav"></div>
</div>
</div>
</div>
<div class="center-right fr">
<div class="right-top rightTop border">
<div class="title">商品销售排行</div>
<div class="echart wenzi">
<div class="gun">
<span>排名</span>
<span>商品名称</span>
<span>销量</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span>
<b>1</b>
</span>
<span>女装</span>
<span>4562万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>2</b>
</span>
<span>手机配件</span>
<span>4125万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>3</b>
</span>
<span>手机</span>
<span>4100万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>4</b>
</span>
<span>流行饰品</span>
<span>3989万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>5</b>
</span>
<span>男装</span>
<span>3956万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>6</b>
</span>
<span>真人发</span>
<span>3823万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>7</b>
</span>
<span>手表</span>
<span>3723万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>8</b>
</span>
<span>服饰配件</span>
<span>3500万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>9</b>
</span>
<span>电脑</span>
<span>3412万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>10</b>
</span>
<span>化妆品</span>
<span>3312万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>11</b>
</span>
<span>女鞋</span>
<span>2856万</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>12</b>
</span>
<span>礼品</span>
<span>2631万</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right-cen border">
<div class="title">各平台占比</div>
<div class="right-cen-cent">
<div id="chart2" class="allnav"></div>
</div>
</div>
<div class="right-bottom rightTop border">
<div class="title">全球贸易国家城市排行</div>
<div class="chat">
<div id="chart5" class="allnav"></div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="js/wodry.min.js"></script>
<script src="js/fontscroll.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
/*$('#ceshi').wodry({
animation: 'rotateX',
delay: 1000,
animationDuration: 800
});*/
/*window.onload = function () {
setInterval(function () {
var hs=document.getElementById("ceshi");
var hstyle=hs.style.transform;
if(hstyle=='rotateX(-360deg)'){
//console.log(1)
hs.style.transform='rotateX(0deg)';
hs.style.transform='transform 500ms cubic-bezier(0.55, 0.18, 0.92, 0.46) 0s;'
}else {
hs.style.transform='rotateX(-360deg)';
hs.style.transition="all 2s";
}
}, 5000);
};*/
var counter = 3000;
var ulist=document.getElementById("ceshi").getElementsByTagName("li");
for (var i=0;i<ulist.length;i++){
//console.log(ulist[i].className);
var liclass=ulist[i].className;
var a= $('.'+liclass+'').wodry({
animation: 'rotateX',
delay: counter,
animationDuration: 1000
});
if(counter>3050){
counter=3000;
}else {
counter +=10;
}
//console.log(counter);
}
//顶部时间
function getTime(){
var myDate = new Date();
var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
var myToday = myDate.getDate(); //获取当前日(1-31)
var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
var myHour = myDate.getHours(); //获取当前小时数(0-23)
var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var nowTime;
nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+' '+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+' '+week[myDay]+' ';
//console.log(nowTime);
$('#time').html(nowTime);
};
function fillZero(str){
var realNum;
if(str<10){
realNum = '0'+str;
}else{
realNum = str;
}
return realNum;
}
setInterval(getTime,1000);
</script>
</body>
</html>作品来自于网络收集、侵权立删