本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization引入扩展包：
新版ECharts的图表中没有词云图功能（ECharts在并入Apache时删除了词云图功能），要想在ECharts中绘制词云图，需要使用到一个扩展包，该扩展包是ECharts开发团队开发。
打开如下GitHub页面，下载dist文件夹下的echarts-wordcloud.js文件。
1https://github.com/ecomfe/echarts-wordcloud/
然后在html文件中引入该扩展包：
1<script type="text/javascript" src="js/echarts-wordcloud.js"></script>
生成词云图：
首先是要生成相对应的数据：
词云图的数据内容数组，要求每个数组项为一个对象，name为文本，value是该文本的权重：
1[{
2 // 数据项的名称
3 name: '文本1',
4 // 数据项值8
5 value: 10
6}, {
7 name: '文本2',
8 value: 20
9}]
假设我们现在有一个词频统计结果的excel文件（文本来源：《中华人民共和国和俄罗斯联邦关于深化新时代全面战略协作伙伴关系的联合声明》），可以使用ECharts官方提供的表格工具（资源→表格工具）将其转换为符合要求的数据结构。
然后只需要将series中的type设置为"wordCloud"，并设置词云图的形状shape。
可选形状包括以下几种：circle (默认)、cardioid、diamond、triangle-forward、triangle、pentagon、star。
代码如下所示：
1 // 定义数据
2 var data = [
3 { name: '双方', value: 128 },
4 { name: '合作', value: 76 },
5 { name: '发展', value: 40 },
6 { name: '推动', value: 37 },
7 { name: '安全', value: 33 },
8 { name: '加强', value: 33 },
9 { name: '国际', value: 32 },
10 { name: '国家', value: 30 },
11 { name: '反对', value: 30 },
12 { name: '领域', value: 29 },
13 { name: '支持', value: 26 },
14 { name: '维护', value: 25 },
15 { name: '全球', value: 24 },
16 { name: '和平', value: 23 },
17 { name: '地区', value: 23 },
18 { name: '稳定', value: 21 },
19 { name: '共同', value: 20 },
20 { name: '问题', value: 19 },
21 { name: '深化', value: 18 },
22 { name: '继续', value: 18 },
23 { name: '组织', value: 18 },
24 { name: '两国', value: 17 },
25 { name: '交流', value: 16 },
26 { name: '机制', value: 14 },
27 { name: '开展', value: 14 },
28 { name: '俄方', value: 14 },
29 { name: '积极', value: 14 },
30 { name: '持续', value: 13 },
31 { name: '原则', value: 13 },
32 { name: '联合国', value: 13 },
33 { name: '政治', value: 12 },
34 { name: '对话', value: 12 },
35 { name: '世界', value: 12 },
36 { name: '促进', value: 12 },
37 { name: '包括', value: 12 },
38 { name: '重申', value: 11 },
39 { name: '实现', value: 11 },
40 { name: '解决', value: 11 },
41 { name: '战略', value: 10 },
42 { name: '协作', value: 10 },
43 { name: '关系', value: 10 },
44 { name: '具有', value: 10 },
45 { name: '建设', value: 10 },
46 { name: '倡议', value: 10 },
47 { name: '应对', value: 10 },
48 { name: '关切', value: 10 },
49 { name: '呼吁', value: 9 },
50 { name: '协调', value: 9 },
51 { name: '社会', value: 9 },
52 { name: '治理', value: 9 },
53 { name: '框架', value: 9 },
54 { name: '投资', value: 9 },
55 { name: '落实', value: 9 },
56 { name: '平台', value: 9 },
57 { name: '俄罗斯联邦', value: 8 },
58 { name: '中华人民共和国', value: 8 },
59 { name: '全面', value: 8 },
60 { name: '条约', value: 8 },
61 { name: '进一步', value: 8 },
62 { name: '主权', value: 8 },
63 { name: '经济', value: 8 },
64 { name: '提升', value: 8 },
65 { name: '使用', value: 8 },
66 { name: '进程', value: 8 },
67 { name: '相关', value: 8 },
68 { name: '金砖', value: 8 },
69 { name: '核武器', value: 8 },
70 { name: '指出', value: 7 },
71 { name: '对抗', value: 7 }
72 ]
73
74 // 设置图表的参数
75 var option = {
76 title: {
77 text: "词云图",
78 },
79
80 // 数据系列
81 series: [{
82 name: "词云图",
83 type: "wordCloud",
84 shape: "star",
85 data: data,
86 }],
87 };
可视化结果如下图所示：
图表样式设置：
在扩展包的GitHub页面可以看到给到的样式设置参数，以下是一些常用参数：
| 参数 | 描述 |
left/top/width/height/right/bottom |
通过设置左/上/宽/高/右/下来定位词云图的位置。
默认放在中心位置，尺寸为75% x 80%。 |
|
数据中的值映射到的文本大小范围，默认为[12, 60] |
|
文本旋转范围，默认为[-90, 90] |
|
文本步进度数，默认为45，即文本角度以45度变化 |
|
全局文本样式，fontFamily字体、fontWeight字体的粗细、color颜色等 |
gridSize |
网格大小，用于设置文本间距，网格大小越大，字与字之间的差距就越大 |
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "词云图",
5 },
6
7 // 数据系列
8 series: [{
9 name: "词云图",
10 type: "wordCloud",
11 shape: "star",
12 left: 'center', // 放在中心位置
13 top: 'center',
14 width: '70%', // 词云显示宽度
15 height: '80%', // 词云显示高度
16 gridSize: 10, // 文本间距
17 sizeRange: [12, 60], // 词云中文本字体大小范围
18 rotationRange: [-90, 90], // 文本旋转范围
19 rotationStep: 45, // 文本步进度数
20 // 全局文本样式
21 textStyle: {
22 fontFamily: 'sans-serif', // 字体
23 fontWeight: 'bold', // 字体的粗细
24 // 通过回调函数随机生成颜色
25 color: function() {
26 // Random color
27 return 'rgb(' + [
28 Math.round(Math.random() * 160),
29 Math.round(Math.random() * 160),
30 Math.round(Math.random() * 160)
31 ].join(',') + ')';
32 }
33 },
34 // 高亮的图形和标签样式
35 emphasis: {
36 focus: 'self', // 在高亮图形时，只聚焦（不淡出）当前高亮的数据的图形
37 textStyle: {
38 textShadowBlur: 10,
39 textShadowColor: '#333'
40 }
41 },
42 data: data,
43 }],
44 };
可视化结果如下图所示：
使用自定义图形生成词云：
通过maskImage参数可以设置自定义图形来生成词云图。
例如，此次使用如下图形来生成词云图：
需要先定义一个Image对象并指定图片路径：
1 // 创建一个新的Image对象
2 var maskImage = new Image();
3 // 定义图片的路径
4 maskImage.src = "image.png"
然后在series中通过maskImage参数指定自定义图形：
1maskImage: maskImage,
然后需要做以下调整，表示在加载图片的时候显示图表：
1 // 使用指定的配置项和数据显示图表
2 maskImage.onload = function() {
3 myChart.setOption(option);
4 }
要想在浏览器中显示图表，需要使用flask框架来启动（将以下代码保存为run.py文件）：
这里就不做过多介绍，只要确保词云图的html文件名为index.html即可。
1from flask import Flask,render_template
2app = Flask(__name__,
3static_folder = '',
4template_folder = '')
5@app.route('/')
6def hello_world():
7 return render_template('index.html')
8if __name__ == '__main__':
9 from werkzeug.serving import run_simple
10 run_simple('127.0.0.1', 8080, app)
此时在词云图所在文件夹下运行run.py文件，在浏览器打开如下地址即可查看词云图效果：
1http://127.0.0.1:8080
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
