前端react项目实现词云效果

心已赠人 2022-10-12 01:06 340阅读 0赞

**引言：** 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

**项目效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]

**页面组件完整代码：**

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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221005/b090fa9efa644203b5fa1e630503fba7.png