How to use @antv/g2 - 10 common examples

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,
      },
    });

// 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);

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,

{
            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
              }
            });
          }

import * as G2 from '@antv/g2';
import * as _ from '@antv/util';
// import Theme from '../../theme';
import { convertToG2Theme, getGlobalTheme, getTheme } from '../../theme';
import { processAxisVisible } from '../../util/axis';
import { getResponsiveTheme } from '../../util/responsive/theme';
import { ViewConfig } from '../view-layer';

/**
 * 负责图表theme的管理
 */

const G2DefaultTheme = G2.Global.theme;

export default class ThemeController {
  /**
   * 通过 theme 和图表类型，获取当前 plot 对应的主题
   * @param props
   * @param type
   */
  public getPlotTheme(props: T, type: string) {
    const { theme } = props;
    if (_.isString(theme)) {
      return _.deepMix({}, getGlobalTheme(theme), getTheme(type));
    }
    return _.deepMix({}, getGlobalTheme(), getTheme(type), theme);
  }

  /**