图表太丑怎么破，ECharts神器带你飞！

1、前言

在本专栏或文集中，我曾屡次使用ECharts绘制图表、进行可视化，也渐渐积累了30多个实例，本文对此前用过的全部图表和代码进行整理并分享，以给想绘制精美图表的人一点绵薄的帮助。其中所有实例已上传ECharts3官网的我的主页，若是以为网页上一个个代码查看太麻烦，可去微信号：牛衣古柳（ID：Deserts-X）后台自取，所有代码和原图轻松到手，妈妈不再用担忧你的图丑破天际了，（逃）。

2、喵喵喵

2.一、bug/词云/韦恩图

全部实例均是参考官网的做品实现的，本人对JavaScript此外无过多涉猎，如有不规范的地方，请批评性看待。实例中涉及动态交互的部分可能会有莫名其妙的地方，由于此前都是为了拿到静态图表，若是你也只是想拿个图，那问题却是不大。

词云不是ECharts绘制的，而是由下面的网站生成的，可选择多个主题、配色、形状等等。

在线词云生成网站：HTML5 Word Cloud（有点卡，布局也要多调试）

韦恩图只能在ECharts2里运行成功，故没有搬到ECharts3里：

2.二、JavaScript语法

“//”：可注释掉一行代码，相似python中的“#”；

“/*....*/”：可将中间多行、整块的代码注释掉，相似python里的三引号（'''....'''）；

toolbox：工具栏。内置有导出图片（saveAsImage），数据视图（dataView），动态类型切换（magicType），数据区域缩放（brush），重置（restore）五个工具。均在图表的右上角，导出图片均添加了，其余不须要的能够用“//”注释掉。

其余内容，可参考官网“配置项”详细内容，新手能够对照简单的图表实例，一点点啃。

2.三、教程

慕课网视频：《Echarts3.0入门基础与实战》

W3Cschool：《ECharts教程》

以上教程都没怎么完整看过，仍是推荐新手简单熟悉后，对照官网实例进行钻研。其中ECharts有2.0版和3.0版：ECharts2 官网：实例、ECharts3 官网：实例。其中，官网实例里图表不少，点开可能会卡，+10s 就行了......

3、实例

讲了这一车的话，对于不明真相的读者来讲，可能最好奇的就是到底都有哪些图表呢，到底能把本身丑爆的图碾压到什么程度呢，如下有针对性的罗列下部分实例和对应的文章：

3.一、《爬取张佳玮138w+知乎关注者：数据可视化》

3.1.1 金字塔图

备注：张佳玮138万+知乎关注者的分布状况。

注意：设置series里的min和max为数据集的最小值和最大值。缺点是上几层文字显示不佳。

连接：gallery.echartsjs.com/editor.html…

3.1.2 柱形图和饼图（组合图）

备注：张佳玮138万+知乎关注者之100+关注者的性别状况。

注意：组合图只需在series下面多加几个“{...}”的数据集，而后移动到合适位置进行展现便可。本实例本来是ECharts2里的，局部修改后也搬到ECharts3里的。此外每一个实例都可“切换主题”，改变配色方案。

连接：gallery.echartsjs.com/editor.html…

3.1.3 分布地图

备注：张佳玮138万+知乎关注者之1w+关注者国内分布状况。

注意：绘制时须要加载地图脚本（/dep/echarts/map/js/china.js）。也须要将手头的城市数据转换成对应的经纬度。

连接：gallery.echartsjs.com/editor.html…

3.1.4 南丁格尔玫瑰图

备注：张佳玮138万+知乎关注者之Top20学校和行业状况。

注意：南丁格尔玫瑰图有面积模式和半径模式，具体区别有待专业人士指导，本身彻底是那么好看用的那个。

连接：gallery.echartsjs.com/editor.html…

备注：张佳玮138万+知乎关注者之Top20公司和职业状况。

连接：gallery.echartsjs.com/editor.html…

