前端react项目实现词云效果

最新推荐文章于 2024-09-13 22:20:35 发布

你的玄烨

最新推荐文章于 2024-09-13 22:20:35 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/CCQStudy/article/details/118406274

react 同时被 2 个专栏收录

17 篇文章

订阅专栏

echarts

5 篇文章

订阅专栏

本文介绍了如何使用Echarts 4.9.0版本结合echarts-wordcloud 1.1.3版本创建词云效果。在过程中，可能会遇到`createTextStyle is not a function`的错误，这通常由于Echarts版本过低导致。解决方案是确保Echarts版本升级到5.0.1以上，并且与echarts-wordcloud保持兼容。示例代码展示了具体的配置和组件实现，包括颜色随机生成、数据设置等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言： echarts词云效果使用，直接 ‘npm install echarts-wordcloud ’ ，默认加载的是最新版本依赖，那就你需要echarts更新到 5.0.1+ 的版本，如果你的词云效果实现有报错 …createTextStyle is not a function，你需要比对一下你的echarts版本和echarts-wordcloud依赖的版本是否兼容。我的示例使用的是4.9.0版本的echarts和1.1.3版本的echarts-wordcloud

npm install echarts --save
npm install --save echarts-for-react
npm install echarts-wordcloud@1.1.3

项目效果：
在这里插入图片描述

页面组件完整代码：

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import style from './style.less';

export const index = (props: any) => {
  const option = {
    series: [
      {
        type: 'wordCloud',
        gridSize: 2,
        sizeRange: [12, 50],
        rotationRange: [-90, 90],
        shape: 'pentagon',
        textStyle: {
          normal: {
            color: function() {
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 255),
                  Math.round(Math.random() * 255),
                  Math.round(Math.random() * 255),
                ].join(',') +
                ')'
              );
            },
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333',
          },
        },
        data: [
          {
            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: 'Mary Ellen Mark',
            value: 462,
          },
          {
            name: 'Farrah Abraham',
            value: 366,
          },
          {
            name: 'Rita Ora',
            value: 360,
          },
          {
            name: 'Serena Williams',
            value: 282,
          },
          {
            name: 'NCAA baseball tournament',
            value: 273,
          },
          {
            name: 'Point',
            value: 273,
          },
          {
            name: 'Point Break',
            value: 265,
          },
        ],
      },
    ],
  };

  return (
    <div className={style.wordContainer}>
      <ReactEcharts
        option={option as any}
        notMerge
        lazyUpdate
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
};

export default index;