【vue项目使用echarts词云图】

注意Echarts5.0的版本要对应echarts-wordcloud的2.0版本，注意Echarts4.0的版本要对应echarts-wordcloud的1.0版本，版本不对应可能会出现报错或者不显示的问题。

第一步npm安装词云包（echarts官网没有可能的上github找）没有指定版本，默认新版

npm install echarts-wordcloud

第二步引入词云图文件

   import "echarts-wordcloud/dist/echarts-wordcloud"

第三步使用

showEeharts(data) {
      var chart1 = echarts.init(this.$refs.aboutkeyWords);//$refs是使用vue的时候在标签使用ref属性ref='aboutkeyWords',这个是获取Dom节点的作用
      // 数据处理成词云图的数据格式，词云图的格式是[{name:string,value:number}，{name:string,value:number}],如果后端给的格式不同还要进行这部分的操作
       var newObj = Object.keys(data).map(item => ({
              name: data[item].STRVALUE,
              value:  data[item].IRECORDNUM,
       }));
       console.log(newObj)
			var chart1Option = {
          // backgroundColor: '#fff', //F7F7F7
          tooltip: {
            show: true,
            formatter: '{b}',
            textStyle: {
            fontSize: 48,
          }
          },
          series: [{
              // name: '相关行业',//数据提示窗标题
              type: 'wordCloud',
              sizeRange: [120, 35],//画布范围，如果设置太大会出现少词（溢出屏幕）
              rotationRange: [0, 0],//数据转动角度范围
              shape: 'rectangle',
              textPadding: 0,
              autoSize: {
                  enable: true,
                  minSize: 6
              },
              textStyle: {
                  normal: {
                      color: function() {
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  // 阴影效果
                  // emphasis: {
                  //     shadowBlur: 10,
                  //     shadowColor: '#333'
                  // }
              },
              data: newObj,
          }]
      };
      chart1.setOption(chart1Option);
    },

根据需求添加修改series中的属性