3.1.5 饼图

备注：张佳玮138万+知乎关注者之认证信息。

注意：内圈和外圈数据要一致。外圈做为内圈的细分。

连接：gallery.echartsjs.com/editor.html…

3.1.6 散点图

备注：张佳玮138万+知乎关注者之优秀回答者贡献状况。

3.二、《爬取老树画画所有微博数据：三千诗与画》

3.2.1 日历热图（calendar heatmap）

备注：老树画画历年发布微博状况。

连接：三年图：

gallery.echartsjs.com/editor.html…

gallery.echartsjs.com/editor.html…

一年图：gallery.echartsjs.com/editor.html…

3.2.2 散点图

备注：老树画画微博之评论、转发与点赞状况。

注意：可与上面单组数据对照，看看两组数据时对应的代码异同之处。

连接：gallery.echartsjs.com/editor.html…

3.三、《Gephi绘制微博转发图谱：以“@老婆孩子在天堂”为例》

3.3.1 柱形图

备注：一则微博转发数随时间变化状况。

连接：gallery.echartsjs.com/editor.html…

3.四、《个人简书一月记：数据可视化》

3.4.1 气泡图

备注：个人简书一月记之点赞分布图。

注意：此处的时间为时间戳，而非通常的小时、分钟、秒数。气泡大小表明点赞用户自身的粉丝数。

连接：gallery.echartsjs.com/editor.html…

备注：个人简书一月记之关注分布图。

注意：气泡大小统一。

连接：gallery.echartsjs.com/editor.html…

3.4.2 单轴气泡图

备注：个人简书一月记之20170827-20170829复盘。

注意：20170828当天粉丝数猛然增加，单日涨粉170人次，一样的获赞数也增加了不少，因而复盘下先后三天的反馈信息，细分到每小时的状况。ECharts里还有事件流的图表，或许更合适这类复盘，但了解的还不错。

连接：gallery.echartsjs.com/editor.html…

3.五、《简书=鸡汤？爬取今日看点数据：1916篇简书热门文章可视化》

3.5.1 柱形图和玫瑰图（组合图）

备注：简书热门文章之年度月份分布状况。

注意：相同年份设置为同一颜色，颜色选择很关键。

连接：gallery.echartsjs.com/editor.html…

3.六、《爬取简书26万+用户信息：数据可视化》

3.6.1 柱形图和饼图（组合图）

备注：简书26万用户数据之ID分布状况。

注意：指定好各部分的颜色。不然容易混乱。

连接：gallery.echartsjs.com/editor.html…

3.6.2 瀑布图

备注：简书26万用户信息之粉丝分布状况。

注意：data里总数值和净数值。前者从0开始。

连接：gallery.echartsjs.com/editor.html…

3.6.3 金字塔图和饼图（组合图）

备注：简书26万用户信息之粉丝状况。

连接：gallery.echartsjs.com/editor.html…

3.7 《个人简书两月记：数据可视化》

3.7.1 瀑布图

备注：个人简书两月记之获赞数变化状况。

注意：同上的瀑布图。

连接：gallery.echartsjs.com/editor.html…

3.7.2 折线图（一）

备注：个人简书两月记之粉丝数和获赞数每日变化状况。

连接：gallery.echartsjs.com/editor.html…

3.7.3 折线图（二）

备注：个人简书两月记之粉丝数每日变化状况。

注意：折线和横坐标没对齐，bug。

连接：gallery.echartsjs.com/editor.html…

3.7.4 折线图（三）

备注：个人简书两月记之Top5 文章获赞状况。

连接：gallery.echartsjs.com/editor.html…

4、小结

以上全部实例均已上传至ECharts3官网的我的主页，若是以为网页上一个个代码查看太麻烦，能够去微信号：牛衣古柳（ID：Deserts-X）后台自取，所有代码和原图轻松到手，妈妈不再用担忧你的图丑破天际了（逃）。