Ant Design Charts 2.x 版本环形图动态统计功能实现指南

Ant Design Charts 2.x 版本环形图动态统计功能实现指南

前言

Ant Design Charts 作为 Ant Design 生态中重要的数据可视化组件库，在从 1.x 升级到 2.x 版本后，API 和功能实现方式发生了一些变化。本文将详细介绍如何在 Ant Design Charts 2.x 版本中实现类似 1.x 版本的环形图(Donut)动态统计功能。

环形图统计功能的核心概念

环形图统计功能是指在环形图中心区域显示汇总数据或关键指标的功能。这种设计既能展示各部分的比例关系，又能突出整体数据，是数据可视化中常见的表现手法。

2.x 版本实现方案

基本环形图配置

首先需要配置基本的环形图参数：

const config = {
  data: [
    { type: '分类一', value: 27 },
    { type: '分类二', value: 25 },
    { type: '分类三', value: 18 },
    { type: '分类四', value: 15 },
    { type: '分类五', value: 10 },
    { type: '其他', value: 5 },
  ],
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.6,
};

添加统计内容

在 2.x 版本中，可以通过 annotations 配置项在图表中心添加统计信息：

const config = {
  // ...其他配置
  annotations: [
    {
      type: 'text',
      position: ['50%', '50%'],
      content: '总计',
      style: {
        fontSize: 14,
        fill: 'rgba(0, 0, 0, 0.65)',
        textAlign: 'center',
      },
      offsetY: -20,
    },
    {
      type: 'text',
      position: ['50%', '50%'],
      content: '100',
      style: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center',
      },
      offsetY: 0,
    },
  ],
};

动态统计值计算

要实现动态统计，需要先计算数据总和：

const total = data.reduce((sum, item) => sum + item.value, 0);

然后将计算出的 total 值应用到 annotations 中：

content: `${total}`,

完整示例代码

import { Pie } from '@ant-design/plots';

const DemoPie = () => {
  const data = [
    { type: '分类一', value: 27 },
    { type: '分类二', value: 25 },
    { type: '分类三', value: 18 },
    { type: '分类四', value: 15 },
    { type: '分类五', value: 10 },
    { type: '其他', value: 5 },
  ];
  
  const total = data.reduce((sum, item) => sum + item.value, 0);
  
  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
    statistic: {
      title: false,
      content: false,
    },
    annotations: [
      {
        type: 'text',
        position: ['50%', '50%'],
        content: '总计',
        style: {
          fontSize: 14,
          fill: 'rgba(0, 0, 0, 0.65)',
          textAlign: 'center',
        },
        offsetY: -20,
      },
      {
        type: 'text',
        position: ['50%', '50%'],
        content: `${total}`,
        style: {
          fontSize: 20,
          fontWeight: 'bold',
          textAlign: 'center',
        },
        offsetY: 0,
      },
    ],
  };
  
  return <Pie {...config} />;
};

进阶功能

响应式更新

当数据动态变化时，环形图中心的统计值也需要相应更新。可以通过 React 的状态管理来实现：

const [data, setData] = useState(initialData);
const total = data.reduce((sum, item) => sum + item.value, 0);

useEffect(() => {
  // 当data变化时，total会自动重新计算
}, [data]);

样式定制

可以通过修改 annotations 的 style 属性来自定义统计信息的样式：

style: {
  fontSize: 24,
  fontWeight: 'bold',
  fill: '#1890ff',
  textAlign: 'center',
  textBaseline: 'middle',
}

多行统计信息

如果需要显示多行统计信息，可以通过调整 offsetY 值来实现：

annotations: [
  {
    type: 'text',
    position: ['50%', '50%'],
    content: '销售额',
    style: {
      fontSize: 14,
      fill: '#999',
    },
    offsetY: -30,
  },
  {
    type: 'text',
    position: ['50%', '50%'],
    content: `${total}`,
    style: {
      fontSize: 24,
      fontWeight: 'bold',
    },
    offsetY: 0,
  },
  {
    type: 'text',
    position: ['50%', '50%'],
    content: '同比增长 12%',
    style: {
      fontSize: 12,
      fill: '#999',
    },
    offsetY: 30,
  },
]

总结

Ant Design Charts 2.x 版本虽然与 1.x 版本的 API 有所不同，但通过合理使用 annotations 配置项，依然可以实现环形图中心的动态统计功能。这种方法灵活性强，可以自定义各种统计信息的样式和布局，满足不同业务场景的需求。开发者可以根据实际项目需求，进一步扩展和优化统计信息的展示效果。