react中引用词云图【Bug解决】echarts词云图设置随机颜色失效

莉莉happyDay

已于 2022-06-23 11:44:42 修改

阅读量726

点赞数 3

分类专栏： react 文章标签： echarts 前端 javascript

于 2022-06-23 11:33:57 首次发布

本文链接：https://blog.csdn.net/qq_35407448/article/details/125423921

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

Install

<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

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}: <b>{point.percentage:.1f}%</b>"
      },
      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 (
      <div style={{ marginTop: "50px", width: "82%" }}>
        <Row>
          <Col md={24}>
            <ReactEcharts
              //   style={{  "56%" }}
              option={this.wordOption()}
              theme="ThemeStyle"
            />
          </Col>
        </Row>
      </div>
    );
  }
}

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(',') + ')';
                }
            },