angular7+ echarts-wordcloud制作词云图

安装依赖包

echart最新版本5以上的报错，4版本的没有发现问题，可以使用4版本。

npm install echarts@4.2.1 --save
npm install ngx-echarts@4.1.1 --save
npm install echarts-wordcloud --save

angular.json引入echarts

"scripts": [
              "node_modules/echarts/dist/echarts.js"
            ]

模块引入NgxEchartsModule

import {
      NgxEchartsModule } from 'ngx-echarts';

@NgModule({
     
  declarations: [xxxComponent],
  imports: [
    NgxEchartsModule
  ]
})
export class xxxModule {
      }

模块使用echarts-wordcloud

<div  echarts [options]="hotwordOption" style="width:400px;height:400px">div>

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

this.hotwordOption=
          {
     
            tooltip: {
     
              show: true
            },
           series: [{
     
             name: '关键词云',
             type: 'wordCloud',
             size: ['9%', '50%'],
             sizeRange: [10, 30],
            textRotation: [0, 45, 90, -45],
            rotationRange: [-45, 90],
            gridSize: 8,
             shape: 'diamond',
             drawOutOfBound: false,
             autoSize: {
     
               enable: true,
               minSize: 6
             },
             textStyle: {
     
               normal: {
     
                 color: () => {
     
                   return 'rgb(' + [
                     Math.round(Math.random() * 160),
                     Math.round(Math.random() * 160),
                     Math.round(Math.random() * 160)
                   ].join(',') + ')';
                 }
               },
               emphasis: {
     
                 shadowBlur: 10,
                 shadowColor: 'rgba(0, 0, 0, 0.15)'
               }
             },
             data:hotData
           }]
         }