echarts词云

echarts3 以后不存在词云api，故不能直接使用词云图表，需要自己手动引入词云模块echarts-wordcloud

安装依赖

npm i echarts
npm i echarts-wordcloud
npm i ngx-echarts
npm i @types/echarts
npm i rxjs-compat

修改angular.json

 "scripts": [
              "node_modules/echarts/dist/echarts.min.js",
              "node_modules/echarts-wordcloud/dist/echarts-wordcloud.min.js"
            ],

在组件module中导入

import { NgxEchartsModule } from 'ngx-echarts';

。。。。
imports: [ NgxEchartsModule],
。。。。

在组件中使用

 wordData = {
    value: [
    {
      "name": "服装",
      "value": 800
    },
    {
      "name": "手表",
      "value": 1000
    },
    {
      "name": "商铺",
      "value": 457
    },
    {
      "name": "基础教育科目",
      "value": 556
    },
    {
      "name": "考试培训",
      "value": 333
    },
    {
      "name": "语言学习",
      "value": 308
    },
    {
      "name": "留学",
      "value": 206
    },
    {
      "name": "课程培训",
      "value": 267
    }
    ],
    //词云图片
    image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABAklEQVQ4T63TLyyFURjH8c8trs0UicDMNFMIBF3RkJhNoOmKzSapJgkKzZ8k0BWBQjQbAkUym5vYs513e++7l3fX9dvOTjjP893v+XNq2lStzXxFQC82MIOBAvwJZ9jCa/aWB/TjCn0Vrl4wgeeIywMOsIgLzOO9AOrGEaYRsUsZ4BydmEQHBhF2yxRlPeIzuW2Egx3MJetv2K0oYQ09iFKOAzCCa9RbnEgD4wFYT2cZC5itAJ3iEPvYDsBmShpNTb3H0A+QBwzjC7c4CcAK9nCDD0wVppNnReIlujCG1QBE56Oev6ie7UGQy5arDNoUmwHu0jTijl78pqbYf/9MLffhG9gELuqHjsg6AAAAAElFTkSuQmCC"
  }
  
  。。。
  
 wordcloud() {
    let maskImage = new Image();
    maskImage.src = this.wordData.image
    this.wordclod = {
      backgroundColor: '#fff',
      tooltip: {
        show: false
      },
      series: [{
        type: 'wordCloud',
        gridSize: 1,
        sizeRange: [12, 55],
        rotationRange: [-45, 0, 45, 90],
        maskImage: maskImage,
        textStyle: {
          normal: {
            color: function () {
              return 'rgb(' +
                Math.round(Math.random() * 255) +
                ', ' + Math.round(Math.random() * 255) +
                ', ' + Math.round(Math.random() * 255) + ')'
            }
          }
        },
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        data: this.wordData.value
      }]
    }
  }
  
  
 
 

ps：echarts4 中需要在使用的组件中先引入echarts-wordcloud依赖

 declare const require: any;  // require声明
 ngOnInit(){
    require('echarts-wordcloud'); 
 }