4.1-antv/g2

一、最简react实例

import React from 'react';
import G2 from '@antv/g2';

let chart = {};

class G2test extends React.PureComponent {

  componentDidMount() {
    chart = new G2.Chart({
      container: 'c1',
      width: 600,
      height: 300,
    });

    this.renderCharts();
  }

  renderCharts = () => {
    const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 }];
    chart.source(data);
    chart.interval().position('genre*sold').color('genre');
    chart.render();
  };

  render() {
    return (
      <div id="c1" />
    );
  }
}

export default G2test;

转载于:https://www.jianshu.com/p/db71e6bb7a2e