1.`npm`安装`echarts-wordcloud`——`npm install echarts-wordcloud --save`

安装echarts-wordcloud的前提是也要安装echarts——npm install echarts --save

我这边安装的版本号如下：
在这里插入图片描述

2.页面使用`echarts-wordcloud`

由于我这边只有一个页面使用这个插件，所以可以直接局部引入使用：

2.1 `html`代码

<div class="boxEC" id="boxECD1"></div>

2.2 局部引入`echarts`和`echarts-wordcloud`插件

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

2.3 配置`options`

var myChart = echarts.init(document.getElementById('boxECD1'));
var keywords =[
    {"name":"广东省","value":100,"children":null},
    {"name":"广州市","value":80,"children":null},
    {"name":"主站前台","value":100,"children":null},
    {"name":"其他有限责任公司","value":100,"children":null},
    {"name":"工业电子","value":100,"children":null}
]
var option = {
  series: [{
    type: 'wordCloud',
    // sizeRange: 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
    sizeRange: [20, 40],
    rotationRange: [0, 0],
    //rotationStep: 每个词旋转的角度范围和旋转的步进
    rotationStep: 45,
    //gridSize:词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
    gridSize:15,
    // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
    shape: 'pentagon',
    width: '100%',
    height: '100%',
    textStyle: {
      fontFamily: 'sans-serif',
      fontWeight: 'bold',
      // 颜色可以用一个函数来返回字符串，这里是随机色
      color: function () {
        // Random color
        return 'rgb(' + [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 220)
        ].join(',') + ')';
      }
    },
    emphasis: {
      focus: 'self',
      textStyle: {
        textShadowColor: '#333'
      }
    },
    data:keywords
  }]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
  myChart.resize();
});