开源 企业版 高校版 私有云 模力方舟 AI 队友
代码拉取完成,页面将自动刷新
捐赠
捐赠前请先登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
1 Star 0 Fork 1.2K

周博/大屏数据可视化集合

加入 Gitee
与超过 1400万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
已有帐号? 立即登录
文件
master
分支 (1)
master
master
分支 (1)
master
克隆/下载
克隆/下载
提示
下载代码请复制以下命令到终端执行
为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置
初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置
1 生成 RSA 密钥
2 获取 RSA 公钥内容,并配置到 SSH公钥 中
在 Gitee 上使用 SVN,请访问 使用指南
使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议 配置并使用私人令牌 替代登录密码进行克隆、推送等操作
Username for 'https://gitee.com': userName
Password for 'https://userName@gitee.com': # 私人令牌
master
分支 (1)
master
viewdata
/
bigdata.html
viewdata
/
bigdata.html
bigdata.html 13.33 KB
一键复制 编辑 原始数据 按行查看 历史
熊泽 提交于 2021年11月22日 14:41 +08:00 . 添加文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 
<!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://www.jq22.com/jquery/jquery-1.10.2.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://www.jq22.com/jquery/echarts-4.2.1.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)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';

 //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>
Loading...
举报
举报成功
我们将于2个工作日内通过站内信反馈结果给你!
请认真填写举报原因,尽可能描述详细。
请选择举报类型
取消
发送
误判申诉

此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。

如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。

取消
提交

简介

持续更新中(75+24套):数据可视化集合。 基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。 2021年11月24日:新增75套数据可视化源码 2021年11月22日:24套数据可视化源码
暂无标签
MulanPSL-2.0
使用 MulanPSL-2.0 开源许可协议
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
编辑仓库简介
简介内容
主页
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML/CSS
1
https://gitee.com/fon44.com/viewdata.git
git@gitee.com:fon44.com/viewdata.git
fon44.com
viewdata
大屏数据可视化集合
master
点此查找更多帮助

搜索帮助

评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册

AltStyle によって変換されたページ (->オリジナル) /