gitee地址 https://gitee.com/WEILINGLI/echarts-wordcloud

Install

Or

npm install echarts npm install echarts-wordcloud

import * as echarts from 'echarts'; import 'echarts-wordcloud';

最近在react在项目中遇到词云图，在echarts关于词云图demo以下是实现代码：  import React, { Component } from "react"; import ReactEcharts from "echarts-for-react"; import { Row, Col } from "antd"; import * as echarts from "echarts"; import "echarts-wordcloud";  export default class Wordcloud extends Component {   wordOption = () => {     let maskImage = new Image();     // 这是词云图呈现形状的图片base64码，可选，可自定义图片     maskImage.src =       "data:image/svg xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0 CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgNTQ4LjE3NiA1NDguMTc2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NDguMTc2IDU0OC4xNzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc Cgk8cGF0aCBkPSJNNTI0LjE4MywyOTcuMDY1Yy0xNS45ODUtMTkuODkzLTM2LjI2NS0zMi42OTEtNjAuODE1LTM4LjM5OWM3LjgxLTExLjk5MywxMS43MDQtMjUuMTI2LDExLjcwNC0zOS4zOTkgICBjMC0yMC4xNzctNy4xMzktMzcuNDAxLTIxLjQwOS01MS42NzhjLTE0LjI3My0xNC4yNzItMzEuNDk4LTIxLjQxMS01MS42NzUtMjEuNDExYy0xOC4yNzEsMC0zNC4wNzEsNS45MDEtNDcuMzksMTcuNzAzICAgYy0xMS4yMjUtMjcuMDI4LTI5LjA3NS00OC45MTctNTMuNTI5LTY1LjY2N2MtMjQuNDYtMTYuNzQ2LTUxLjcyOC0yNS4xMjUtODEuODAyLTI1LjEyNWMtNDAuMzQ5LDAtNzQuODAyLDE0LjI3OS0xMDMuMzUzLDQyLjgzICAgYy0yOC41NTMsMjguNTQ0LTQyLjgyNSw2Mi45OTktNDIuODI1LDEwMy4zNTFjMCwyLjg1NiwwLjE5MSw2Ljk0NSwwLjU3MSwxMi4yNzVjLTIyLjA3OCwxMC4yNzktMzkuODc2LDI1LjgzOC01My4zODksNDYuNjg2ICAgQzYuNzU5LDI5OS4wNjcsMCwzMjIuMDU1LDAsMzQ3LjE4YzAsMzUuMjExLDEyLjUxNyw2NS4zMzMsMzcuNTQ0LDkwLjM1OWMyNS4wMjgsMjUuMDMzLDU1LjE1LDM3LjU0OCw5MC4zNjIsMzcuNTQ4aDMxMC42MzYgICBjMzAuMjU5LDAsNTYuMDk2LTEwLjcxNSw3Ny41MTItMzIuMTIxYzIxLjQxMy0yMS40MTIsMzIuMTIxLTQ3LjI0OSwzMi4xMjEtNzcuNTE1ICAgQzU0OC4xNzIsMzM5Ljc1Nyw1NDAuMTc0LDMxNi45NTIsNTI0LjE4MywyOTcuMDY1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c CjxnPgo8L2c Cjwvc3ZnPgo=";     let wordData = [       {         name: "Sam S Club",         value: 10000       },       {         name: "Macys",         value: 6181       },       {         name: "Amy Schumer",         value: 4386       },       {         name: "Jurassic World",         value: 4055       },       {         name: "Charter Communications",         value: 2467       },       {         name: "Chick Fil A",         value: 2244       },       {         name: "Planet Fitness",         value: 1898       },       {         name: "Pitch Perfect",         value: 1484       },       {         name: "Express",         value: 1112       },       {         name: "Home",         value: 965       },       {         name: "Johnny Depp",         value: 847       },       {         name: "Lena Dunham",         value: 582       },       {         name: "Lewis Hamilton",         value: 555       },       {         name: "KXAN",         value: 550       },       {         name: "Point Break",         value: 265       }     ];      let option = {       backgroundColor: "#fff",       tooltip: {         pointFormat: "{series.name}: {point.percentage:.1f}%"       },       series: [         {           type: "wordCloud",           gridSize: 1,           // Text size range which the value in data will be mapped to.           // Default to have minimum 12px and maximum 60px size.           sizeRange: [12, 55],           // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45            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) +
                  ")"
                );
              }
            }
          },
          // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
          // Default to be put in the center and has 75% x 80% size.
          left: "center",
          top: "center",
          right: null,
          bottom: null,
          width: "90%",
          height: "110%",
          data: wordData
        }
      ]
    };
    return option;
  };
  render() {
    return (
      
{ marginTop: "50px", width: "82%" }}>
        
          
            {  "56%" }}
              option={this.wordOption()}
              theme="ThemeStyle"
            />
          
        
      
    );
  }
}

Bug解决】echarts词云图设置随机颜色失效 

echarts词云图设置随机颜色失效这个问题，我谷歌了很久都没有找到一个比较新的解决方案，那么就整理一下我遇到这个问题然后一个可以参考的解决方案：

使用词云图的方法可以参考这篇文章：
https://segmentfault.com/a/1190000023022232

如果上面的方式echarts设置颜色依然失效，也就是这段代码：
————————————————
版权声明：本文为CSDN博主「_陈同学_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Dan1374219106/article/details/115864750

textStyle: {
              normal: {
              fontFamily: '微软雅黑',
              color: function () {
                  return 'rgb(' + [
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250)
                  ].join(',') + ')';
                }
              }
            },

 那么就需要考虑是否是echarts本身的版本问题：
目前我使用的是最新的版本：

"echarts": "^5.0.2",

我通过查看控制台的警告信息，知道现在新版本的echarts设置textStyle不需要写在normal里面了，也就是将对文本的设置直接写在textStyle里： 

textStyle: {
              fontFamily: '微软雅黑',
              color: function () {
                  return 'rgb(' + [
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250),
                    Math.round(Math.random() * 250)
                  ].join(',') + ')';
                }
            },

实际上新版本的echarts的设置都不需要用到normal字段，例如柱状图、饼状图的的itemStyle等等

这样修改以后，随机颜色就可以设置成功了！