React中使用 Ant Design Charts 图表

// 引入 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;

效果图：