How to use the @antv/g2.Chart function in @antv/g2

// FIXME: label && tooltip 交互
import { Chart } from '@antv/g2';

const data = [
  { sex: '男', sold: 0.45 },
  { sex: '女', sold: 0.55 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.data(data);
chart.coordinate('theta', {
  radius: 0.8,
});
chart.tooltip({
  showTitle: false,
  showTooltipMarkers: false,
});
chart.axis(false);
chart
  .interval()
  .adjust('stack')

const data2 = [];
for (let i = 0; i < 50; i++) {
  const item = {};
  item.type = i + '';
  item.value = 10;
  if (i === 25) {
    item.value = 14;
  }
  if (i > 25) {
    item.value = 0;
  }
  data2.push(item);
}

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
  padding: 0,
  localRefresh: false, // FIXME：等待 G 的 bug 修复后删除
});
chart.scale({
  type: {
    range: [0, 1],
  },
  value: {
    sync: true,
  },
});
chart.legend(false);
chart.tooltip(false);

.transform({
        type: 'filter',
        callback: obj => {
          const date = obj.time;
          return date <= ds.state.end && date >= ds.state.start;
        }
      })
      .transform({
        type: 'map',
        callback: obj => {
          obj.trend = (obj.start <= obj.end) ? '上涨' : '下跌';
          obj.range = [ obj.start, obj.end, obj.max, obj.min ];
          return obj;
        }
      });
    const chart = new G2.Chart({
      container: 'c1',
      width: 600,
      height: 400,
      animate: false,
      padding: [ 20, 120, 100 ]
    });

    chart.source(dv, {
      trend: {
        alias: '趋势'
      },
      time: {
        type: 'timeCat',
        nice: false,
        mask: 'MM-DD',
        alias: '时间'

createMiniBarChart(containerId: string, data: any[], sum?: any) {
    let chart = new G2.Chart({
      container: containerId,
      forceFit: true,
      height: 35,
      padding: [36, 30, 30, 30]
    })
    chart.source(data)
    chart.legend(false)
    chart.axis(false)
    chart.tooltip({
      type: 'mini'
    })
    chart
      .interval()
      .position('index*value')
      .opacity(0.85)
      .color('#fff')

import { Chart } from '@antv/g2';

const data = [
  { name: 'John', vote: 35654 },
  { name: 'Damon', vote: 65456 },
  { name: 'Patrick', vote: 45724 },
  { name: 'Mark', vote: 13654 },
];
const imageMap = {
  John: 'https://zos.alipayobjects.com/rmsportal/mYhpaYHyHhjYcQf.png',
  Damon: 'https://zos.alipayobjects.com/rmsportal/JBxkqlzhrlkGlLW.png',
  Patrick: 'https://zos.alipayobjects.com/rmsportal/zlkGnEMgOawcyeX.png',
  Mark: 'https://zos.alipayobjects.com/rmsportal/KzCdIdkwsXdtWkg.png',
};

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

chart.scale('vote', {
  min: 0,
});

chart.legend(false);

chart.axis('vote', {
  label: null,
  title: null,

const data = [
  { name: '张伟', value: 95 },
  { name: '王秀英', value: 94 },
  { name: '李明', value: 92 },
  { name: '王丽', value: 89 },
  { name: '刘洋', value: 80 },
  { name: '何勇', value: 80 },
  { name: '王强', value: 78 },
  { name: '林杰', value: 76 },
  { name: '李桂英', value: 75 },
  { name: '何秀兰', value: 73 },
  { name: '卢芳', value: 68 },
  { name: '张德', value: 61 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
  padding: [20, 20, 50, 30],
});
chart.data(data);
chart.scale('value', {
  alias: '体能分',
});
chart.axis('name', {
  label: {
    style: {
      fill: '#aaaaaa',
    },
  },
  tickLine: {

{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  { name: 'London', 月份: 'May', 月均降雨量: 47 },
  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

chart
  .interval()
  .position('月份*月均降雨量')
  .color('name')
  .adjust([
    {
      type: 'dodge',
      marginRatio: 1 / 32,
    },

componentDidMount() {
    const { data = [] } = this.props;
    const chart = new G2.Chart({
      id: "payment",
      forceFit: true,
      height: 50,
      padding: [0, 10, 0, 10]
    });

    chart.source(data, {});
    chart.scale("time", {
      range: [0, 1]
    });
    chart.scale("count", {
      range: [0, 1],
      min: 0,
      max: 15
    });
    chart.axis(false);

path: this.parsePath([
                      ['M', points[1].x, points[1].y],
                      ['L', points[2].x, points[2].y]
                    ]),
                    lineWidth: 1,
                    stroke: '#404040'
                  }
                })
              }
            }
            container.sort()
            return polygon
          }
        }
      })
      this.chart = new G2.Chart({
        container: this.id,
        forceFit: true,
        height: 350
      })
      this.chart.source(this.data, {
        day: {
          type: 'cat',
          values: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        },
        week: {
          type: 'cat'
        },
        commits: {
          sync: true
        }
      })

{ city: '俄罗斯（莫斯科）', type: '农村人口', value: 0.26 },
  { city: '法国（巴黎）', type: '首都人口', value: 0.16 },
  { city: '法国（巴黎）', type: '城市人口', value: 0.63 },
  { city: '法国（巴黎）', type: '农村人口', value: 0.21 },
  { city: '韩国（首尔）', type: '首都人口', value: 0.19 },
  { city: '韩国（首尔）', type: '城市人口', value: 0.63 },
  { city: '韩国（首尔）', type: '农村人口', value: 0.18 },
  { city: '丹麦（哥本哈根）', type: '首都人口', value: 0.22 },
  { city: '丹麦（哥本哈根）', type: '城市人口', value: 0.65 },
  { city: '丹麦（哥本哈根）', type: '农村人口', value: 0.13 },
  { city: '冰岛（雷克雅未克）', type: '首都人口', value: 0.56 },
  { city: '冰岛（雷克雅未克）', type: '城市人口', value: 0.38 },
  { city: '冰岛（雷克雅未克）', type: '农村人口', value: 0.06 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
chart.data(data);
chart.scale('value', {
  max: 1.0,
  min: 0.0,
  nice: false,
  alias: '占比（%）',
});
chart.axis('city', {
  title: null,
  label: {
    style: {
      fill: '#595959',