大概花了2天的时间看完这个项目，一开始看的一头雾水，仔细分析一下，其实用的都是蛮简单的技术，主要用了这三个技术后端：flask可视化：echarts前端：HTML+JavaScript+css后续如果继续深入研究，后端框架可以换成高性能的tornado或者功能更强大的Django，可视化的组件可以换成pyecharts，前端可以使用vue，react框架等。还可以考虑加入sqlite数据库或连接db数据库，打造成一个更完整的项目。
目录
1. 项目说明
由于最近《数据可视化》的期末作业（基于flask+echarts制作数据大屏）的到来，我目前还是毫无头绪，因此我在百度上查阅了很多资料，最终发现了一个符合心意的项目（由于已经下载到本机电脑，下载地址就不写上来了，主要懒得再去找项目地址了）。在网页上输入如下url地址就可以看到效果，如下图
经过自己的研究分析，发现网页最底下一层是一个蓝色的背景，带有一个跟随鼠标的粒子动态特效，接着在这个上面叠加了一个table。
table的布局如下所示，首先是一个标题，标题的右侧是天气和时间。接着是分为三列，左侧三列显示3个图表，中间一列显示两个类似数字时钟的数据和文字说明，右边一列显示3个图表。其中左下角的图表由3个小的图表组合而成。
2. 项目文件布局
项目主要由4个部分组成，data部分是数据准备，app部分是flask服务，templates部分控制网页的显示，这三者正好对应MVC的设计模式。最后的static里面主要保存一些网页元素，例如字体格式、图片等等，以及必要的一些js函数库。下面就这四个部分做一个简要的注释。
3. 四大模块核心代码分析
3.1 数据准备模块
这里有3个数据，以data_corp.py为例，文件中，定义了一个数据类，它的数据并没有从外部获取，而是定义了静态的数据，方便了其他人下载这个项目下来就可以直接运行，初始化的时候产生详细的数据，然后定了一个函数返回格式化的数据。
图表的数据用json格式保存，在返回给pyecharts的时候用get函数组装成数组的形式。
3.2 flask网页服务模块
准备好了数据之后，就可以把数据放到html中调用pyecharts进行渲染，这里使用flask服务，将URL根目录和index.html绑定。后续启动app后访问http://127.0.0.1:5000/corp即可查看。
3.3 网页视图模块
首先是jquery和css文件的加载，jquery是js的一个函数库，css决定了整个网页的字体字号颜色等风格。
然后是一个加载动画，这个加载动画使得网页加载具有淡入的效果，并且确保了网页在拉伸的时候能自适应调整布局，关于这个函数后面再详细解释。
最后是echarts的函数库和中国地图的函数库。
<head>
<meta charset="utf-8">
<title>黄科钦的大屏幕</title>
<script type="text/javascript" src="../static/js/jquery.js"></script>
<link rel="stylesheet" href="../static/css/comon0.css">
</head>
<script type="text/javascript" src="../static/js/loading.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/china.js"></script>接下来加载网页的背景，是一个有动态粒子的效果，粒子效果如图所示
最低0.47元/天 解锁文章
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
