【Python可视化大屏教程】全流程揭秘！讲解可视化数据大屏的背后原理！原创

人生苦短，我用拍子，各位小伙伴大家好。今天我们来讲解一下这个拖拽可视化大屏到底是怎么实现的，那今天就来详细的介绍一下，那这里大家看到的是整个项目的一个设计方案，分为三步，第一是爬虫采集数据，第二是数据的持久化存储，存到我们SQL里面，第三也就是最核心的。怎样通过拖拽生成可视化大屏？那首先爬虫这里我们采集对象是豆瓣电影top宝250的数据，那最后采集下来的字段一共有这些字段，采集下来之后把它保存到一个临时的CSV里面，那这个步骤我前面有视频详细讲解了，本次就不再赘述。那第二步就是数据的持久化存储，把刚才采集到的CSV数据导入到买搜和数据库里，那前几天我也出了一个视频。

仅用3行代码就实现数据库和Excel之间的导入导出，这里的代码就是用的这个3行代码，我们来看一下，首先用这个create engine来创建一个数据库的连接，MYSQL数据库用户名、密码。数据库的IP地址，还有数据库的名称，那首先用pandas read csv把这个数据读取进来，读完之后第三行代码就是to circleql, 把CSV的数据导入到数据库里，数据库名叫t film.这个connection连接就是刚才创建的这个数据库的连接。如果数据存在的话就替换，那这样的话就不会产生重复的数据，那数据最终导入之后，在数据库里的结果就是这样的，一共是250条的数据，对应淘宝250的排名，那它的字段有排名，电影名称，电影的链接，电影评分，评论数，导演主演，上映年份，上映地区，电影类型和一句话的短评，那就是这些数据，那接下来。

我们就进入最核心的部分，生成可视化的大屏幕。那生成大屏的代码部分，我们从主函数入口，首先依然是创建了一个数据库的连接，然后用read搜口从这个数据库里把数据读进来，也就是刚才保存的这个数据库表t film这个表。

啊，这是读取了所有的数据，然后下面这个是读取了部分字段的limit十十条数据，这个适用于大屏上的一个数据表格的数据展示，那把这些数据都准备好了之后，那下面就针对这个数据进行一些清洗处理，这个是电影名称的列表，把它存到一个列表里，然后再把这个列表转成字符串，就是所有电影名称的一个组成的一个字符串，那这个是呃一句话的短屏呃组成的列表，那这里也是做了一个数据清洗，如果里面没有不是字符串的类型的，把它转成字符串，然后再拼成列表，那下面是呃上有年份和平分。的前50个数据，那下面就是进入最核心的这个可视化的绘制部分，我们采用拍1XS里面的配置这个组件，那配置这个组件呢？

这个layout我们采用这个拖拽dragle ball配layout拖拽方式，那它还有另外一种方式是它的智能组合方式，那这里我们选择拖拽的方式，那这个对象建立好了之后，就可以往这个对象里按的图表了，那下面我们看，呃，有这个title，有这个有数据表格，有词形图，条形图、饼图，柱形图，散点图。啊，一共是往这个配置对象里增加了这么若干个数据，呃，图表类型我们一个一个来看，首先是这个，呃，整个图，整个大屏的最上面的一个大标题，我们来看一下这个代码实现，因为这个大大标题呢，一叉S里面是没有一个专门的组件来制作标题的，所以我这里用了这个table，就是数据表格这个组件灵活的，呃，使用一下它。

这里设置了一些配置项，宽度、高度、文字，呃，大小、颜色等等。那生成这个大标题之后呢，它的效果就是这样，我们打开来看一下。那这就是这个上面的最大的标题生成就是这样的，呃，我这里设置的header header就是这个标题的内容，就是这一句话，然后Rose Rose就是下面的，因为它本身是一个表格嘛，下面是没有数，呃，应该有数据的，但是我这里设置为空，那它没有数据，所以就产生了一行标题这种的效果啊，这就是灵活的运用了一下table这个组件，再回到主函数里面，那下面是这个中下方的数据表格，我们进入到代码看一下，呃，同样采用的是table这个组件啊，标题，然后这个是表格的最上面这一行标题分为这几个字段，然后Rose就是具体的数据了，Data list.

