Ant Design Charts 仪表盘配置属性结合案例详细说明

本次案例为仪表板，最终成品样式如下，案例种用到仪表盘分大部分属性，每个属性都注释说明作用。成品效果如下

 使用方法如下

import { Gauge, G2 } from "@ant-design/plots";

const { registerShape, Util } = G2; 

// 自定义指针 Shape 部分 在下面 indicator.shape 中使用，如不需要可删除下面的  indicator.shape 和 registerShape 函数。

  registerShape("point", "custom-gauge-indicator", {
    draw(cfg, container) {
      // 使用 customInfo 传递参数
      const { indicator, defaultColor } = cfg.customInfo;
      const { pointer, pin } = indicator;

      const group = container.addGroup();
      // 获取极坐标系下画布中心点
      const center = this.parsePoint({ x: 0, y: 0 });
      console.log(center);
      // 设置 pin 指针的圆盘的样式
      if (pin) {
        // 直接使用配置里面的pin样式
        group.addShape("circle", {
          name: "pin-outer",
          attrs: {
            x: center.x,
            y: center.y,
            ...pin.style,
          },
        });
      }
      // 绘制指针
      if (pointer) {
        const { startAngle, endAngle } = Util.getAngle(cfg, this.coordinate);
        const radius = this.coordinate.getRadius();
        const midAngle = (startAngle + endAngle) / 2;
        const { x: x1, y: y1 } = Util.polarToCartesian(
          center.x,
          center.y,
          radius / 15,
          midAngle + 1 / Math.PI
        );
        const { x: x2, y: y2 } = Util.polarToCartesian(
          center.x,
          center.y,
          radius / 15,
          midAngle - 1 / Math.PI
        );
        const { x, y } = Util.polarToCartesian(
          center.x,
          center.y,
          radius * 0.5,
          midAngle
        );
        const { x: x0, y: y0 } = Util.polarToCartesian(
          center.x,
          center.y,
          radius * 0.1,
          midAngle + Math.PI
        );
        const sa = Math.PI / 3 + midAngle;
        const r1 = 3.5;
        const p1 = {
          x: center.x + Math.cos(sa) * r1,
          y: center.y + Math.sin(sa) * r1,
        };
        const p2 = {
          x: center.x - Math.cos(sa) * r1,
          y: center.y - Math.sin(sa) * r1,
        };
        const r2 = r1 / 4;
        const p11 = {
          x: x + Math.cos(sa) * r2,
          y: y + Math.sin(sa) * r2,
        };
        const p21 = {
          x: x - Math.cos(sa) * r2,
          y: y - Math.sin(sa) * r2,
        };

        const path = [
          ["M", p21.x, p21.y],
          // 参数信息: cx, cy, .., .., .., endPointX, endPointY
          ["A", r2, r2, 0, 0, 1, p11.x, p11.y],
          ["L", p1.x, p1.y],
          ["A", r1, r1, 0, 0, 1, p2.x, p2.y],
          ["Z"],
        ];
        // pointer
        group.addShape("path", {
          name: "pointer",
          attrs: {
            path,
            fill: "#9155FD",
            ...pointer.style,
          },
        });
      }
      return group;
    },
  });

// 配置部分
const config = {
    // 设置图表的宽度和高度，如果不设置默认与容器大小一致画布，等同于设置了autoFit:true 效果
    with: 90,
    hight: 90,
    // 设置图表在画布的位置 可设置单个数字，也可以设置 [数字,数字,数字,数字] 控制4个方向。不加这个属性默认等于 auto
    // padding: "auto",

    // 当前仪表盘指针位置 值范围为 0 - 1
    percent: 0.33,
    // 仪表盘圆弧外环的半径 值得范围为 0 - 1
    radius: 0.9,

    // innerRadius 仪表盘圆弧内环的半径 值范围为 0 -1。
    //  外环和内环选一个配置即可，剩下可以配置圆弧宽度。
    // innerRadius: 0.8,

    // 调整仪表盘的开始位置 此处配置为半圆
    startAngle: Math.PI,
    //调整仪表盘的结束位置
    endAngle: 2 * Math.PI,
    // 图标渲染方式  canvas / svg 不设置默认为canvas 注意点：设置为svg后会影响到下面 gaugeStyle.lineCap 倒角的方向
    // renderer: "svg",
    // range 仪表盘的圆弧样式控制
    range: {
      // 控制仪表盘分色，此处分为3种颜色，各占3分之一
      ticks: [1 / 3, 3 / 4, 1],
      // 每个分区对应颜色
      color: ["#9155FD", "#C3ACF9", "#f4f5fa"],
      // 仪表板圆弧宽度默认单位为px
      width: 9,
    },
    // axis 仪表盘的刻度轴的配置
    axis: {
      // tickLine 为null 表示不显示刻度线
      tickLine: null,
      // label 为null 表示不显示刻度文字
      label: null,
    },

    //indicator 指针样式配置 null为不展示指针
    indicator: {
      // 自定义指针
      shape: "custom-gauge-indicator",
      // 配置指针样式，不包括圆盘
      pointer: {
        style: {
          stroke: "#9155FD",
          lineCap: "round",
          lineWidth: 4,
        },
      },
      // 配置指针连接的圆盘样式
      pin: {
        style: {
          // 指针边框颜色
          stroke: "#9155FD",
          // 指针圆盘半径
          r: 4.5,
          // 指针圆盘中间填充颜色
          fill: "#9155FD",
        },
      },
    },
    // 仪表盘的样式
    gaugeStyle: {
      // 圆弧内每段占比结束都进行倒角，包含仪表盘起始位置和结束位置都进行倒角
      lineCap: "round",
      // 圆弧外描边虚线
      lineDash: [2, 3],
      // 圆弧外描边虚线宽度
      lineWidth: 0.6,
      // 圆弧外描边颜色
      stroke: "#c0aaf6",
    },
  };


// 最终使用
   <Gauge {...config} />

更多详细属性描述，请前往 仪表盘 | G2Plot (antv.vision)