仪表盘的实现

[pepper-nice]

仪表盘 - Gauge

仪表盘需要通过 Shape 组合定制。主要分为三个部分：圆环部分、指针部分、统计文字部分。

开始使用

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

const chart = new Chart({
  container: 'container',
});

chart.gauge().data({ percent: 0.75 });

chart.render();

选项

API	描述
data	支持两种数据格式： 1. data: { target: 4000, total: 10000 } 2. data: { percent: 0.75 }
style	通过添加前缀 arc | pointer | text 指定样式

Arc 样式配置

API	描述	默认值
arcRadius	半径，范围 0-1	1
arcStartAngle	起始弧度	-Math.PI
arcEndAngle	终止弧度	Math.PI
arcType	圆弧样式类型, linear | meter	linear
arcMeter	meter 样式时的配置
arcMeterSteps	meter 总步长	50
arcMeterGap	meter 间隔长度，范围 [0, 1]	0.5

pin 和 pointer 配置

API	类型	描述
pinShape	() => Shape	传入自定义 pin shape
pointerShape	() => Shape	传入自定义 pointer shape

text 样式配置

API	类型	描述
textShape	() => Shape	传入自定义 text shape
textContent	string	主体文本内容。优先级: customHtml > formatter > content
textRotate	number	旋转角度
textDx	number	x 偏移值
textDy	number	y 偏移值

实现思路

Composition 里面添加一个 Gauge。

function Gauge(options) {
  return [
    {
      type: 'view',
      coordinates: [],
      children: [
        { type: 'interval' },
        { type: 'shape' },
        { type: 'shape' },
        { type: 'text' },
      ],
    },
  ];
}

案例验证

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

const chart = new Chart({
  container: 'container',
  children: [
    {
      type: 'gauge',
      data,
      encode: {
        target: 'target',
        total: 'total',
      },
      scale: {
        color: {
          domain: [0, 0.5, 1],
          range: ['#F4664A', '#FAAD14', '#30BF78'],
        },
      },
      style: {
        arcRadius: 1,
        arcStartAngle: -Math.PI,
        arcEndAngle: Math.PI,
        arcShape: 'meter',
        arcMeter: {
          steps: 30,
          gap: 0.5,
        },
        pinFill: '#ccc',
        pointerFill: '#ccc',
        textFill: '#000',
      },
    },
  ],
});

[pearmini]

后面可以按照一个固定的格式去写设计文档（我把它放入规范中），其实和 API 文档的模版很像，这样也方便直接放入文档中。

#  Gauge

`[一段描述]`

## 开始使用

`[一张截图]`

~~~js
// 代码片段
~~~

## 选项
`一个表格`

## 案例

`[展示更多能力]`

[pearmini]

下面一些需要注意的地方：

1. color scale 是给 arc 那部分的

const options = {
  scale: {
    color: { domain: [0, 0.5, 1], range: ['#F4664A', '#FAAD14', '#30BF78'] },
  }
}

2. arc 那部分取一个名字，建议不是 gauge。

const options = {
  style: {
    arcFill: 'red', // 比如取名为 arc
    arcType: 'meter',
    meterSteps: '',
  }
}

4. layout 相关的配置放入 style 里面（如上）
5. 是否展示文本：

const options = {
  style: {
    text: false, // 不展示文本
  }
}

6. text 可以先不考虑 html 的情况，formatter 感觉用处不大，下面两种没啥区别：

const options = {
  style: {
    text: 1,
    textFormatter: d => `${d/100}%`
  }
}

const options = {
  style: {
    text: '100%'
  }
}

7. 内部的实现，暂时放在 composition 里面：

function Gauge(options) {
  return [
    {
      type: 'view',
      coordinates: [],
      children: [
        { type: 'interval' },
        { type: 'shape' },
        { type: 'shape' },
        { type: 'text' },
      ],
    },
  ];
}

8. 测试的时候把 meter 和非 meter 的地方都测一下。
9. 自定义，通过 ${prefix}Shape 的形式自定义，比如：

const options = {
  style: {
    textShape: () => {}, // 可以透传给 shape 的 render 函数
    pinShape: () => {}
  }
}

[pepper-nice]

已修改

[visiky]

我补充一两个疑惑点，但可能你们已经考虑了 💭

• 仪表盘的轴标签是否可以展示内部、外部，如图1，axis 在外围
• text 和仪表盘的定位关系是怎么看的。如图2，text 的位置怎么设置~

[pepper-nice]

1. 仪表盘 Arc 部分通过定制 interval shape。直接接入 axis 就行。位置在 axis 中设置。
2. text 位置默认会放在图表 ['50%', '100%'] 处，可以通过 dx 和 dy 配置来移动位置。像图中这种属于定制指针和文本的情况。可以通过传入 textShape、pointerShape 来自己绘制。

[pearmini]

这里拍平：

const options = {
  style: {
    arcMeterSteps: '',
    arcMeterGap: ''
  }
}

[pepper-nice]

已修改