G2自定义Shape

1.引入

import { chart，registerShape } from '@antv/g2';

2.向Shape工厂注册某个geom的一个shape

registerShape(geomName, shapeName,{
  getPoints(cfg){},// 自定义具体标记点
  draw(cfg, container){}// 自定义最终绘制
});

• geomName 几何标记名(图形的类别）, 如 point（点）, line（线） 等
• shapeName 自定义的图形的名称
• getPoints 自定义形状绘制时需要的节点，比如柱状图需要 4 个节点
• x, y 是柱子最高点的坐标，y0 是横坐标轴的 y 坐标，size 是柱子默认宽度
• draw 执行图形绘制逻辑、调用绘图引擎

三步操作

• 通过 getPoints() 方法返回自定义图形（矩行）的几个关键点（四个顶点）。此时 cfg 中会传入，x, y, y0, size。
• 我们在 draw() 方法中拿到 cfg.points 数据和数据映射后的图形属性数据（比如 cfg.color），然后再通过绘图库提供的多边形图形，将三个点依次头尾相连，生成每个自定义图形（三角形）。
• 通过 addShap 来绘制图形，addShape 的参数参考：绘图文档

示例

一： 自定义柱状图

    registerShape("interval", "border-radius", {
        // 定义关键点
        getPoints(cfg) {
          console.log(cfg);
          const x = cfg.x;
          const y = cfg.y;
          const y0 = cfg.y0;
          const width = cfg.size;
          return [
            { x: x - width / 2, y: y0 }, // 左下
            { x: x - width / 2, y: y },// 左上
            { x: x + width / 2, y: y0 },// 右下
            { x: x + width / 2, y: y }// 右上
          ];
        }, // 2.绘制
        draw(cfg, container) {
          console.log(cfg.points);
          // 将0-1空间的坐标转换为画布坐标，经过该函数的转化，坐标点的顺序会被改变，
          // 转换后的顺序是0:左上  1:左下  2:右下  3:右上
          const points = this.parsePoints(cfg.points); // 生成图形shape组合的group对象
          console.log(points);
          const group = container.addGroup();

          // 生成矩形
          group.addShape("rect", {
            attrs: {
              x: points[1].x, // 矩形起始点为左下角
              y: points[1].y, // 矩形起始点为左下角
              width: points[2].x - points[1].x, // 矩形的宽度
              height: points[0].y - points[1].y, // 矩形的高度
              fill: "red"
            }
          });

          // 生成矩形顶部的椭圆
          group.addShape("ellipse", {
            attrs: {
              x: points[1].x + (points[2].x - points[1].x) / 2, // 椭圆的圆心在矩形的顶部中心，也就是该条数据的(x,y)
              y: points[1].y, // 椭圆的圆心在矩形的顶部中心，也就是该条数据的(x,y)
              rx: (points[2].x - points[1].x) / 2, // 椭圆的x轴半径--自定义
              ry: (points[2].x - points[1].x) / 4, // 椭圆的y轴半径--自定义
              fill: "yellow"
            }
          });

          return group;
        }
      });

第二步，使用

 const data = [
        { genre: 'Sports', sold: 20 },
        { genre: 'Strategy', sold: 30 },
        { genre: 'Action', sold: 40 },
        { genre: 'Shooter', sold: 50 },
        { genre: 'Other', sold: 60 }
      ] // 创建chart对象

      this.chart = new Chart({
        container: 'testVehicle',
        width: 300,
        height: 130,
        padding: [10, 0, 20, 20]
      })

      // 载入数据源
      this.chart.data(data)
      // 图形配置
      this.chart
        .interval()
        .position('genre*sold')
        .shape('border-radius')
        .color('genre * sold', BAR3D_CHART_COLOR_ARR)
      this.chart.render()