React中使用 Ant Design Charts 图表

开发者小天2025-05-22 10:05
复制代码
// 引入 Ant Design Charts 的柱状图组件 Column
import { Column } from '@ant-design/charts';

// 定义函数组件 App，用于展示柱状图
function App() {
  // 数据源：每个对象代表一个柱子，包含类型（type）和销售额（sales）
  const data = [
    { type: '家具家电', sales: 38 },
    { type: '粮油副食', sales: 52 },
    { type: '生鲜水果', sales: 61 },
    { type: '美容洗护', sales: 145 },
    { type: '母婴用品', sales: 48 },
    { type: '进口食品', sales: 38 },
    { type: '食品饮料', sales: 38 },
    { type: '家庭清洁', sales: 38 },
  ];

  // 配置项：传递给 Column 组件的图表配置
  const config = {
    data,                // 使用上面定义的数据
    xField: 'type',      // X 轴字段名，对应数据中的 "type"
    yField: 'sales',     // Y 轴字段名，对应数据中的 "sales"

    // 标签配置：显示在柱子上的数值标签样式
    label: {
      position: 'top',   // 标签显示在柱子顶部
      style: {
        fill: '#FFFFFF', // 标签文字颜色为白色
        opacity: 1       // 设置不透明，确保清晰可见
      }
    },

    // X 轴配置
    xAxis: {
      label: {
        autoHide: true,   // 当标签过长时自动隐藏
        autoRotate: true  // 自动旋转标签以避免重叠
      }
    }
  };

  // 返回 JSX 结构
  return (
    <div style={{ width: '500px', margin: '100px' }}>
      {/* 提示文本 */}
      hello App

      {/* 渲染柱状图，传入配置项 */}
      <Column {...config} />
    </div>
  );
}

// 导出组件，供其他文件引入使用
export default App;
效果图：