一次不算愉悦的爬虫与可视化之旅

点击上方“超哥的杂货铺”，轻松关注

文章插图
本文用一个实例“还原”爱奇艺指数的两幅图表，带你学习可视化。目录安排如下：
【一次不算愉悦的爬虫与可视化之旅】两个目标效果与数据来源分析目标1：绘制播放地域分布图数据获取数据处理图形绘制优化参数遗留问题目标2：绘制明星看点曲线图数据获取数据处理图形绘制单个明星看点全部明星看点遗留问题总结

文章插图
以上是截取自官方上的介绍，来源：
。相比于基础的绘图库，的图形更加好看，支持交互式，使用也非常简便。
本文使用了爱奇艺指数工具，选取了前段时间比较火的电视剧《小欢喜》为参照，使用，尝试一步一步还原该剧的看点和播放地域分布的实际效果图，使用的版本为0.5x，(注意和最新的1.0不兼容) 。在开始之前请安装该版本，并安装相应的中国地图包。

pip install pyecharts==0.5.11pip install echarts-countries-pypkgpip install echarts-china-provinces-pypkgpip install echarts-china-cities-pypkg

本次的目标站点为，我们首先搜索关键词“小欢喜”，通过浏览器抓包的方式，获取数据，然后把这些数据进行一定的加工，方便进行调用，之后通过设置一些参数，达到理想的效果，我会详细说明每个参数对应的实际含义。后台回复“小欢喜”获取全部代码。
两个目标效果与数据来源分析
目标数据是通过json方式存储的，我们只需要使用库模拟请求，就可以很容易得到网站的源数据。本次的绘图目标主要是两个：①热度tab下的播放地域分布；② 看点tab下的明星看点分布。见下图。

文章插图

文章插图
我们从开发者模式的选项卡中找到这两个数据，并用下面的代码获取初始数据。

文章插图
目标1：绘制播放地域分布图数据获取
输出的结果如下图

文章插图
可以看出结构还是非常简单的。我们需要的数据正是data里的name和value 。
数据处理
在正式开始引入之前，需要说明一个小坑（别问我怎么知道的，简直太折磨人了）：这里的省份名不能直接使用，能够识别的地名是：北京，上海，内蒙古等形式的，不能带有后面的省，市等字，上面的数据直接绘制是没有效果的（台湾是有结果的，因为它没有“省”这个字）。数据处理的代码如下：

文章插图
图形绘制
我们的目标是一个中国地图的样式，所以需要用到的Map图形，下面是Map的文档说明：

文章插图

文章插图
这样我们就绘制出了基本的图形，如果用鼠标在地图上移动，已经能够正确显示数值了。但显然这样的图形和我们的目标差距还很大，接下来我们进行一些参数的调整。
优化参数
首先是将地图着色，需要用到参数：=True，效果如下：

文章插图
虽然颜色是有了，但是只有一种颜色，这是因为默认的颜色数值是从0-100，表示从浅到深的颜色，并且是连续的，而我们这里的“value”值显然是远大于100的。因此我们需要指定颜色的范围。使用=[21508, ]即可，该列表的值分别为的最大和最小值。修改代码如下：可以看到，颜色的填充已经出来了，不同省份有了不同的颜色。

文章插图
进一步我们注意到，目标图形中并不是每个省份一个颜色，而是好多省份显示同一种颜色，由高到低显示5种级别的绿色，颜色越深，数值越大。例如，北京是第一级别，颜色最深，江苏上海浙江是第二级别，显示同样的第二级别绿色，以此类推。读者可以在源网站上通过点击左下角的色块进行查看。
那么如何将颜色分为不同的等级呢？答案是使用=True设置为分段型(默认为连续) ，并且使用设置分段个数，如这里需要设置为5 。效果如下：

文章插图
分段的效果是出来了，但是颜色不是我们想要的，我们需要使用
指定颜色的值。

文章插图
指定了后，分段效果出来了，现在的问题是，它用浅色表示值大的，深色表示值小的，所以我们可以在指定颜色的时候进行一个反转，即：
visual_range_color=['#3DC768', '#57D284', '#7ADDA0', '#A0E7BC', '#C9F1D9'][::-1]#表示将列表倒序
另外，目前的分段值是自动计算出的，我们还可以使用参数指定每一分段的颜色范围。max值是本段的最大值，min为本段的最小值，我这里设定min为低一级段的最大值加1 。label可以指定色块右侧的标签，好像去不掉，如果不指定的话就会显示数值。

pieces=[{"max": 76318672, "min": 54372809, "label": "高"},{"max": 54372808, "min": 46136120, "label": "中高"},{"max": 46136119, "min": 30790974, "label": "中"},{"max": 30790973, "min": 15530879, "label": "中低"},{"max": 15530878, "min": 21508, "label": "低"}]

