echarts-wordcloud ——文字云制作企业标签——基础积累

最近看到同事在写文字云的效果，最终效果图如下：

使用的是echarts-wordcloud插件：

下面介绍一下使用步骤：

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>
1

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

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

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();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

完成！！！