我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

兔年新春到，对大家的祝福词太多，于是制作成词云来展示，再变成兔头轮廓符合兔年气氛，兔头很丑萌，祝福很真诚。

接下来我们来看一下如何实现这个祝福词云。

准备

技术栈

我是通过vue+echarts+echarts-wordcloud,技术栈我们选择自己熟悉的，主要还是echarts-wordcloud需要我们单独去下载npm包，需要注意的是echarts4.x版本与echarts-wordcloud1.x版本对应；echarts5.x与echarts-wordcloud2.x对应。

轮廓图

为了让词云展示成兔头轮廓，我们需要准备一张轮廓图，图片最好是纯色的，这里推荐大家去iconfont找一张兔子形状的icon，下载成png即可。然后找一下图片转换工具，转成base64编码格式。

实现

1.创建容器：跟实现普通图表一样，首先我们创建一个div容器，引入echarts与echarts-wordcloud

   import echarts from 'echarts'
   import 'echarts-wordcloud'

2.配置项：我们根据wordcloud属性进行对应配置即可，最重要的是轮廓图的实现，我们需要new Image()，将src设置为图片地址，将markImage属性设置为创建好的image。

      const wordCloudClolor = ['#c00000','#c02000','#ff0000','#ff2000','#ff0020','#ff0040']
      const maskImage = new Image()
      maskImage.src = 转为的base64编码
      this.chart = echarts.init(document.getElementById(this.id))
      maskImage.onload = () => {
        this.chart.setOption({
          backgroundColor: '#e6e9f0',
          series: [
            {
              type: 'wordCloud',
              // 用来调整词之间的距离
              gridSize: 2,
              // 用来调整字的大小范围
              sizeRange: [10, 25],
              // 用来调整词的旋转方向
              rotationRange: [-90, 90],
              //必须要设置该属性才能生成想要的轮廓
              maskImage: maskImage,
              // 随机生成字体颜色
              textStyle: {
                normal: {
                  color: function() {
                    // Random color
                    const r = Math.floor(Math.random() * wordCloudClolor.length)
                    return wordCloudClolor[r]
                  }
                }
              },
              //宽 高
              width: '180%',
              height: '120%',
              // 展示的数据 由name跟vlaue组成
              data: [
               {name:新春快乐，value:2.0}
              ]
            }
          ]
        })
      }

如果词云填充的兔子轮廓效果不明显，我们可以调整width、height、gridSize、sizeRange达到想要的效果。

总结

大家可以根据自己的喜好去设置想要的展示的轮廓颜色等，要注意版本的对应及轮廓图的实现。词云的祝福送给大家，兔年大家天天开心！