本文已参与「新人创作礼」活动，一起开启掘金创作之路。

因为一些原因，Echarts现在的官方最新版本已经没有词云图了，所以需要用到之前的一些文件进行词云图的绘制。这里对词云图的绘制流程做个记录并保存下词云图所需的文件。需要的自取。

源码地址

gitee

1.引入`echarts3.js`和`echarts-wordcloud.js`

这个是之前版本的文件，必须有这两个才能写出词云图

2.确定词云的形状

我做的两个图，一个是默认的形状，一个根据图片自定义的形状。

其中控制词云图形状的变量在

option下的series中的shape变量(基本形状)

option下的series中的maskImgae变量(通过自己的图片定义，这里是中国地图)

要注意的是maskimage需要base64的转换或者图片的url格式。本地格式的图片不太好使。

本地图片的使用方法大家可以试试，反正我是没成功。

当时没有服务器可以上传图片，就用了base64的转换，事实上很臃肿。

Postimages — 免费图片托管 / 图片上传这个网站可以免费上传图片。大家可以用这个。

3.编写基本的html语句。

<!DOCTYPE html>
<html lang="en">

<head>

    <script src="js/echart3.js"></script>
    <script src="js/echarts-wordcloud.js"></script>

    <title>Echarts案例——词云图</title>
</head>

<body>
    <div style="display: flex;flex-direction: row;">
        <div style="height:600px;width:40%;" id="word_cloud"></div>
        <div style="left:40%;height:600px;width:50%;" id="china_word_cloud"></div>
    </div>
</body>
<html>

词云图中一些字段的含义。

一般来说我们最关注的就是词的大小设置和颜色的配置。

    sizeRange: [10, 60],
    rotationRange: [0, 0],
    textPadding: 0,

sizeRange控制字体的变化上下区间rotationRange控制词的角度，textPadding控制词之间的间隔 color用来控制颜色，这里就是对列表中的颜色进行循环了

最后效果

就是上面的样子了。

Echarts词云图