实践|自定义形状的词云

---

theme: channing-cyan

highlight: a11y-dark

实践|自定义形状的词云

一、前言

tips1：我捣鼓半天才发现，keepAspect 保持maskImage的纵横比或1:1的形状,这个选项是在 echarts-wordcloud 2.1.0 才支持，今天是2022年4月22日，目前默认安装的版本号仍是2.0.0，2.1.0还是beta版本，npm 安装需要指定版本。

tips2：最好给容器元素显性的写一个合适的高度,而且这个版本(@2.1.0beta)似乎对高度大小要求，这可能和使用了keepAspect:true,以及背景图宽高有关，但我并不确定，因为我给容器元素写height：200px时，词云没能正常渲染出来，没报错，改为height：400px词云才能正常渲染出来，反复测试多次，依然如此。

此外，以前就安装了 echarts，现在才安装 echarts-wordcloud 的尤其需要注意， echarts-wordcloud 版本为2的对应的是 echarts 版本为5系列， echarts-wordcloud 版本为1的对应的是 echarts 版本为4的系列。

使用 echarts-wordcloud 生成的词云，能达到效果：

1.色彩：不同词语使用不同颜色。

2.排版：还可以根据按照图形的形状排版， 例如爱形状，大树现状，小jin鱼等，你提供普通的png图形，echarts-wordcloud 就会自动按照图形范围分布词语。

3.大小：按照词语不同的系数频率值，生成不同的字体大小效果。

4.其他

二、效果图

从左到右，图1：心形背景效果图，图2：小jin鱼背景效果图

三、使用实践小结

1.安装 echarts 和 echarts-wordcloud

安装方式一：可以是 npm 或 yarn 导入

``` // 此时 echarts-wordcloud 的2.1.0还是beta版本， // 但想启用keepAspect，所以指定@2.1.0-beta版本 npm 命令安装 npm install echarts -s npm install echarts-wordcloud@2.1.0-beta -s

yarn 命令安装 npm install echarts -s yarn add echarts-wordcloud@2.1.0-beta -s ```

安装方式二：也可以是脚本引入的方式

```

```

2.引入 echarts 和 echarts-wordcloud

tips：可以在 入口文件做全局引入，例如在 main.js 引入，也可以在局部按需引入， 这边建议在使用到的地方，按需引入即可。

import * as echarts from 'echarts'; import 'echarts-wordcloud';

四、完整 demo 示例

```html

测试 词云

```