这个对他历史呢，就是刚才呃，我们取出来的这10条数据，也就是这个厘米10啊，就是这个地方用到的。为什么我取10条数据呢？就是因为10条才比较美观，如果把250条全都放在这里，就放不下，就站不开。啊，最后生成的这个数据表格，我们来看一下数据表格。它生成的就是这样，那我后面是把它放在了整个大屏的中下方，好，下面我们继续看这个词云图，进入到代码块看一下。

那这个词性图呢，我们是采用的拍一chars里的这个word cloud这个组件来绘制的，那上面设置了一些停用词，这里我采用的是哈工大的停用词，但是这个停用词呢，其实是呃，意义不大，因为我这里画的是电影名称的这个前音图，电影名称它也不需要分词，也不需要停用词，所以呃，这个停用词把它去掉也可以啊，也去掉也可以，那这里我们选用的公司common是300啊，300就是那肯定是覆盖住了250条了，所以它是把全部的电名称都显示出来，那这里再做一些配置项，宽度高度。颜色主题啊等等，最后生成的是动漫电影名称的一个咨询图，我们来看一下这个效果。

好，这就是整个的一个字形图。啊，把光标放上去会有一个动态交互效果，因为都是一部名称的电影，所以后面跟的都是1好，下面看看这个top是评论数的条形图。那首先做了一个数据的呃统计啊，针对这个comments，呃，评论数，呃，这里采用n larges的判断的一个函数N=10要去圈10条，然后转换成一个列表，然后后面就把这个条形图，这个条形图呢，本质上它还是用的这个瓣对象，这个瓣儿呢，其实是柱形图，那柱形图就是竖着的，条形图就是横着的，那它是怎么横过来的呢？关键还是就是这一句代码，Reversal access.

那这个柱形图就能变成横向的条形图了啊，其他的这个配置项都跟呃柱形图的是一样的。啊，大家可以细看一下，这个就不再细说了，这个条形图最终出来的一个效果啊，我们来看一下啊，它就是这样一个效果，就是这个所有电影里面评论数最多的10部电影，嗯，我们来看一下这个开关。有一个动态交互的效果好，下面看这个饼图。这个是针对评论内容的一个一句话评论的饼图，那这个饼图呢，是一个情感分析的过程，把情感分析的结果画到饼图上，所以首先做一个情感分析，那由于这个一句话短评全都是中文的评论啊，我们国内的一些评论，所以这里采用的是snow NLP这个库来做的情感分析，呃，情感得分值如果小于0.4，判定为消极。

0.4和0.6之间判定为中性啊，如果大于0.6判定为积极啊，每每一种，呃，情感类型这里都做了一个计数统计结果就是为了方便后面的画饼图占比。那同样这里我会把这个情感分析的结果保存到一个Excel里面啊，咱们来看一下这个。Excel的结果，那这个Excel打开之后呢，就是这样的，这个情感判定的结果，每一条针对每一条这个comment的评论，嗯，打了一个情感得分，这就是情感得分值，那最后一列是根据这个情感得分值的分布区间划定的一个情感判定的结果，结论就是这样，然后我们接着看代码，后面就是针对这个情感分析的分布画一个饼图，那这里采用的是派1XS里的派对象啊，宽度高度啊，图像的ID啊，Data塔派2就是把数据这个计数的结果，呃，传入到这个列表里面。

那这里有一个呃配置像Rose type videos, 就是根据半径来展示为南丁格尔图，这样就是图形看上去比较好看，效果比较好，我们来看一下最终这个饼图的效果啊，在这里。你打开看一下这个丙图啊，这个丙图呢，就是这个啊，这个叫南丁格尔图式的丙图，那这个开关呢都可以。

打开和关闭有一个动态交互的效果，这就是整个的饼图。然后继续看这个柱形图，评价数分段统计的一个柱形图，那这个柱形图呢，依然是采用的这个bar儿对象，那既然是评价数的分段，那我们先来对这个评价数进行一个切割啊，先设置一个分段，然后每个分段的一个标签，然后用判断这个cut函数来进行数据的切割啊，切割的结果用value cut来统计一下个数，然后就可以画这个柱形图了，那这个柱形图呢，也是设置了一些这个设置像，那最后来看一下这个评价书分布的柱形图，这个柱形图呢，就是这样一个效果。

