echart 热搜词云(字符云)的制作以及遇到颜色不会随即变得bug

1.首先要引入字符云的js文件或者下载插件

进入echart 官网 ，点下载，扩展插件，找到字符云点进去

 第一种  在vscode npm i echarts-wordcloud
      引入  import "echarts-wordcloud";
第二种 在echart 扩展插件 字符云里下载文件 里面有 js
然后在需要得地方引入js就可以了

// 热搜云词
export function hotTerms(params) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(params.dom));

  var option = {
    series: [
      {
        type: "wordCloud",
        gridSize: 20, //字体分布的密集程度
        sizeRange: [12, 50], //字体大小的范围
        rotationRange: [-90, 90], //字体旋转的角度
        shape: "pentagon",
        /*
        绘制词云的形状, 值为回调函数 或 关键字, 默认 circle
        关键字:
        circle  圆形
        cardioid 心形
        diamond  菱形 正方形
        triangle-forward, triangle  三角形  
        pentagon 五边形
        star 星形
        */
        textStyle: {   //随机颜色
          color: function() {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
          emphasis: {   //移入后的效果
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data: params.wordData,  //数据
      },
    ],
  };

  // 绘制图表
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
}

shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
left top right bottom ：词云的位置，默认是 center center。
width height ：词云的宽高，默认是 75% 80%。
sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90 。
gridSize ：词云中每个词的间距。
drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
extStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式。
  

2.完成后的效果

3.遇到颜色不会随即便的问题

开始时我textStyle是这样的，然后字体颜色不会生效

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

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

 textStyle: {   //随机颜色
          color: function() {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
          

去掉normal字体颜色生效了