echarts --- 词云图

上周做数据统计的大屏展示，其中涉及到词云图。

词云图：由词标签/维度和词大小/度量组成。

angular cli8  +  echarts4   (这是之前的项目了)。

只安装echarts，中已经不可以直接用 type: 'wordCloud' 去绘制词云图了，需要额外安装echarts-wordcloud   这里选择适合自己的版本安装就可以了。

需要引用：

import * as echarts from 'echarts';

import "echarts-wordcloud/src/wordCloud.js";

options的配置项可以按文档和自己本身的需求进行设置。

这边直接贴上我自己的代码。

let option =  {
          series: [{
            type: 'wordCloud',
            sizeRange: [15, 80],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 8,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
              textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 256),
                            Math.round(Math.random() * 256),
                            Math.round(Math.random() * 256)
                        ].join(',') + ')';
                    },
                    fontFamily: 'sans-serif',
                    fontWeight: 'normal'
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: this.wordcloudData
          }]
 }复制

效果图：