前端react项目实现词云效果

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