Ant Design Charts 水球图自定义文案配置指南

Ant Design Charts 是一个基于 G2Plot 封装的 React 图表库，提供了丰富的可视化组件。其中水球图（Liquid Chart）是一种常用于展示百分比数据的可视化形式，形似水波填充的圆形，非常适合展示进度、完成率等场景。

水球图基本配置

水球图最基本的配置是通过 percent 属性设置填充比例：

const config = {
  percent: 0.65,  // 65%的填充比例
  height: 200
};

<Liquid {...config} />

自定义中心文案

Ant Design Charts 的水球图支持通过 style.contentText 属性来自定义中心显示的文案：

const liquidConfig = {
  percent: 0.3,
  style: {
    contentText: '自定义文案',  // 设置中心显示的文字
    outlineBorder: 4,        // 外边框宽度
    outlineDistance: 2,      // 外边框距离
    waveLength: 128          // 水波长度
  },
  height: 240
};

<Liquid {...liquidConfig} />

进阶自定义选项

除了简单的文字替换，水球图还支持更丰富的自定义选项：

1. 多行文本：可以通过 \n 实现多行文本显示
2. 样式调整：通过 style 中的其他属性调整水波的视觉效果
3. 动态内容：结合 React 状态管理实现动态更新的文案

// 多行文本示例
const multiLineConfig = {
  percent: 0.5,
  style: {
    contentText: '完成率\n50%',
    // 其他样式配置...
  }
};

常见问题解决方案

1. 文档查找困难：Ant Design Charts 的配置项可以参考底层 G2Plot 的文档，很多配置项是通用的
2. 样式不生效：确保样式属性写在 style 对象中，而不是直接放在顶层配置
3. 动态更新问题：当文案需要根据数据变化时，确保组件能够接收到最新的 props

最佳实践建议

1. 保持中心文案简洁明了，避免过长文本影响可视化效果
2. 考虑使用百分比格式与填充比例保持一致
3. 对于重要数据，可以结合 Tooltip 提供更详细的信息
4. 适当调整水波颜色和动画效果以增强用户体验

通过合理配置，Ant Design Charts 的水球图可以很好地满足各种数据展示需求，特别是在仪表盘、进度监控等场景中表现优异。