antd/Js2WordCloud 词云

import React from 'react';
import Js2WordCloud from 'js2wordcloud'
import { getCompId } from '@/utils/utils';
// import DataSet from '@antv/data-set';
// import { Chart, registerShape, Util } from '@antv/g2';

// function getTextAttrs(cfg) {
//   console.log(cfg);
//   return {
//     ...cfg.defaultStyle,
//     ...cfg.style,
//     fontSize: cfg.data.size,
//     text: cfg.data.text,
//     textAlign: 'center',
//     fontFamily: cfg.data.font,
//     fill: cfg.color || cfg.defaultStyle.stroke,
//     textBaseline: 'Alphabetic'
//   };
// }
let compId = getCompId();
class KeyWords extends React.Component<any>{


  // renderDataToView(data){
  //   const dv = new DataSet.View().source(data);
  //   const range = dv.range('value');
  //   const min = range[0];
  //   const max = range[1];
  //   dv.transform({
  //     type: 'tag-cloud',
  //     fields: ['x', 'value'],
  //     size: [600, 500],
  //     font: 'Verdana',
  //     padding: 0,
  //     timeInterval: 5000, // max execute time
  //     rotate() {
  //       let random = ~~(Math.random() * 4) % 4;
  //       if (random === 2) {
  //         random = 0;
  //       }
  //       return random * 90; // 0, 90, 270
  //     },
  //     fontSize(d) {
  //       if (d.value) {
  //         return ((d.value - min) / (max - min)) * (80 - 24) + 24;
  //       }
  //       return 0;
  //     }
  //   });
  //   const chart = new Chart({
  //     container: this.compId,
  //     autoFit: false,
  //     width: 600,
  //     height: 500,
  //     padding: 0
  //   });
  //   chart.data(dv.rows);
  //   chart.scale({
  //     x: { nice: false },
  //     y: { nice: false }
  //   });
  //   chart.legend(false);
  //   chart.axis(false);
  //   chart.tooltip({
  //     showTitle: false,
  //     showMarkers: false
  //   });
  //   chart.coordinate().reflect();
  //   chart.point()
  //     .position('x*y')
  //     .shape('cloud')
  //     .tooltip('value*category');
  //   chart.interaction('element-active');
  //   chart.render();
  // }
  
  componentDidMount() {
    var canvas = document.getElementById(`${compId}`);
    //生成

    var wc = new Js2WordCloud(canvas);
    wc.setOption({
      tooltip: {
        show: true
        },
        list: this.props.wordCloudList,
        color: '#9CA7C8',
        // ellipticity: 0.6,
        shape:"ellipse",
        // imageShape: 'https://liangbizhi.github.io/js2wordcloud/shape/twitter.png',
        // imageShape: '//cdn.weimob.com/saas/zhan/images/4.21/tuoyuna.png',
        fontSizeFactor: 0.1,  // 当词云值相差太大，可设置此值进字体行大小微调，默认0.1
        maxFontSize: 72, // 最大fontSize，用来控制weightFactor，默认60
        minFontSize: 12,
        rotateRatio: 0,
        gridSize: 5,
    })
    // // 给point注册一个词云的shape
    // registerShape('point', 'cloud', {
    //   draw(cfg, container) {
    //     const attrs = getTextAttrs(cfg);
    //     const textShape = container.addShape('text', {
    //       attrs: {
    //         ...attrs,
    //         x: cfg.x,
    //         y: cfg.y
    //       }
    //     });
    //     if (cfg.data.rotate) {
    //       Util.rotate(textShape, cfg.data.rotate * Math.PI / 180);
    //     }

    //     return textShape;
    //   }
    // });
  
    // const data = [
    //   {
    //     "x": "China",
    //     "value": 1383220000,
    //     "category": "asia"
    //   },
    //   {
    //     "x": "India",
    //     "value": 1316000000,
    //     "category": "asia"
    //   },
    //   {
    //     "x": "United States",
    //     "value": 324982000,
    //     "category": "america"
    //   },
    //   {
    //     "x": "Indonesia",
    //     "value": 263510000,
    //     "category": "asia"
    //   },
    //   {
    //     "x": "Brazil",
    //     "value": 207505000,
    //     "category": "america"
    //   },
    //   {
    //     "x": "Pakistan",
    //     "value": 196459000,
    //     "category": "asia"
    //   },
    //   {
    //     "x": "Nigeria",
    //     "value": 191836000,
    //     "category": "africa"
    //   },
    //   {
    //     "x": "Bangladesh",
    //     "value": 162459000,
    //     "category": "asia"
    //   },
    //   {
    //     "x": "Russia",
    //     "value": 146804372,
    //     "category": "europe"
    //   },
    //   {
    //     "x": "Japan",
    //     "value": 126790000,
    //     "category": "asia"
    //   },
    //   {
    //     "x": "Mexico",
    //     "value": 123518000,
    //     "category": "america"
    //   },
    //   {
    //     "x": "Ethiopia",
    //     "value": 104345000,
    //     "category": "africa"
    //   },
    //   {
    //     "x": "Sudan",
    //     "value": 42176000,
    //     "category": "africa"
    //   },
    //   {
    //     "x": "Uganda",
    //     "value": 41653000,
    //     "category": "africa"
    //   },
    //   {
    //     "x": "Switzerland",
    //     "value": 8417700,
    //     "category": "europe"
    //   },
    //   {
    //     "x": "Papua New Guinea",
    //     "value": 8151300,
    //     "category": "australia"
    //   }
    // ]
    
    
    // this.renderDataToView(data)
  }
  render() {
    return <div id={`${compId}`} style={{width:'500px',height:'400px'}} />
  }
}

export default KeyWords;

注释为antd的词云

this.props.wordCloudList数据结构为：

[
['aaa',80],['ccc',70]
]