g2-extensions-indicator #5760

hustcc posted onGitHub

AntV Open Source Contribution Plan（可选）

我同意将这个 Issue 参与 OSCP 计划

Issue 类型

中级任务

任务介绍

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

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 中增加一个 @antv/g2-extension-indicator 的包。

使用方式和 API

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

实现注意点：

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

参考说明

样式设计参考：