基于Echarts+HTML5可视化数据大屏展示-物流大数据展示
效果展示：
代码结构：
主要代码实现
index.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">
<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.1span>
湖南，包裹累计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>3span>
<span>6span>
<span>5span>
<b>个b>
li>
<li>
<p>同比上升p>
<span>1span>
<span>3span>
<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>1b>
span>
<span>女装span>
<span>4562万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>2b>
span>
<span>手机配件span>
<span>4125万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>3b>
span>
<span>手机span>
<span>4100万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>4b>
span>
<span>流行饰品span>
<span>3989万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>5b>
span>
<span>男装span>
<span>3956万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>6b>
span>
<span>真人发span>
<span>3823万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>7b>
span>
<span>手表span>
<span>3723万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>8b>
span>
<span>服饰配件span>
<span>3500万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>9b>
span>
<span>电脑span>
<span>3412万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>10b>
span>
<span>化妆品span>
<span>3312万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>11b>
span>
<span>女鞋span>
<span>2856万span>
div>
li>
<li>
<div class="fontInner clearfix">
<span>
<b>12b>
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>
/*$('#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>
作品来自于网络收集、侵权立删
