vue实现echarts-wordcloud词云图表，wordcloud参数配置列表

1、通过npm引入echarts

npm install echarts --save

2、在 main.js 中添加下面两行代码

 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts

3、在main.js中引入echarts-wordcloud.min.js

import './plugins/echarts-wordcloud.min.js'  // 根据实际地址引入

4、template代码块

<template>
  <div ref="myChart" class="wordcloud-wrapper"></div>
</template>

5、script代码块

<script>
  import wordcloud from 'echarts-wordcloud'

  export default {
    components: {
      wordcloud
    },
    data() {
      return {
        dataList: [{
            "name": "肠旺面",
            "value": 20
          },
          {
            "name": "牛肉粉",
            "value": 19
          },
          {
            "name": "丝娃娃",
            "value": 18
          },
          {
            "name": "米豆腐",
            "value": 16
          },
          {
            "name": "酥花生",
            "value": 15
          },
          {
            "name": "豆腐圆子",
            "value": 9
          },
          {
            "name": "酸汤鱼",
            "value": 9
           }
        ]
      }
    },
    methods: {
      showCyc() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart);
        myChart.setOption({
          series: [{
            type: 'wordCloud',
            sizeRange: [12, 28],
            // 每个词旋转的角度范围和旋转的步进
            rotationRange: [-90, 90],
            rotationStep: 45,
            // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
            gridSize: 8,
            data: this.dataList,
            shape: 'diamond', // 词云的形状，默认是 circle(圆形)，可选的参数有cardioid（心形） 、 diamond（菱形 正方形） 、 triangle-forward 、 triangle（三角形）、 star（星形）、pentagon （五边形）
            drawOutOfBound: true, //是否允许词云在边界外渲染
            textStyle: {
              normal: {
                fontFamily: 'MicrosoftYaHei',
                fontWeight: 'bold',
                color: function() {
                  var colors = ['#5a8ef2', '#adf8f9', '#addaf9', '#adc7f9', '#bbadf9'] ;//自定义字体颜色
                  return colors[parseInt(Math.random() * 5)]
                }
              }
            },
            emphasis: {
              focus: 'self',
              textStyle: {
                textShadowBlur: 10,
                textShadowColor: '#333'
              }
            }
          }]
        })
      }
    },
    mounted() {
      this.showCyc()
    }
  }
</script>

6、style代码块

.wordcloud-wrapper {
    height: 300px;
    width: 300px
  }

7、wordcloud参数配置列表

1、left top right bottom ：词云的位置，默认是 center；
2、shape ：词云的形状，默认是 circle(圆形)，可选的参数有cardioid（心形） 、 diamond（菱形） 、 triangle-forward 、 triangle（三角形）、 star（星形）、pentagon （五边形）；
3、gridSize ：词云中每个词的间距。
4、drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
5、width height ：词云的宽度高度，默认是 75% 80%。
6、sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
7、textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式。
8、maskImage： 词云轮廓图，白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状
9、rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。