react中使用bizcharts绘制词云

阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相关特性。

具体使用如下：

BizCharts官网文档：https://bizcharts.taobao.com/

一、 安装

通过npm/yarn引入bizcharts组件库

npm install bizcharts --save
yarn add bizcharts  --save

npm install @antv/data-set --save

二、引入

BizCharts中可以通过dataset(数据处理模块)来对图标数据进行处理，该方法继承自G2。

dataSet官方文档：https://g2.antv.vision/zh/docs/manual/dataset/overview

dataSet词云布局：https://g2.antv.vision/zh/docs/manual/dataset/transform#tag-cloud-%E8%AF%8D%E4%BA%91%E5%B8%83%E5%B1%80

import {Chart, Geom, Tooltip, Coordinate, Legend, Axis, Interaction, G2, registerShape} from "bizcharts";

　import DataSet from "@antv/data-set";

三、使用

import React, { FC } from 'react';
import _ from 'lodash';
import {Chart, Geom, Tooltip, Coordinate, Legend, Axis, Interaction, G2, registerShape} from "bizcharts";
import DataSet from "@antv/data-set";

interface renderDataItem {
  x:string;
  value: number;
  category: string;
}

interface WordCloudProps {
  renderData:any;
}

const scale = {
  x: {
    nice: false
  },
  y: {
    nice: false
  }
};

const WordCloud: FC<WordCloudProps> = props => {

  const { renderData } = props;

  //原始数据
  const originData:renderDataItem[] = [
    {
      category: '语文',   //分类
      value: 400,
      x: '语文',    //文本内容
    },
    {
      category: '数学',
      value: 450,
      x: '数学'
    },
    {
      category: '英语',
      value: 500,
      x: '英语'
    }
  ]

  function getTextAttrs(cfg) {
    return _.assign(
      {},
      cfg.style,
      {
        fontSize: cfg.data.size,
        text: cfg.data.text,
        textAlign: 'center',
        fontFamily: cfg.data.font,
        fill: cfg.color,
        textBaseline: 'Alphabetic'
      }
    );
  }

  registerShape("point", "cloud", {
    draw(cfg, container) {
      const attrs = getTextAttrs(cfg);
      const textShape = container.addShape("text", {
        attrs: _.assign(attrs, {
          x: cfg.x,
          y: cfg.y
        })
      });
      if (cfg.data.rotate) {
        G2.Util.rotate(textShape, cfg.data.rotate * Math.PI / 180);
      }
      return textShape;
    }
  });

  // 创建 DataView
  const dv = new DataSet.View().source(originData);
  const range = dv.range('value');
  const min = range[0];
  const max = range[1];
  //trnasform对数据进行加工处理
  dv.transform({
    type: 'tag-cloud',　　　　  // tag-cloud：词云布局
    fields: ['x', 'value'],　　//参与标签云layout的字段集（前者为文本内容，后者为权重值）
    size: [300, 300],　　　　　 // 画布size，[ width, height ]
    font: 'PingFang SC',        // 标签字体
    padding: 0,
    timeInterval: 5000,  // 最大迭代时间，默认为无限大
    rotate() {    // 文字旋转
      let random = ~~(Math.random() * 4) % 4;
      if (random === 2) {
        random = 0;
      }
      // return random * 90; // 0, 90, 270
      return 0;   //旋转角为0，即全部改为横向排列，尽可能缩小每一项的渲染空间
    },
    fontSize(d) {   //文本大小
      if (d.value) {
        //这里限制最大20px，最小12px
        return ((d.value - min) / (max - min)) * (20 - 12) + 12;
      }
      return 0;
    }
  });

  return (
    <Chart
      width={300}
      height={300}
      data={dv.rows}
      scale={scale}
      padding={0}
      autoFit={false}
      // onPointClick={console.log()}
    >
      <Tooltip visible={false} />
      <Coordinate reflect="y" />
      <Axis name='x' visible={false} />
      <Axis name='y' visible={false} />
      <Legend visible={false} />
      <Geom
        type='point'
        position="x*y"
        color="category"
        shape="cloud"
        tooltip="value*category"
      />
      <Interaction type='element-active' />
    </Chart>
  );
};
export default WordCloud; 

 

四、效果如下：

这里引用了官方的data数据集合。