使用Python＋Stata＋ECharts描述那些不可描述的关系（下）

首先让我们来了解一下Echarts

第三步：了解ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

显然对于我们，这段话很难理解。不过完全没关系，我们画出来图就行。

左侧是这个图的绘图的核心代码，显然这个不是Stata的绘图代码，不过不用担心，我们只要看懂这个代码的构成，然后用Stata的file命令写出来这个文件就可以了。

注意这个代码只是核心代码，我们还需要一个框架来装这个核心代码。为了方便构建这个代码，我特意写了一套命令，我称之为Stata+ECharts绘图规范。

在Stata中运行下面的命令就可以安装这套命令了，这套命令还在探索中，所以我还没有写help文件，但是核心的3个命令已经可以使用了。

另外你也可以使用github命令安装：

推荐使用github命令安装。

这个命令安装的时候会把一个js.zip文件下载到系统文件夹里面，使用的时候会被调入当前工作目录。这个文件夹里面包括了ECharts绘图常用的所有的js文件。

这套命令的一个简单介绍在这里有http://www.czxa.top/posts/41992/。

然后我们开始使用这个规范绘制这幅图（新打开一个do文件）首先我们看一下这套命令如何使用，下面的这套命令就可以构造一个ECharts绘图框架了：

运行一下看看我们能得到什么：

1-6行是开头，7-17行是基础的js文件，18-23行是主题js文件，34-39行是结尾，这个时候我们把ECharts网站上的那个模板的中间代码拷贝到29-33行的中间位置，然后打开这个html文件这个图就出来了！！！！

但是这个图不是我们今天要画的图，我们观察一下核心代码的结构：

这是31-56行，这里面最主要的是title段，控制标题、标题背后的链接、副标题、副标题背后的链接以及标题的位置的。

这是57-90行，是类别。

108-1226行是绘制网络图中的点的，这些点有表示校区的点、表示学院的点以及表示专业的点，还有一个表示学校的点。其中表示专业的点要注明类别在那个学院。其中name表示该点的名称，symbolSize表示该点的大小，draggable表示该点是否可以拖拽，这里的value可以用来表示该点有几个分支，但是这里我是用来表示该点对应的校区或学院下面有几个专业。

1277-2263行是用来绘制连接线的。

然后是最后一部分用来写类别和结尾等。

现在我们已经了解了ECharts的绘图代码结构，就可以绘制我们的社交网络图了。

第四步：绘制社交网络图

接下来我们就继续在那个中间写我们的核心代码：

我们首先来构想一下这幅图。我们现在有的是两个人的好友列表，那么我们需要画两个人对应的点，然后每个人有很多好友，我们可以绘制每个好友的点，然后按照类别连接这些好友和两个人，所以类别是“我”和“笑笑”。

首先我们写标题和类别：

到这里大家可能手已经非常疲劳了，因为一行行的复制粘贴非常痛苦了，友情提醒，Sublime Text3里面有快捷键可以同时选中多行粘贴，Mac系统里面是按住Command选中多行，然后Command+v粘贴。下面继续：

下面就是写绘制每个点的代码了：

首先绘制每个微信好友的点：

然后绘制我和笑笑的大点：

再然后是连接线：

最后就是类别了：

嗯，还有一些剩余的：

来，我们运行一下试试，打开写出来的html文件：

完美！

这些就是我的好友了：

是不是非常炫酷，再看看代码量，加上注释也就100来行，实际代码不到100行，是不是非常简单。而且大部分还都是直接复制粘贴的。所以，快试试自己的吧，如果遇到了问题可以留言与我交流哦。

最后我们可以思考这种绘图方法的实现过程，这种绘图方法的特点就是我们不必关心图是如何绘制出来的，我们只要用Stata把数据整理成需要的样式即可。而且有大量的模板可以供我们模仿。事实上，这样的图表库还有很多，蚂蚁金服也推出了自己的AntV可视化方案，其他的还有Highcharts、D3.js、Google的等等，不过我还是决定百度的ECharts做的最好！