左下角的图例里low和High的值也可以通过来指定，可以指定为空，也可以指定为“高”和“低”
我们继续把图中每个省的红点去掉一起看效果。参数控制是否显示红点，默认为Ture ，我们改为False即可。最终代码和效果如下：

文章插图
对了，你可能会问我怎么知道这些颜色的16进制值的，我告诉你，我一个一个量的(捂脸…为了此文操碎了心...) ，用了一个软件叫“屏幕任意取色器”，可以将鼠标经过的点的颜色取下来，告诉你数值。

文章插图
遗留问题
目标图形里，移动鼠标到相应的省份会显示其省份名字和排名，这个我查了一些资料，但是还不太明白怎么做。好像是应该通过回调函数解决，但试了一下没有成功，如果你知道怎么做，欢迎与我交流~
到此，我们基本完成了播放地域的还原(虽然没有100%) 。篇幅较长，但代码不多，希望对您有所帮助。
目标2：绘制明星看点曲线图数据获取

文章插图
该图形共涉及10位明星在一共49集的看点，我们主要使用的Line图形来实现，先实现1位明星的，再进行堆叠。从图中可以看出，如果仅显示黄磊的曲线，发现它不是简单的按照数值的曲线，而是沿着X对称的，这是需要注意的。

文章插图

文章插图
数据处理
和目标1一样，首先我们需要准备数据，原始的数据中，10个明星的值是放在一起的，每49个一组，一共490个。
我们把它整理成key-value的形式，其中key是明星的名字， value是一个list，包含他每一集对应的数值。

文章插图
图形绘制
接下来绘图，我直接给出最终的代码，并附上各个参数的含义，读者可以像上面那样一步一步的进行添加，看看这个过程中的变化。我们用到的Line图的文档说明如下：

文章插图
单个明星看点

文章插图
单独列一些几个重要的参数：

is_smooth=True, #曲线平滑显示，默认是Falseis_fill=True, #是否用颜色填充，设置为True时，需要指定area_colorarea_color=colors[index], #同上文，也是使用软件测量出来的symbol=None, #去掉曲线上的数据点，否则在拐点处会有一个小圈area_opacity=0.4, #设置透明度，不设置的话，出不来填充效果is_datazoom_show=True, #设置横轴组件可缩放line_opacity=0, #设置曲线的透明度，0为完全透明，表示无轮廓datazoom_range=[0, 49], #设置缩放的范围is_splitline_show=False,#去掉默认的网格线，更接近于原图is_yaxis_show=False, #不显示y轴xaxis_interval=9,#设置X轴标签的显示间隔,即1,11,21...xaxis_min=0,#X轴的最小值xaxis_max=49,#X轴的最大值

文章插图
我们用上面的代码画出了黄磊的看点曲线图，可以看到与目标图大体上是一致的，但也有一些细节的差距，比如横轴显示的设置，逢10处虚线的设置，拖动条颜色的设置等。这几点我没有找到好的解决方案，读者朋友可以思考尝试一下。
全部明星看点
我们只需要把上面代码的break去掉，并加上颜色的配置(同样是一个一个测量出来的)，就可以显示全部的曲线。效果如下面图所示：

文章插图
需要指出的是，我之前考虑过添加参数为True ，但是发现它会进行累加(可以通过设置显示Y轴来验证)，这样出来的数值是不正确的，而如果不设置这个参数，又会在重叠时显示多种颜色，暂时还没想到好的解决方案。
你可能发现最终的图形形状轮廓和目标图形不一样，这个我也不知道是什么原因，但检查数据过后是没问题的。不过原网站似乎是存在bug的，例如，黄磊在37集和49集的数值分别为1628和1322 ，但是在原网站的图形中，却是49集的图形更高一些(不过单独显示黄磊的时候，没有问题，形状也和我的代码结果一致，其他明星也是正确的) 。也许还存在其他我没有发现的点，这可能也是造成差异的原因吧。如果你有更好的想法，欢迎与我交流。

文章插图
遗留问题
拖动轴的颜色和标签设置，逢整十的数值虚线绘制，如何在颜色重叠时显示一种颜色(颜色堆叠)
总结
至此我们尝试还原了爱奇艺指数上小欢喜这部剧的播放区域图和明星看点图，虽然没有做到100%的还原，也有很多问题没有解决，所以我觉得“不算愉悦” 。但在这个过程中学习了的使用，理解了其参数的含义。可以看到虽然已经十分强大了希望对看到这里的你有所启发！

文章插图
以清净心看世界；
用欢喜心过生活。
超哥的杂货铺，你值得拥有~