仪表盘的实现 #4383

API 设计

仪表盘

import { G2Spec } from '../../../src';

export function gaugeDefault(): G2Spec {
  /**
   * 两种数据格式
   * 1. { target: 4000, total: 10000 }
   * 2. { percent: 0.75 }
   */
  const data = { target: 4000, total: 10000 };
  return {
    type: 'gauge',
    data,
    encode: {
      target: 'target',
      total: 'total',
      // percent:'percent',
    },
    layout: {
      // 环半径
      radius: 1,
      // 环起始角度
      startAngle: -Math.PI,
      // 环中止角度
      endAngle: Math.PI,
      // 仪表盘辅助圆弧的样式。
      range: {
        // 根据ticks映射颜色
        ticks: [0, 1 / 3, 2 / 3, 1],
        color: ['#F4664A', '#FAAD14', '#30BF78'],
      },
      /** 默认 type = '', type = meter: 环为离散型 */
      type: 'meter',
      /** type 为 meter 时配置 */
      meter: {
        // 总步数
        steps: 30,
        // 间距宽度
        gap: 0.5,
      },
      text: {
        // 优先级：customHtml > formatter > content
        customHtml: () => ``,
        formatter: () => ``,
        content: () => ``,
        dx: 0,
        dy: 0,
      },
    },
    scale: {
      color: {
        range: [0, 0.5, 1],
        color: ['#F4664A', '#FAAD14', '#30BF78'],
      },
    },
    label: {},
    style: {
      // 小圆圈样式
      pinFill: '#ccc',
      // 指针样式
      pointerFill: '#ccc',
      // 文本样式
      textFill: '#000',
    },
  };
}

实现

<img width="509" alt="image" src="https://user-images.githubusercontent.com/109653633/204807652-6db0652b-80b9-48f6-a04d-18ed5a7c274e.png">

 [
  // 仪表盘圆环部分
  {
    type: 'shape',
    style: {
      render: arcShape,
    },
  },
  // 指示针
  {
    type: 'shape',
    style: {
      render: indicatorShape,
    },
  },
  // 文本
  {
    type: 'shape',
    style: {
      render: statisticShape,
    },
  },
]