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

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

function creatData() {
  const data = [];
  let val = Math.random() * 6;
  val = val.toFixed(1);
  data.push({ value: val * 1 });
  return data;
}

// 自定义Shape 部分
registerShape('point', 'pointer', {
  draw(cfg, container) {
    const group = container.addGroup({});
    // 获取极坐标系下画布中心点
    const center = this.parsePoint({ x: 0, y: 0 });
    // 绘制指针
    group.addShape('line', {
      attrs: {
        x1: center.x,
        y1: center.y,
        x2: cfg.x,
        y2: cfg.y,
        stroke: cfg.color,
        lineWidth: 5,
        lineCap: 'round',
      },
    });

fontSize: 12,
        fill: '#BBB',
      },
    });
    group.addShape('polygon', {
      attrs: {
        points: points.map((point) => [point.x, point.y]),
        fill: cfg.color,
      },
    });

    return group;
  },
});

registerShape('interval', 'fallFlag', {
  getPoints({ x, y, y0, size }) {
    return [
      { x: x + size, y: y0 + size },
      { x, y },
    ];
  },
  draw(cfg, container) {
    const origin = cfg.data;
    if (_.isEqual(origin, data[data.length - 1])) {
      return;
    }

    const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
    const p1 = points[0];
    const width = 9;
    const washaway = origin.washaway;

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

const data = [
  { type: '分类一', value: 20 },
  { type: '分类二', value: 18 },
  { type: '分类三', value: 32 },
  { type: '分类四', value: 15 },
  { type: 'Other', value: 15 },
];

// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
const sliceNumber = 0.01;

// 自定义 other 的图形，增加两条线
registerShape('interval', 'sliceShape', {
  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,
      },
    });
  },

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

// 自定义Shape 部分
registerShape('point', 'pointer', {
  draw(cfg, container) {
    const group = container.addGroup();
    const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
    // 绘制指针
    group.addShape('line', {
      attrs: {
        x1: center.x,
        y1: center.y,
        x2: cfg.x,
        y2: cfg.y,
        stroke: cfg.color,
        lineWidth: 5,
        lineCap: 'round',
      },
    });
    group.addShape('circle', {

{ type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: 'Other', value: 5 },
];

let max = 0;
data.forEach(function(obj) {
  if (obj.value > max) {
    max = obj.value;
  }
});

// 自定义 other 的图形，增加两条线
registerShape('interval', 'sliceShape', {
  draw(cfg, container) {
    const points = cfg.points;
    const origin = cfg.data;
    const percent = origin.value / max;
    const xWidth = points[2].x - points[1].x;
    const width = xWidth * percent;
    let path = [];
    path.push(['M', points[0].x, points[0].y]);
    path.push(['L', points[1].x, points[1].y]);
    path.push(['L', points[0].x + width, points[2].y]);
    path.push(['L', points[0].x + width, points[3].y]);
    path.push('Z');
    path = this.parsePath(path);
    return container.addShape('path', {
      attrs: {
        fill: cfg.color,

/** 简化折线点 */
import * as G2 from '@antv/g2';
import * as _ from '@antv/util';
import { lineSimplification } from '../../util/math';
import { getSplinePath } from '../../util/path';
import AreaParser from './main';

const G2DefaultTheme = G2.Global.theme;

G2.registerShape('area', 'miniArea', {
  draw(cfg, container) {
    const path = getPath(cfg, this, false);
    const shape = container.addShape('path', {
      attrs: {
        path,
        fill: parseGradient(cfg.color || G2DefaultTheme.defaultColor),
        opacity: cfg.opacity || 0.4,
      },
    });
    return shape;
  },
});

G2.registerShape('area', 'miniAreaSmooth', {
  draw(cfg, container) {
    const path = getPath(cfg, this, true);

['L', centerX + w / 2, centerY + h / 2],
      ['Z'],
    ];
    */
    const path = getRectPath(centerX, centerY, width, height, cfg.origin.size);
    return container.addShape('path', {
      attrs: {
        path,
        fill: cfg.color,
        opacity: 1,
      },
    });
  },
});

registerShape('point', 'curvePoint', {
  draw(cfg, container) {
    const path = getCirclePath(cfg.x, cfg.y, cfg.size);
    return container.addShape('path', {
      attrs: {
        path,
        fill: cfg.color,
        opacity: 1,
      },
    });
  },
});

export interface MatrixViewConfig extends ViewConfig {
  forceSquare?: boolean;
  sizeField?: string;
  colorField?: string;

}
    const shape = container.addShape('path', {
      attrs: _.mix(
        {
          path,
          stroke: cfg.color || G2DefaultTheme.defaultColor,
          lineWidth: cfg.size || 2,
        },
        cfg.style
      ),
    });
    return shape;
  },
});

G2.registerShape('line', 'miniLineSmooth', {
  draw(cfg, container) {
    const points = lineSimplification(cfg.points);
    const constraint = [
      [0, 0],
      [1, 1],
    ];
    const path = getSplinePath(points, false, constraint);
    const shape = container.addShape('path', {
      attrs: _.mix(
        {
          path,
          stroke: cfg.color || G2DefaultTheme.defaultColor,
          lineWidth: cfg.size || 2,
        },
        cfg.style
      ),

G2.registerShape('area', 'miniArea', {
  draw(cfg, container) {
    const path = getPath(cfg, this, false);
    const shape = container.addShape('path', {
      attrs: {
        path,
        fill: parseGradient(cfg.color || G2DefaultTheme.defaultColor),
        opacity: cfg.opacity || 0.4,
      },
    });
    return shape;
  },
});

G2.registerShape('area', 'miniAreaSmooth', {
  draw(cfg, container) {
    const path = getPath(cfg, this, true);
    const shape = container.addShape('path', {
      attrs: {
        path,
        fill: parseGradient(cfg.color || G2DefaultTheme.defaultColor),
        opacity: cfg.opacity || 0.5,
      },
    });
    return shape;
  },
});

function getPath(cfg, shape, isSmooth) {
  const constraint = [
    [0, 0],

/** 简化折线点 */
import * as G2 from '@antv/g2';
import * as _ from '@antv/util';
import { lineSimplification } from '../../util/math';
import { getSplinePath } from '../../util/path';
import LineParser from './main';

const G2DefaultTheme = G2.Global.theme;

G2.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 shape = container.addShape('path', {
      attrs: _.mix(
        {
          path,
          stroke: cfg.color || G2DefaultTheme.defaultColor,
          lineWidth: cfg.size || 2,
        },
        cfg.style