g2-extensions-indicator

### AntV Open Source Contribution Plan（可选）

- [X] 我同意将这个 Issue 参与 OSCP 计划

### Issue 类型

中级任务

### 任务介绍

对于数组数据，可以使用 line、interval、point 等 mark 去可视化，对于完成度百分比数据，我们可以使用 gauge、liquid 等去可视化。

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

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

chart
.liquid()
.data(0.3)
.style({
outlineBorder: 4,
outlineDistance: 8,
waveLength: 128,
});

chart.render();
```

而对于单个数据指标的显示，缺少一个`指标卡`的组件可视化，当然也确实可以使用 html 去实现，只不过为了保证 G2 覆盖全面，可以在 [g2-extentions](https://github.com/antvis/g2-extentions) 中增加一个 @antv/g2-extension-indicator 的包。

使用方式和 API

```ts
chart
.indicator()
.data(1234.56)
.title({
title
})
.style({
formatter: (d) => `羊 ${d}`
});
```

实现注意点：

- 对于画布的大小下，自动指标居中显示

### 参考说明

样式设计参考：


https://procomponents.ant.design/components/statistic-card#%E6%80%BB%E5%88%86%E4%B8%BB%E6%AC%A1%E5%85%B3%E7%B3%BB

Start in the linked g2-extentions repository and review existing extension package patterns before defining @antv/g2-extension-indicator around chart.indicator(). Verify the documented data, title, style/formatter API and automatic centering across canvas sizes; done means the package and example render as specified.

Written by the indexing model from the issue text.