美文网首页
4.1-antv/g2

4.1-antv/g2

作者: 懒羊羊3号 | 来源:发表于2019-04-30 16:23 被阅读0次

    一、最简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;
    

    相关文章

      网友评论

          本文标题:4.1-antv/g2

          本文链接:https://www.haomeiwen.com/subject/yznenqtx.html