那我们可以看到。呃，这个评价数量在50万到100万之间的电影是最多的，有112部电影啊，评价数在10万以下的电影，嗯，只有一部电影，大概的看看一下这个分析结果，那这个动态交互效果就是这样的。我们接着看这个最后一个散点图，进入到函数块看一下这个散点图呢，其实呃，这个专业名称叫做涟漪散点图effect scter, 这个跟普通的散点图有点区别，就是它有一个动态交互的效果，一会儿我们来看一下这个，直接用这个呃，横轴的数据跟Y，呃，跟Y轴的数据来传进来就可以了，也是做了一些设置项吧，我们来看一下这个最后的效果。

那这就是一个涟漪三点图啊，大家可以细心的看一下，这个上面的这个小圆点像水面的波纹一样正在浮动，所以它叫涟漪散点图，那普通的散点图这个是没有浮动效果的，然后光标放上去也有一个十字交叉，显示X轴Y轴的数据的一个动态交互效果，看上去比较明显。啊，这就连一三点图。那最后就是一个呃，生成临时大屏渲染一下。我们来跑一下这个代码，实时的演示一遍，今天是4月28号。

好了，代码已经直接完成了，我们来打开这个临时大屏生成的文件，4月28号。你这个临时大屏打开之后就是这样的，把每一个图表一个纵向的排列，排列到了这个页面上，那我们现在就可以拖动来组合大屏了。应该组合大屏的时候，大家可以根据自己的审美啊，或者说针对自己对数据的理解，怎样设计这个大屏，把哪个图表放在什么位置比较合理。就我就先随便的放下了。我说一下这个数据放到中间来，清图放到左左上角来，那这个就需要这个对齐，这个就比较花时间，我这里就稍微对齐一下就行了，大概就是这样。

呃，等会等我们把这些都对齐之后呢，然后点一下上方这个保存配置文件，它会生成一个这次的文件，比如说他把这个重面一下。把这个JS文件保存到当前的目录下。然后呢，也就是最后一句。呃，生成这个最终的大屏。生成最终的大屏的时候，我们把这个这个config文件。改成刚才这个生成的JS文件。也就是说，从。呃，Source, 呃，原是原数据是这个刚才的临时大屏文件，但目标数据是最终的大屏文件，我改一下名字，然后运行一下代码。

好，代款执行完成，这个大最终的大屏文件就生成了，我们打开来看一下。那这就是整个的一个最终生成的大屏文件。就是这样的一个效果图，数据表格，条形图。祝小奴。点读。就是连一三点。由于我刚才比较匆忙，没有对齐，这里有一些缝隙啊，大家在做的时候比较要细心一点，把这个对齐，然后最后出来的就是这个大屏幕的效果了。那同时呢，我在代码的最上方也实现了一个这样的逻辑，就是把这个每个图表的主题颜色做了一个配置项，呃，S.

嗯，做了五五种颜色的例子。那但是呢，这种数据表格的它的啊，它是不支持设置颜色主题的，所以我这里用手工的方式把这个呃，颜色的数值16进制的数值做一个转换，那这样的话就能保证整个大屏的一个颜色统一例我们来看一下差的这个颜色主题的计算效果。那就是这样的一种颜色主题，那再看一下这个duck，也就是暗黑色的。那它就是这样的一种效果。再看一下这个了。ESOS的效果。用这个。淡黄色的这种效果。你再看一下这个coco，这个狗皮是偏紫色的，就是这种效果。

那最后看一种这个老漫体浪漫色的一个颜色主题，也是比较偏黄的这种主题。那大家在做的时候呢，可以灵活的来替换，就是直接来更换这个代码，因为它里面内置了你看这么多种主题，大家随意的替换都可以。就是根据自己的审美或者对数据的理解，看看用什么样的颜色主题最合适。好，这就是整个大屏的一个讲解。谢谢大家。