# 0 前言
Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！
今天要分享的是：基于大数据的图书零售数据可视化平台系统
包含内容：
- 完整可视化实现源码
- html一键入口(双击直接启动)
项目获取：https://gitee.com/sinonfin/system-sharing
1 介绍
大数据大屏可视化系列：基于大数据的图书零售数据可视化平台系统
可搭载任意自己想用的数据，动态效果不错
2 实现效果
整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。
3 部分代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/macarons.js"></script>
<script src="js/china.js"></script>
<script src="js/countUp.js"></script>
<script src="js/data01.js"></script>
</head>
<body>
<ul class="nav">
<li class="drop-down">
<a ></a>
<ul class="drop-down-content">
<li>
<a href="./home.html">自动切换</a>
</li>
<li>
<a href="./index.html">第一屏</a>
</li>
<li>
<a href="./second.html">第二屏</a>
</li>
<li>
<a href="./third.html">第三屏</a>
</li>
<li>
<a href="./four.html?index=0">第四屏</a>
</li>
</ul>
</li>
</ul>
<div class="first-screen root-wrap">
<header>
<img src="img/title1.png">
<div class="gifImg">
<span class="month-tip">2017年1月</span>
</div>
<div class="title_img"><img src="img/title_left_img.png" > </div>
</header>
<div class="main clearfix">
<div class="aside-left fl">
<div class="top left-top">
<h3>畅销书排行</h3>
<div class="tit clearfix">
<span class="ranking fl"></span>
<span class="name fl">书名</span>
<span class="company fl">出版公司</span>
<span class="hot fl">热销指数</span>
</div>
<div class="con-wrap">
<div class="over-wrap">
<ul class="con">
<li class="active">
<div class="book-rank clearfix">
<span class="ranking fl">1</span>
<span class="name fl">党的十九19大报告辅导读本+中国共产党章程 全2册</span>
<span class="company fl">人民出版社</span>
<span class="hot fl">9.85</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">中共中央宣传部</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787010184272</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2017年10月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥37.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">2</span>
<span class="name fl">中国党第十九次全国代表大会文件汇编</span>
<span class="company fl">人民出版社</span>
<span class="hot fl">9.83</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">中共中央宣传部</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787010184326</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2017年10月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥12.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">3</span>
<span class="name fl">全面从严治党面对面</span>
<span class="company fl">学习出版社</span>
<span class="hot fl">9.68</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">中共中央宣传部理论局</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787514707663</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2017年03月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥19.80</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">4</span>
<span class="name fl">现代汉语词典(第7版) </span>
<span class="company fl">商务印书馆有限公司</span>
<span class="hot fl">9.66</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">中国社会科学院语言研究所词典编辑室</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787100124508</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2016年09月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥109.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">5</span>
<span class="name fl">解忧杂货店</span>
<span class="company fl">南海出版公司</span>
<span class="hot fl">9.65</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">(日)东野圭吾</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787544270878</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2014年05月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥39.50</span>
</p>
</div>
</div>
</li>
</ul>
<ul class="con">
<li class="active">
<div class="book-rank clearfix">
<span class="ranking fl">1</span>
<span class="name fl">追风筝的人</span>
<span class="company fl">上海人民出版社</span>
<span class="hot fl">9.62</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">[美]卡勒德·胡赛尼</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787208061644</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2006年05月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥29.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">2</span>
<span class="name fl">天才在左疯子在右（完整版）</span>
<span class="company fl">北京联合出版公司</span>
<span class="hot fl">9.59</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">高铭</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787550263932</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2016年01月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥39.80</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">3</span>
<span class="name fl">新华字典（第11版）（双色本）</span>
<span class="company fl">商务印书馆有限公司</span>
<span class="hot fl">9.58</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">中国社会科学院语言研究所</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787100077040</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2011年06月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥24.90</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">4</span>
<span class="name fl">神奇校车·图画书版（全11册）</span>
<span class="company fl">贵州人民出版社</span>
<span class="hot fl">9.56</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">(美)乔安娜柯尔</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">21005473</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2011年01月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥132.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">5</span>
<span class="name fl">这就是二十四节气</span>
<span class="company fl">贵州人民出版社</span>
<span class="hot fl">9.53</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">高春香，邵敏</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787511026118</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2015年09月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥100.00</span>
</p>
</div>
</div>
</li>
</ul>
<ul class="con">
<li class="active">
<div class="book-rank clearfix">
<span class="ranking fl">1</span>
<span class="name fl">小王子</span>
<span class="company fl">外国文学出版社</span>
<span class="hot fl">9.52</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">(法)安托万·德·圣埃克苏佩里</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787201077642</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2013年01月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥32.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">2</span>
<span class="name fl">所谓情商高，就是会说话</span>
<span class="company fl">外国文学出版社</span>
<span class="hot fl">9.50</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">佐佐木圭一</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787550286092</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2016年9月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥32.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">3</span>
<span class="name fl">牛津高阶英汉双解词典 第8版</span>
<span class="company fl">人民出版社</span>
<span class="hot fl">9.49</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">[英]霍恩比</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787100105279</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2014年10月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥138.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">4</span>
<span class="name fl">从你的全世界路过</span>
<span class="company fl">人民出版社</span>
<span class="hot fl">9.48</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">张嘉佳</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787540458027</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2017年03月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥36.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">5</span>
<span class="name fl">小熊和最好的爸爸(全7册)</span>
<span class="company fl">商务印书馆</span>
<span class="hot fl">9.46</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">（荷）丹姆 </span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787221078803</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2016年09月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥35.00</span>
</p>
</div>
</div>
</li>
</ul>
<ul class="con">
<li class="active">
<div class="book-rank clearfix">
<span class="ranking fl">1</span>
<span class="name fl">苏东坡传(精装典藏版)</span>
<span class="company fl">人民文学出版社</span>
<span class="hot fl">9.45</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">林语堂</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787540476250</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2016年05月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥28.50</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">2</span>
<span class="name fl">围城</span>
<span class="company fl">人民文学出版社</span>
<span class="hot fl">9.43</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">钱钟书</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787020090006</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2006年05月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥39.00</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">3</span>
<span class="name fl">夏洛的网(新)</span>
<span class="company fl">外国文学出版社</span>
<span class="hot fl">9.42</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">（美）怀特</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787532767373</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2016年01月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥39.80</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">4</span>
<span class="name fl">给孩子读诗</span>
<span class="company fl">人民出版社</span>
<span class="hot fl">9.40</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">果琪麦等</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787533943073</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2011年06月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥24.90</span>
</p>
</div>
</div>
</li>
<li>
<div class="book-rank clearfix">
<span class="ranking fl">5</span>
<span class="name fl">星火英语四级真题试卷</span>
<span class="company fl">高等教育出版社</span>
<span class="hot fl">9.39</span>
</div>
<div class="book-show clearfix">
<div class="img-box fl">
<img src="" >
</div>
<div class="content fl">
<p>
<span>作者：</span>
<span class="authors">汇开虎</span>
</p>
<p>
<span>ISBN：</span>
<span class="isbn">9787313086723</span>
</p>
<p>
<span>出版日期：</span>
<span class="pub-date">2011年01月</span>
</p>
<p>
<span>定价：</span>
<span class="pricing">￥58.00</span>
</p>
</div>
</div>
</li>
</ul>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
