g2-react 初体验

背景

本文使用 AntV 中的 g2 库，来绘制折线图和饼图。

官方最终效果如下：

• 折线图
• Pie 饼图

本文从头开始，实现了其中基础部分。

初体验

建立 reactjs 框架

$ npx create-react-app my-g2-app

测试

$ cd my-g2-app
$ npm start

可以在浏览器中打开默认页面

安装 g2 模块

$ npm install g2 --save
$ npm install g2-react --save

浏览器页面创建容器

在 index.html 中，加入 root 容器。这时的 root 名称可以命名。

<div id="root"></div>

折线图

准备数据

下载文件 https://raw.githubusercontent.com/antvis/g2-react/master/examples/data.json 到本地。

编辑 js 文件

import createG2 from 'g2-react';
import { Stat } from 'g2';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import linedata from './data.json';

const Line = createG2(chart => {
  chart.line().position('time*price').color('name').shape('spline').size(2);
  chart.render();
});

class LineComponent extends Component {

  state =  {
    data: linedata.slice(0, linedata.length / 2 - 1),
    width: 500,
    height: 250,
    plotCfg: {
      margin: [10, 100, 50, 120],
    },
  }

  render() {
    return (
      <div>
        <Line
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
          ref="myChart"
        />
      </div>
    );
  }
}

ReactDOM.render(<LineComponent />, document.getElementById('root'));

饼图

准备数据

下载文件 https://raw.githubusercontent.com/antvis/g2-react/master/examples/diamond.json 到本地。

编辑 js 文件

import createG2 from 'g2-react';
import { Stat } from 'g2';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import piedata from './diamond.json';

const Pie = createG2(chart => {
  chart.coord('theta');
  chart.intervalStack().position(Stat.summary.proportion()).color('cut');
  chart.render();
});

class PieComponent extends Component {

  state =  {
    data: piedata.slice(0, piedata.length / 2 - 1),
    width: 500,
    height: 250,
    plotCfg: {
      margin: [10, 100, 50, 120],
    },
  }

  render() {
    return (
      <div>
        <Pie
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
          ref="myChart"
        />
      </div>
    );
  }
}

ReactDOM.render(<LineComponent />, document.getElementById('root'));

打包

$ npm run build

参考

• 在 react 组件中使用 G2
• g2-react 官方示例
• g2 simple-line 示例: G2 代码示例大全，可以找到各种用法。