仪表盘的界面用react+ice+ant来写代码饼图柱状图词云折线

仪表盘的界面用react+ice+ant来写代码饼图柱状图词云ant-design-charts.antgroup

📈 图表分类 | Ant Design Charts 可视化组件库

开始：

import React from 'react';
import { Card, Row, Col, Statistic, Progress, Table, Space, Tag } from 'antd';
import { LineChartOutlined, PieChartOutlined, ShoppingCartOutlined, UserOutlined } from '@ant-design/icons';
import { Column, Line, Funnel, Pie, WordCloud } from '@ant-design/charts';

import './Dashboard.css'; // 用于自定义样式

const WordCloudData = {
  paddingTop: 40,
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/philosophy-word.json',
  },
  layout: { spiral: 'rectangular' },
  colorField: 'text',
};

const Dashboard = () => {
  // 模拟数据
  const data = [
    {
      name: 'John',
      age: 28,
      status: 'active',
    },
    {
      name: 'Jane',
      age: 24,
      status: 'inactive',
    },
    {
      name: 'Doe',
      age: 30,
      status: 'active',
    },
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Status',
      key: 'status',
      render: (text, record) => (
        <Space size="middle">
          {record.status === 'active' ? <Tag color="green">Active</Tag> : <Tag color="red">Inactive</Tag>}
        </Space>
      ),
    },
  ];

  // 柱状图数据
  const columnData = [
    { year: '2020', value: 10 },
    { year: '2021', value: 20 },
    { year: '2022', value: 30 },
    { year: '2023', value: 40 },
  ];
  const columnConfig = {
    data: columnData,
    xField: 'year',
    yField: 'value',
    label: { position: 'top' },
    color: ['#1890ff', '#facc14', '#2fc25b', '#f04864'],
  };

  // 漏斗图数据
  const funnelData = [
    { stage: 'Awareness', value: 100 },
    { stage: 'Interest', value: 80 },
    { stage: 'Evaluation', value: 60 },
    { stage: 'Purchase', value: 40 },
  ];
  const funnelConfig = {
    data: funnelData,
    xField: 'stage',
    yField: 'value',
    label: { position: 'inside' },
    color: ['#1890ff', '#facc14', '#2fc25b', '#f04864'],
  };

  // Line Chart 数据
  const lineData = {
    xField: 'x',
    yField: 'y',
    data: [
      { x: 'A', y: 20 },
      { x: 'B', y: 30 },
      { x: 'C', y: 40 },
      { x: 'D', y: 50 },
      { x: 'E', y: 60 },
    ],
  };

  // Pie Chart 数据
  const pieData = [
    { type: 'Category A', value: 20 },
    { type: 'Category B', value: 30 },
    { type: 'Category C', value: 40 },
    { type: 'Category D', value: 10 },
  ];

  return (
    <div className="dashboard-container">
      <Row gutter={16}>
        <Col span={6}>
          <Card bordered={false} title="Total Users" extra={<UserOutlined />}>
            <Statistic value={12345} suffix="users" />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} title="Total Sales" extra={<ShoppingCartOutlined />}>
            <Statistic value={9876} suffix="sales" />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} title="Conversion Rate" extra={<LineChartOutlined />}>
            <Statistic value={88.88} suffix="%" />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false} title="Active Users" extra={<PieChartOutlined />}>
            <Statistic value={5000} suffix="users" />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="柱状图" bordered={false}>
            <Column {...columnConfig} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="漏斗图" bordered={false}>
            <Funnel {...funnelConfig} />
          </Card>
        </Col>
      </Row>

      <Row gutter={16} style={{ marginTop: 20 }}>
        <Col span={12}>
          <Card bordered={false} title="Sales Trends">
            <Line {...lineData} />
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false} title="Category Distribution">
            <Pie
              appendPadding={[0, 0, 0, 0]}
              data={pieData}
              angleField="value"
              colorField="type"
              label={{
                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
              }}
              interactions={[
                {
                  type: 'element-selected',
                },
                {
                  type: 'element-active',
                },
              ]}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="词云" bordered={false}>
            <WordCloud {...WordCloudData} />;
          </Card>
        </Col>
      </Row>

      <Row gutter={16} style={{ marginTop: 20 }}>
        <Col span={24}>
          <Card bordered={false} title="User List">
            <Table columns={columns} dataSource={data} rowKey="name" />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;

