echart-词云图

词云（world-cloud）功能已经在echart官网上找不到相应的简介或者介绍了，然而我们又想用echart中的词云怎么办呢，那么我就分享一下我的经验。

一、引入echart.js
⚠️ 在使用的过程中发现公司的项目中，已经存在的版本为echart4，但是echart4中不支持词云功能，总是报以下的错误：

然后就引入了echart3，但是一个项目内如何使用两个echart版本呢。

1. 下载echart3版本的js，然后将js内的’ehcarts’全局替换成‘echarts3’
2. 在index.html中引入

<script src='assets/js/echart3.js'></script>

3. 在所需要用到的页面声明
   注意：该处是ts的语法，要是纯js的话，直接跳过这步

declare const echarts3: any;

二、引入echarts-wordcloud.js
在index.html中，echart3.js的后面引入词云js

<script src="assets/js/echarts-wordcloud.js"></script>

相关的echart和echarts-wordcloud js文件：
链接: https://pan.baidu.com/s/1VuqRn7IcWjO78A4PdrXbeQ 提取码: iekh

三、构建词云

1. 在页面搭建词云所在的位置

<div id='main' style="width: 100%; height: 300px"></div>

2. 设置词云option

 const chart = echarts3.init(document.getElementById('main'));
    const keywords = [
      {name: '科技', value: 22199},
      {name: '卫生', value: 10288},
      {name: '教育', value: 620},
      {name: '文化', value: 74470},
      {name: '工业', value: 12311},
      {name: '农业', value: 1206},
      {name: '能源', value: 4885},
      {name: '旅游', value: 22199},
      {name: '统计', value: 18574},
      {name: '体育', value: 38929},
      {name: '医疗', value: 969},
      {name: '环境', value: 37517},
    ];
    const option = {
      series: [{
          type: 'wordCloud',
          sizeRange: [15, 80],
          rotationRange: [0, 0],
          rotationStep: 45,
          gridSize: 8,
          shape: 'pentagon',
          width: '100%',
          height: '100%',
          textStyle: {
            normal: {
              fontWeight: 'bold',
              color: function () {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            }
          },
          data: keywords
      } ]
    };
    chart.setOption(option);

备注：更多相关的词云配置项可以在https://github.com/ecomfe/echarts-wordcloud查看
效果图：