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

import { getTheme } from '@antv/g2';
import * as G2 from '@antv/g2';
import { Canvas } from '@antv/g';
import { income } from '../data/income';
import { distBetweenPointLine } from '../../src/util/math';
import { getSplinePath } from '../../src/util/path';

G2.Shape.registerShape('line', 'miniLine', {
  draw: (cfg, container) => {
    const points = lineSimplification(cfg.points);
    /* const path = [];
    for (let i = 0; i < points.length; i++) {
      const p = points[i];
      const flag = i === 0 ? 'M' : 'L';
      path.push([ flag, p.x, p.y ]);
    }*/
    const path = parseSplineShape(points);
    const shape = container.addShape('path', {
      attrs: {
        path,
        stroke: cfg.color,
        lineWidth: cfg.size,
      },
    });

{
            item: 'Industry',
            count: item.gdp.Industry,
            percent: item.gdp.Industry / total
          },
          {
            item: 'Service',
            count: item.gdp.Service,
            percent: item.gdp.Service / total
          }
        ];

        const sliceNumber = 0.02;

        // 自定义 other 的图形，增加两条线
        G2.Shape.registerShape('interval', 'sliceShape', {
          draw: function draw(cfg, container) {
            const points = cfg.points;
            let path = [];
            path.push([ 'M', points[0].x, points[0].y ]);
            path.push([ 'L', points[1].x, points[1].y - sliceNumber ]);
            path.push([ 'L', points[2].x, points[2].y - sliceNumber ]);
            path.push([ 'L', points[3].x, points[3].y ]);
            path.push('Z');
            path = this.parsePath(path);
            return container.addShape('path', {
              attrs: {
                fill: cfg.color,
                path
              }
            });
          }

/**
 *
 * create by Shine Lee
 *
 * @flow
 */
import React, { Component } from "react";
import G2 from "@antv/g2";
import DataSet from "@antv/data-set";
import getPath from './basicChartOne';


const data = [{ name: "微应用内存", value: 18 }, { name: "已申请量", value: 4 }, { name: "可申请余量", value: 4 }];

G2.Shape.registerShape("interval", "sliceShape", {
  draw: function draw(cfg, container) {
    let path = getPath(cfg);
    path = this.parsePath(path);
    return container.addShape("path", {
      attrs: {
        fill: cfg.color,
        path: path
      }
    });
  }
});

export default class Demo extends Component<> {
  render() {
    return <div id="GChartThree">;
  }</div>

export const getPath = (cfg) => {
  let points = cfg.points;
  let origin = cfg.origin._origin;
  let percent = origin.value / 60;
  let xWidth = points[2].x - points[1].x;
  let width = xWidth * percent + 0.5;
  return [
    ["M", points[0].x, points[0].y],
    ["L", points[1].x, points[1].y],
    ["L", points[0].x + width, points[2].y],
    ["L", points[0].x + width, points[3].y],
    "Z"
  ];
};

G2.Shape.registerShape("interval", "sliceShape", {
  draw: function draw(cfg, container) {
    let path = getPath(cfg);
    path = this.parsePath(path);
    return container.addShape("path", {
      attrs: {
        fill: cfg.color,
        path: path
      }
    });
  }
});

export default class Demo extends Component<> {
  render() {
    return <div id="GChartOne">;
  }</div>

export default (geoName: string, shapeName: string, {
  getPoints,
  drawShape,
}: any) => {
  G2.Shape.registerShape(geoName, shapeName, { getPoints, drawShape });
};

_chart() {
      const Shape = G2.Shape
      const Util = G2.Util
      Shape.registerShape('polygon', 'boundary-polygon', {
        draw(cfg, container) {
          if (!Util.isEmpty(cfg.points)) {
            const attrs = {
              stroke: '#fff',
              lineWidth: 1,
              fill: cfg.color,
              fillOpacity: cfg.opacity
            }
            const points = cfg.points
            const path = [
              ['M', points[0].x, points[0].y],
              ['L', points[1].x, points[1].y],
              ['L', points[2].x, points[2].y],
              ['L', points[3].x, points[3].y],

export const registerShape = (geoName: string, shapeName: string, shapeFun: any) => {
  G2.Shape.registerShape(geoName, shapeName, shapeFun);
};

/**
 *
 * create by Shine Lee
 *
 * @flow
 */
import React, { Component } from "react";
import G2 from "@antv/g2";
import DataSet from "@antv/data-set";
import getPath from './basicChartOne';

const data = [{ name: "服务器内存预算", value: 18 }, { name: "已申请量", value: 5 }, { name: "可申请余量", value: 4 }];

G2.Shape.registerShape("interval", "sliceShape", {
  draw: function draw(cfg, container) {
    let path = getPath(cfg);
    path = this.parsePath(path);
    return container.addShape("path", {
      attrs: {
        fill: cfg.color,
        path: path
      }
    });
  }
});

export default class Demo extends Component<> {
  render() {
    return <div id="GChartTwo">;
  }</div>