词云的json数据：

[{"value":11.739204307083542,"text":"水是","name":"泰利斯"},{"value":9.23723855786,"text":"之源","name":"泰利斯"},{"value":7.75434839431,"text":"万物","name":"泰利斯"},{"value":11.3865516372,"text":"物质","name":"安纳克西曼德"},{"value":7.75434839431,"text":"万物","name":"安纳克西曼德"},{"value":5.83541244308,"text":"创造","name":"安纳克西曼德"},{"value":4.27215339948,"text":"形成","name":"安纳克西曼德"},{"value":4.2025551294,"text":"一定","name":"安纳克西曼德"},{"value":9.23723855786,"text":"之源","name":"安纳西梅利斯"},{"value":7.75434839431,"text":"万物","name":"安纳西梅利斯"},{"value":7.34959731693,"text":"必定","name":"安纳西梅利斯"},{"value":6.57487014938,"text":"气体","name":"安纳西梅利斯"},{"value":6.32509300042,"text":"空气","name":"安纳西梅利斯"},{"value":10.1394775363,"text":"任何事物","name":"帕梅尼德斯"},{"value":9.29550746599,"text":"感官","name":"帕梅尼德斯"},{"value":7.13910488317,"text":"可靠","name":"帕梅尼德斯"},{"value":6.89126871927,"text":"事物","name":"帕梅尼德斯"},{"value":6.2256471303,"text":"没有","name":"帕梅尼德斯"},{"value":11.739204307083542,"text":"会变","name":"赫拉克里特斯"},{"value":9.29550746599,"text":"感官","name":"赫拉克里特斯"},{"value":8.70772080109,"text":"认知","name":"赫拉克里特斯"},{"value":7.75434839431,"text":"万物","name":"赫拉克里特斯"},{"value":7.13910488317,"text":"可靠","name":"赫拉克里特斯"},{"value":13.68728134056,"text":"元素","name":"恩陪窦"},{"value":10.2897597393,"text":"分合","name":"恩陪窦"},{"value":10.1871055853,"text":"聚散","name":"恩陪窦"},{"value":8.42421410004,"text":"四种","name":"恩陪窦"},{"value":8.29487558568,"text":"世间","name":"恩陪窦"},{"value":8.77077893705,"text":"肉眼","name":"安纳萨哥拉斯"},{"value":8.18364995057,"text":"微小","name":"安纳萨哥拉斯"},{"value":8.10461990121,"text":"大自然","name":"安纳萨哥拉斯"},{"value":7.69410172525,"text":"粒子","name":"安纳萨哥拉斯"},{"value":7.65457088649,"text":"分割","name":"安纳萨哥拉斯"},{"value":21.6192703972,"text":"积木","name":"德谟克利里特斯"},{"value":10.7226238216,"text":"永恒不变","name":"德谟克利里特斯"},{"value":8.18364995057,"text":"微小","name":"德谟克利里特斯"},{"value":7.14957618304,"text":"原子","name":"德谟克利里特斯"},{"value":7.1038539337,"text":"最小","name":"德谟克利里特斯"},{"value":11.739204307083542,"text":"有何","name":"普罗塔格拉斯"},{"value":11.739204307083542,"text":"是错","name":"普罗塔格拉斯"},{"value":8.10461990121,"text":"而定","name":"普罗塔格拉斯"},{"value":7.95787827685,"text":"尺度","name":"普罗塔格拉斯"},{"value":7.36109169636,"text":"衡量","name":"普罗塔格拉斯"},{"value":11.7034530746,"text":"明辨是非","name":"苏格拉底"},{"value":9.14102377386,"text":"存在","name":"苏格拉底"},{"value":8.98802276624,"text":"一无所知","name":"苏格拉底"},{"value":6.90950076485,"text":"理性","name":"苏格拉底"},{"value":5.82167939329,"text":"一件","name":"苏格拉底"},{"value":12.06102341102,"text":"模式","name":"柏拉图"},{"value":11.739204307083542,"text":"理型","name":"柏拉图"},{"value":11.3865516372,"text":"物质","name":"柏拉图"},{"value":9.54656840164,"text":"东西","name":"柏拉图"},{"value":8.73505881114,"text":"世界","name":"柏拉图"},{"value":34.45634359635,"text":"事物","name":"亚里士多德"},{"value":27.886522397969998,"text":"感官","name":"亚里士多德"},{"value":20.4235963958,"text":"质料","name":"亚里士多德"},{"value":12.1089181827,"text":"和谐一致","name":"亚里士多德"},{"value":10.4994802703,"text":"充分运用","name":"亚里士多德"},{"value":11.739204307083542,"text":"一袭","name":"第欧根尼"},{"value":10.1630080337,"text":"木桶","name":"第欧根尼"},{"value":9.30555780184,"text":"木棍","name":"第欧根尼"},{"value":9.26594866375,"text":"斗篷","name":"第欧根尼"},{"value":9.22784881751,"text":"一袋","name":"第欧根尼"},{"value":6.47412857958,"text":"痛苦","name":"伊壁鸠鲁"},{"value":6.06866347147,"text":"避免","name":"伊壁鸠鲁"},{"value":5.02315619812,"text":"形式","name":"伊壁鸠鲁"},{"value":4.80149232937,"text":"方式","name":"伊壁鸠鲁"},{"value":4.13163619599,"text":"一种","name":"伊壁鸠鲁"},{"value":21.209681572,"text":"万事万物","name":"普罗汀"},{"value":7.48068272383,"text":"上帝","name":"普罗汀"},{"value":7.37711534583,"text":"一体","name":"普罗汀"},{"value":7.36834335975,"text":"宇宙","name":"普罗汀"},{"value":5.67973648369,"text":"之中","name":"普罗汀"},{"value":9.17328983326,"text":"赦免","name":"耶稣"},{"value":8.04274449749,"text":"拯救","name":"耶稣"},{"value":7.48068272383,"text":"上帝","name":"耶稣"},{"value":4.60931044136,"text":"得到","name":"耶稣"},{"value":2.81755097213,"text":"一个","name":"耶稣"},{"value":14.96136544766,"text":"上帝","name":"保罗"},{"value":7.95787827685,"text":"世人","name":"保罗"},{"value":7.22485443034,"text":"显现","name":"保罗"},{"value":7.07413242842,"text":"试图","name":"保罗"},{"value":6.04010686644,"text":"寻找","name":"保罗"},{"value":14.96136544766,"text":"上帝","name":"圣奥古斯丁"},{"value":11.67082488616,"text":"创造","name":"圣奥古斯丁"},{"value":9.80633308975,"text":"虚空","name":"圣奥古斯丁"},{"value":8.73505881114,"text":"世界","name":"圣奥古斯丁"},{"value":5.23799979382,"text":"心中","name":"圣奥古斯丁"},{"value":16.57509909118,"text":"启示","name":"圣多玛斯"},{"value":14.51638170122,"text":"信仰","name":"圣多玛斯"},{"value":13.8190015297,"text":"理性","name":"圣多玛斯"},{"value":10.5684731418,"text":"观感","name":"圣多玛斯"},{"value":9.04086524761,"text":"并不一定","name":"圣多玛斯"},{"value":12.57964972316,"text":"地球","name":"哥白尼"},{"value":12.45583951066,"text":"太阳","name":"哥白尼"},{"value":11.39201164604,"text":"运行","name":"哥白尼"},{"value":6.22698952271,"text":"并未","name":"哥白尼"},{"value":14.35128801962,"text":"物体","name":"伽利略"},{"value":11.18052531558,"text":"状态","name":"伽利略"},{"value":10.0505300503,"text":"轴心","name":"伽利略"},{"value":9.56994431169,"text":"星球","name":"伽利略"},{"value":9.29550746599,"text":"感官","name":"伽利略"},{"value":21.52693202943,"text":"物体","name":"牛顿"},{"value":8.68574189437,"text":"递增","name":"牛顿"},{"value":8.29120585679,"text":"递减","name":"牛顿"},{"value":7.9817837977,"text":"行星","name":"牛顿"},{"value":7.36834335975,"text":"宇宙","name":"牛顿"},{"value":13.900677652,"text":"故我在","name":"笛卡尔"},{"value":11.9547675029,"text":"真实世界","name":"笛卡尔"},{"value":11.739204307083542,"text":"我思","name":"笛卡尔"},{"value":10.2371160058,"text":"之有","name":"笛卡尔"},{"value":7.96050639926,"text":"细分","name":"笛卡尔"},{"value":22.44204817149,"text":"上帝","name":"斯宾诺莎"},{"value":12.1089181827,"text":"主宰世界","name":"斯宾诺莎"},{"value":10.8096351986,"text":"牵线","name":"斯宾诺莎"},{"value":10.6818018271,"text":"自然法则","name":"斯宾诺莎"},{"value":9.7898037878,"text":"木偶","name":"斯宾诺莎"},{"value":18.59101493198,"text":"感官","name":"洛克"},{"value":15.51728049278,"text":"心灵","name":"洛克"},{"value":11.9547675029,"text":"察知","name":"洛克"},{"value":10.1394775363,"text":"任何事物","name":"洛克"},{"value":8.74738605748,"text":"次要","name":"洛克"},{"value":14.95161725614,"text":"哲学家","name":"休谟"},{"value":12.5143832909,"text":"接连起来","name":"休谟"},{"value":11.739204307083542,"text":"省思","name":"休谟"},{"value":11.64335878658,"text":"一件","name":"休谟"},{"value":10.2897597393,"text":"行为准则","name":"休谟"},{"value":13.78796485028,"text":"感受","name":"柏克莱"},{"value":10.3743171274,"text":"天主","name":"柏克莱"},{"value":10.2117981979,"text":"质料","name":"柏克莱"},{"value":9.58318953844,"text":"周遭","name":"柏克莱"},{"value":9.14102377386,"text":"存在","name":"柏克莱"},{"value":14.96136544766,"text":"上帝","name":"康德"},{"value":14.35850390238,"text":"头顶","name":"康德"},{"value":12.5143832909,"text":"因果律","name":"康德"},{"value":11.739204307083542,"text":"存不存","name":"康德"},{"value":11.0674643079,"text":"根植","name":"康德"},{"value":16.20923980242,"text":"大自然","name":"谢林"},{"value":13.10258821671,"text":"世界","name":"谢林"},{"value":11.3865516372,"text":"物质","name":"谢林"},{"value":11.27020388852,"text":"一个","name":"谢林"},{"value":10.1164880181,"text":"无休止","name":"谢林"},{"value":13.10258821671,"text":"世界","name":"黑格尔"},{"value":11.23942650284,"text":"精神","name":"黑格尔"},{"value":10.9049453784,"text":"再读","name":"黑格尔"},{"value":10.1394775363,"text":"脚踏实地","name":"黑格尔"},{"value":8.60236028543,"text":"辩证法","name":"黑格尔"},{"value":26.6063055869,"text":"阶段","name":"祁克果"},{"value":13.0408437271,"text":"真实","name":"祁克果"},{"value":11.739204307083542,"text":"人正","name":"祁克果"},{"value":10.48883682488,"text":"是否","name":"祁克果"},{"value":9.5062284973,"text":"美感","name":"祁克果"},{"value":17.0798274558,"text":"物质","name":"马克思"},{"value":11.739204307083542,"text":"新的","name":"马克思"},{"value":11.23942650284,"text":"精神","name":"马克思"},{"value":10.4471578861,"text":"改变","name":"马克思"},{"value":10.21443458184,"text":"造成","name":"马克思"},{"value":16.20923980242,"text":"一艘","name":"达尔文"},{"value":15.07529909688,"text":"航行","name":"达尔文"},{"value":11.739204307083542,"text":"人则","name":"达尔文"},{"value":11.7034530746,"text":"物竞天择","name":"达尔文"},{"value":10.5684731418,"text":"适者生存","name":"达尔文"},{"value":19.89886786678,"text":"潜意识","name":"弗洛伊德"},{"value":12.76848869812,"text":"意识","name":"弗洛伊德"},{"value":9.96885201925,"text":"合理化","name":"弗洛伊德"},{"value":9.17328983326,"text":"投射","name":"弗洛伊德"},{"value":8.73589167805,"text":"一小部分","name":"弗洛伊德"},{"value":11.8006563133,"text":"自由","name":"萨特"},{"value":11.739204307083542,"text":"在己","name":"萨特"},{"value":11.739204307083542,"text":"为己","name":"萨特"},{"value":11.739204307083542,"text":"地问","name":"萨特"},{"value":11.4157710022,"text":"疏离","name":"萨特"}]

结束