react g2

單折線

const baseLineData = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
];


<BaseLineChart data={baseLineData}></BaseLineChart>

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

class MyChart extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const chart = new G2.Chart({
      container: 'g2-container',
      forceFit: true,
      height: 500,
      padding: [30, 'auto', 'auto', 80]
    });

    const Shape = G2.Shape;
    Shape.registerShape('point', 'breathPoint', {
      drawShape(cfg, container) {
        const point = { x: cfg.x, y: cfg.y };
        const data = cfg.origin._origin;
        if (data.year === '1999') {
          const decorator1 = container.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 8,
              fill: '#1890ff',
              opacity: 0.5
            }
          });
          const decorator2 = container.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 6,
              fill: '#1890ff',
              opacity: 0.5
            }
          });
          const decorator3 = container.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 4,
              fill: '#1890ff',
              opacity: 0.5
            }
          });
          decorator1.animate(
            {
              r: 18,
              opacity: 0,
              repeat: true
            },
            1800,
            'easeLinear'
          );
          decorator2.animate(
            {
              r: 16,
              opacity: 0,
              repeat: true
            },
            1800,
            'easeLinear',
            () => {},
            600
          );
          decorator3.animate(
            {
              r: 14,
              opacity: 0,
              repeat: true
            },
            1800,
            'easeLinear',
            () => {},
            1200
          );
          container.addShape('circle', {
            attrs: {
              x: point.x,
              y: point.y,
              r: 4,
              fill: '#1890ff',
              opacity: 0.5
            }
          });
        }
      }
    });

    chart.source(this.props.data);
    chart.line().position('year*value');
    chart
      .point()
      .position('year*value')
      .size(4)
      .shape('breathPoint')
      .style({
        stroke: '#fff',
        lineWidth: 2
      });

    chart.render();
  }

  render() {
    return <div id="g2-container" style={{ width: '100%' }}></div>;
  }
}

export default MyChart;

雙摺線

const doubleLineData = [
  { month: 'Jan', city: 'Tokyo', temperature: 7.0 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },

  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'London', temperature: 17.0 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 }
];

<DoubleLineChart data={doubleLineData}></DoubleLineChart>

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

class MyChart extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const chart = new G2.Chart({
      container: 'g2-container',
      height: 500,
      padding: [30, 'auto', 'auto', 80],
      forceFit: true
    });

    const data = this.props.data;

    chart.source(data, {
      mounth: {
        range: [0, 1]
      }
    });

    chart.axis('temperature', {
      label: {
        formatter(value) {
          return `${value}°C`;
        }
      }
    });

    chart.tooltip({
      crosshairs: {
        type: 'line'
      },
      // 解決tooltip中列表不對齊的問題
      'g2-tooltip-title': {
        textAlign: 'left'
      },
      'g2-tooltip-list-item': {
        textAlign: 'left'
      }
    });

    chart
      .line()
      .position('month*temperature')
      .color('city')
      .shape('smooth');

    chart
      .point()
      .position('month*temperature')
      .color('city')
      .size(4)
      .shape('circle')
      .style({
        stroke: '#fff',
        lineWidth: 1
      });

    chart.render();
  }

  render() {
    return <div id="g2-container" style={{ width: '100%' }}></div>;
  }
}

export default MyChart;

面積圖

const baseAreaChartData = [
  { area: '上海', year: '1991', value: 9468 },
  { area: '上海', year: '1992', value: 16100 },
  { area: '上海', year: '1993', value: 15900 },
  { area: '上海', year: '1994', value: 17409 },
  { area: '上海', year: '1995', value: 17000 },
  { area: '上海', year: '1996', value: 31056 },
  { area: '上海', year: '1997', value: 31982 },
  { area: '上海', year: '1998', value: 26040 },
  { area: '上海', year: '1999', value: 23233 },

  { area: '哈爾濱', year: '1991', value: 20012 },
  { area: '哈爾濱', year: '1992', value: 19203 },
  { area: '哈爾濱', year: '1993', value: 19092 },
  { area: '哈爾濱', year: '1994', value: 33579 },
  { area: '哈爾濱', year: '1995', value: 35280 },
  { area: '哈爾濱', year: '1996', value: 41144 },
  { area: '哈爾濱', year: '1997', value: 42650 },
  { area: '哈爾濱', year: '1998', value: 39503 },
  { area: '哈爾濱', year: '1999', value: 37890 }
];

<BaseAreaChart data={baseAreaChartData}></BaseAreaChart>

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

class BaseAreaChart extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const chart = new G2.Chart({
      container: 'g2-container',
      height: 500,
      padding: [30, 'auto', 'auto', 80],
      forceFit: true
    });

    const data = this.props.data;

    chart.source(data, {
      year: {
        range: [0, 1]
      },
      value: {
        min: 0 // 使y軸刻度從0開始
      }
    });

    chart.axis({
      value: {}
    });

    chart
      .line()
      .position('year*value')
      .color('area');

    chart
      .area()
      .position('year*value')
      .color('area');

    chart.render();
  }

  render() {
    return <div id="g2-container" style={{ width: '100%' }}></div>;
  }
}

export default BaseAreaChart;