React + Ant Design + ECharts 实战：手把手教你打造可视化智慧大屏，新手必看！」「从零开始：用 React 和 Ant Design 构建智慧大屏，完整代码+详细教程！」

本文链接：https://blog.youkuaiyun.com/sky10100100/article/details/145367651

效果图：

在这里插入图片描述

完整代码


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React + Ant Design + ECharts 智慧大屏</title>
  <!-- 引入 React 和 ReactDOM -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入 Babel（用于支持 JSX） -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 引入 Ant Design -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@4.24.13/dist/antd.min.css">
  <script src="https://cdn.jsdelivr.net/npm/antd@4.24.13/dist/antd.min.js"></script>
  <!-- 引入 ECharts 和 ECharts 地图 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 20px;
    }
    .dashboard {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .chart-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .chart {
      width: 100%;
      height: 400px;
    }
    .table-card {
      grid-column: span 2;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const { Table } = antd;

    const App = () => {
      const lineChartRef = React.useRef(null);
      const barChartRef = React.useRef(null);
      const pieChartRef = React.useRef(null);
      const mapChartRef = React.useRef(null);

      // 初始化折线图
      React.useEffect(() => {
        const chart = echarts.init(lineChartRef.current);
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisLabel: {
              color: '#333'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#333'
            }
          },
          series: [{
            name: '销售额',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            smooth: true,
            lineStyle: {
              color: '#ee6666'
            }
          }]
        };
        chart.setOption(option);
      }, []);

      // 初始化柱状图
      React.useEffect(() => {
        const chart = echarts.init(barChartRef.current);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: ['类别A', '类别B', '类别C', '类别D', '类别E'],
            axisLabel: {
              color: '#333'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#333'
            }
          },
          series: [{
            name: '销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            itemStyle: {
              color: '#5470c6'
            }
          }]
        };
        chart.setOption(option);
      }, []);

      // 初始化饼图
      React.useEffect(() => {
        const chart = echarts.init(pieChartRef.current);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '10%',
            left: 'center',
            textStyle: {
              color: '#333'
            }
          },
          series: [{
            name: '用户分布',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '北京' },
              { value: 735, name: '上海' },
              { value: 580, name: '广州' },
              { value: 484, name: '深圳' },
              { value: 300, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        chart.setOption(option);
      }, []);

      // 初始化地图
      React.useEffect(() => {
        const chart = echarts.init(mapChartRef.current);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange: {
              color: ['#e0ffff', '#006edd']
            }
          },
          series: [{
            name: '用户分布',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
              show: true,
              color: '#333'
            },
            data: [
              { name: '北京', value: 900 },
              { name: '上海', value: 800 },
              { name: '广东', value: 700 },
              { name: '浙江', value: 600 },
              { name: '江苏', value: 500 },
              { name: '四川', value: 400 },
              { name: '湖北', value: 300 }
            ]
          }]
        };
        chart.setOption(option);
      }, []);

      // 初始化表格数据
      const [tableData, setTableData] = React.useState([]);
      React.useEffect(() => {
        const data = [];
        for (let i = 0; i < 50; i++) {
          data.push({
            key: i,
            name: `用户 ${i}`,
            age: Math.floor(Math.random() * 50),
            address: `地址 ${i}`
          });
        }
        setTableData(data);
      }, []);

      // 表格列配置
      const columns = [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          sorter: (a, b) => a.age - b.age
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address'
        }
      ];

      return (
        <div>
          <div className="dashboard">
            <div className="chart-card">
              <div ref={lineChartRef} className="chart" />
            </div>
            <div className="chart-card">
              <div ref={barChartRef} className="chart" />
            </div>
            <div className="chart-card">
              <div ref={pieChartRef} className="chart" />
            </div>
            <div className="chart-card">
              <div ref={mapChartRef} className="chart" />
            </div>
            <div className="table-card">
              <Table dataSource={tableData} columns={columns} pagination={{ pageSize: 10 }} />
            </div>
          </div>
        </div>
      );
    };

    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>