开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第28天，点击查看活动详情

前言

词云图的生成要比普通的图表麻烦一点，但是效果确实看起来更高大上，当我们碰到词云图的需求时，要能够游刃有余地做出来，今天我们就来看一下如何生成一个词云图。

下载

词云之所以要麻烦点，是因为echarts不能直接支持词云，要想生成词云我们需要单独引入一个库——echarts-wordcloud。这里我们用的vue2.x项目，直接用yarn或npm安装依赖就可以。

   yarn add echarts-wordcloud
   npm install echarts-wordcloud

需要特别注意的是，echarts版本是5.x需要下载echarts-wordcloud2.0版本；echarts4.x版本需要下载echarts-wordcloud1.0版本。

生成

首先我们需要在使用的页面中的引入词云，接下的操作就跟普通的echarts创建图表是一样的，获取需要生成图表的dom元素，配置chartData,最后监听窗口大小变化触发resize方法达到响应的效果。

    <div id="wordClound" style="height: 100%;width; 100%"></div>

   //引入
   import echarts from 'echarts'
   import 'echarts-wordcloud'
   //按照正常vue写法即可
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
   methods: {
            initChart() {
                const wordChart = echarts.init(document.getElementById('wordClound'))
                wordChart.setOption(this.chartOption)
                //监听窗口大小变化 做到响应，在beforeDestroy中清除
                window.addEventListener('resize', function () {
                  wordChart.resize()
                })
              }
          }

配置

上面还有一个this.chartOption就是词云的配置项，我们要熟悉一些常用的配置项：

gridSize:用来设置词之间的距离大小，数据越大间距越大。
sizeRange:用来设置词的大小范围，接收一个数组。每个词会在该范围内随机生成对应的大小，数字越大词越大。
rotationRange:用来设置词的旋转角度的范围，也是接收一个数组，生成的才会随机在该范围内进行旋转。
shape:用来设置生成的形状，可设置为星形（star）、三角形（triangele），默认为圆形（circle）。
maskImage:用来设置生成的轮廓，它可以接收图片或者icon图标，图片最好是base64格式的。
left、top、right、bottom：用来设置图形的位置，我们可以根据需要设置。
width、height:用来设置图形的宽高。
textStyle:用来设置词的样式，比如设置词的颜色等。根据上述配置项我们可以简单设置一下：

   wordCloudColor: [
                '#1890FF',
                '#2FC25B',
                '#41D9C7',
                '#FACC14',
                '#9AE65C'
              ],
   chartOption:{
      series: [
                  {
                    type: 'wordCloud',
                    gridSize: 14,
                    sizeRange: [16, 50],
                    rotationRange: [0, 0],
                    textStyle: {
                      normal: {
                        color: () => {
                          const r = Math.floor(
                            Math.random() * this.wordCloudColor.length
                          );
                          return this.wordCloudColor[r];
                        }
                      }
                    },
                    width: '100%',
                    height: '100%',
                    //数据
                    data: [
                      { name: '躺平', value: 4.5 },
                      { name: '累啦', value: 3.8 },
                      { name: '加油', value: 3 },
                      { name: '香菇', value: 2.5 },
                      { name: '领先', value: 2.3 }
                    ]
                  }
                ]
   }

总结

以上就是生成词云的步骤，首先我们要根据echarts版本去下载对应的echarts-wordclound并引入，然后根据配置项设置我们想要的样式就能得到词云图。

echarts——生成词云图

前言

下载

生成

配置

总结