首页
/ 开源UI组件库集成数据可视化工具全指南

开源UI组件库集成数据可视化工具全指南

2026-04-02 09:36:24作者：庞队千Virginia
ant-design
An enterprise-class UI design language and React UI library
项目地址：https://gitcode.com/GitHub_Trending/an/ant-design

在数据驱动决策的时代，将数据可视化能力集成到UI组件库中已成为企业级应用开发的核心需求。本文将系统讲解如何在开源UI组件库中无缝集成数据可视化工具，从选型策略到性能优化，构建既美观又高效的数据展示解决方案。

一、可视化工具选型策略

选择合适的数据可视化库就像为不同的菜肴选择合适的厨具——每种工具都有其擅长的应用场景。在UI组件库生态中，我们主要关注三类可视化工具：

重量级全能选手：ECharts

ECharts就像厨房里的多功能料理机，支持80+图表类型，从基础折线图到复杂桑基图一应俱全。其特点是：

  • 优势：完整的图表类型覆盖，成熟的交互系统，庞大的社区支持
  • 适用场景：企业级仪表盘、大数据可视化、复杂数据关系展示
  • 集成难度：中等（需处理DOM挂载与React生命周期协调）

轻量级React原生方案：Recharts

Recharts如同精致的日式餐具，专为React生态设计，组件化思维与UI库完美契合：

  • 优势：React组件化API，零配置开箱即用，TypeScript友好
  • 适用场景：轻量级数据展示、中台系统数据卡片、实时数据监控
  • 集成难度：低（React组件天然融合）

高性能科学计算可视化：D3.js

D3.js好比精密的实验室仪器，提供底层图形操作能力，适合深度定制：

  • 优势：无限定制可能，数学计算能力强，适合复杂数据可视化
  • 适用场景：学术研究可视化、地理信息系统、自定义图表开发
  • 集成难度：高（需手动处理DOM操作与React渲染协调）

💡 技术提示：评估可视化库时可从三个维度考量：数据规模（百万级以上优先ECharts）、交互复杂度（需深度定制优先D3）、开发效率（快速迭代优先Recharts）。

二、核心功能实现方案

1. ECharts与Ant Design集成

ECharts与Ant Design的集成就像将专业相机与手机结合——需要一个适配层来协调两者的工作方式：

import { useEffect, useRef, useState } from 'react';
import { Card, Spin, Select } from 'antd';
import * as echarts from 'echarts';

// 封装ECharts组件，使其具备Ant Design风格
const EChartsCard = ({ title, data, optionGenerator }) => {
  const chartRef = useRef(null);
  const [loading, setLoading] = useState(true);
  
  // 初始化图表（关键生命周期管理）
  useEffect(() => {
    let chartInstance;
    
    const initChart = () => {
      setLoading(true);
      // 确保DOM已挂载
      if (chartRef.current) {
        // 创建ECharts实例（如同打开相机电源）
        chartInstance = echarts.init(chartRef.current);
        // 应用主题（Ant Design风格统一）
        chartInstance.setOption({
          backgroundColor: 'transparent',
          textStyle: {
            fontFamily: 'Inter, sans-serif' // 与Ant Design字体统一
          },
          ...optionGenerator(data)
        });
        setLoading(false);
      }
    };
    
    initChart();
    
    // 响应窗口大小变化（如同相机自动对焦）
    const handleResize = () => chartInstance?.resize();
    window.addEventListener('resize', handleResize);
    
    // 清理函数（重要！防止内存泄漏）
    return () => {
      window.removeEventListener('resize', handleResize);
      chartInstance?.dispose();
    };
  }, [data, optionGenerator]);
  
  return (
    <Card title={title} bordered={false}>
      <Spin spinning={loading} tip="数据加载中...">
        {/* 图表容器必须指定尺寸 */}
        <div 
          ref={chartRef} 
          style={{ width: '100%', height: '400px', minWidth: '300px' }} 
        />
      </Spin>
    </Card>
  );
};

// 使用示例：销售趋势图表
const SalesTrendChart = ({ department }) => {
  const [salesData, setSalesData] = useState([]);
  
  // 获取销售数据
  useEffect(() => {
    fetch(`/api/sales?dept=${department}`)
      .then(res => res.json())
      .then(data => setSalesData(data));
  }, [department]);
  
  // 图表配置生成器
  const generateOption = (data) => ({
    tooltip: {
      trigger: 'axis',
      // Ant Design风格的提示框
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#e8e8e8',
      textStyle: { color: '#333' }
    },
    xAxis: { type: 'category', data: data.map(item => item.month) },
    yAxis: { type: 'value' },
    series: [{ 
      data: data.map(item => item.amount), 
      type: 'line',
      // 平滑曲线与渐变填充（提升视觉体验）
      smooth: true,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
                      { offset: 1, color: 'rgba(24, 144, 255, 0)' }]
        }
      }
    }]
  });
  
  return (
    <EChartsCard 
      title="月度销售趋势" 
      data={salesData} 
      optionGenerator={generateOption} 
    />
  );
};

2. Recharts与Ant Design组件联动

Recharts与Ant Design的结合就像乐高积木——都是组件化设计，可以无缝拼接：

import { useState } from 'react';
import { Card, Radio, Space, Badge } from 'antd';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

// 带数据筛选功能的图表组件
const AnalyticsDashboard = () => {
  // 数据筛选状态（与Ant Design表单控件联动）
  const [timeRange, setTimeRange] = useState('week');
  
  // 模拟数据（实际项目中从API获取）
  const generateData = (range) => {
    const data = [];
    const now = new Date();
    
    for (let i = 0; i < (range === 'week' ? 7 : 30); i++) {
      const date = new Date(now);
      date.setDate(now.getDate() - (range === 'week' ? 6 - i : 29 - i));
      
      data.push({
        date: date.toLocaleDateString(),
        visitors: Math.floor(Math.random() * 1000) + 500,
        conversions: Math.floor(Math.random() * 100) + 10,
        // 转化率计算（业务指标展示）
        rate: ((Math.random() * 5 + 10) / 100).toFixed(2)
      });
    }
    
    return data;
  };
  
  const chartData = generateData(timeRange);
  
  return (
    <Card title="用户行为分析" bordered={false}>
      <Space style={{ marginBottom: 16 }}>
        <span>时间范围：</span>
        <Radio.Group value={timeRange} onChange={e => setTimeRange(e.target.value)}>
          <Radio.Button value="week">周</Radio.Button>
          <Radio.Button value="month">月</Radio.Button>
        </Radio.Group>
        
        {/* 关键指标展示（与图表数据联动） */}
        <Badge 
          count={`${chartData[chartData.length-1].rate}%`} 
          color="#52c41a"
          style={{ marginLeft: 16 }}
        >
          <span>转化率</span>
        </Badge>
      </Space>
      
      {/* 响应式图表容器（自动适应父容器大小） */}
      <div style={{ width: '100%', height: 400 }}>
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
            <XAxis dataKey="date" stroke="#999" />
            <YAxis yAxisId="left" stroke="#8884d8" />
            <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
            
            {/* 双Y轴设计（同时展示访问量和转化率） */}
            <Tooltip 
              contentStyle={{ 
                backgroundColor: 'white', 
                border: '1px solid #e8e8e8',
                borderRadius: '4px' 
              }} 
            />
            
            <Line 
              yAxisId="left" 
              type="monotone" 
              dataKey="visitors" 
              stroke="#8884d8" 
              activeDot={{ r: 8 }} 
              name="访问量"
            />
            <Line 
              yAxisId="right" 
              type="monotone" 
              dataKey="conversions" 
              stroke="#82ca9d" 
              name="转化数"
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

三、扩展实践：高级功能实现

1. 大数据量渲染优化

处理十万级以上数据点时，直接渲染会导致界面卡顿，这就像试图同时显示一万张照片——需要特殊的处理策略：

import { useMemo } from 'react';
import { Spin, Alert } from 'antd';
import { LineChart, Line, XAxis, YAxis, ResponsiveContainer } from 'recharts';

// 大数据优化组件
const BigDataChart = ({ rawData }) => {
  // 数据降采样处理（关键优化！）
  const optimizedData = useMemo(() => {
    if (!rawData || rawData.length <= 1000) return rawData;
    
    // 采用LTTB算法（ Largest-Triangle-Three-Buckets）保留数据特征
    const downsample = (data, threshold) => {
      const sampled = [];
      const bucketSize = Math.ceil(data.length / threshold);
      
      for (let i = 0; i < data.length; i += bucketSize) {
        const bucket = data.slice(i, i + bucketSize);
        // 取桶内最大值点（保留数据特征）
        const maxPoint = bucket.reduce((max, point) => 
          point.value > max.value ? point : max, bucket[0]);
        sampled.push(maxPoint);
      }
      
      return sampled;
    };
    
    return downsample(rawData, 500); // 降采样到500个点
  }, [rawData]);
  
  // 数据加载状态处理
  if (!rawData) return <Spin size="large" tip="加载大数据..." />;
  if (rawData.length === 0) return <Alert message="无数据可显示" type="info" />;
  
  return (
    <div style={{ width: '100%', height: 400 }}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={optimizedData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
          <XAxis dataKey="time" tick={{ fontSize: 12 }} />
          <YAxis tick={{ fontSize: 12 }} />
          <Line 
            type="monotone" 
            dataKey="value" 
            stroke="#1890ff" 
            strokeWidth={2}
            dot={false} // 禁用单点渲染
            activeDot={{ r: 6 }} // 仅在交互时显示点
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

⚠️ 注意事项：大数据可视化优化需综合考虑：

  • 数据降采样（保留关键特征点）
  • 禁用不必要的动画和交互
  • 使用WebWorker处理数据转换
  • 实现虚拟滚动（只渲染可见区域数据）

2. 数据处理与UI组件联动方案

将数据可视化与UI组件联动，就像打造智能厨房——不同设备协同工作，提供一体化体验：

方案一：表格与图表联动筛选

import { useState } from 'react';
import { Card, Table, Space } from 'antd';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell } from 'recharts';

const TableChart联动 = () => {
  // 原始数据
  const allData = [
    { name: '产品A', sales: 1200, profit: 300, region: '华东' },
    { name: '产品B', sales: 800, profit: 160, region: '华北' },
    { name: '产品C', sales: 1500, profit: 450, region: '华南' },
    // ...更多数据
  ];
  
  // 筛选状态
  const [selectedRegions, setSelectedRegions] = useState([]);
  
  // 筛选后的数据
  const filteredData = selectedRegions.length 
    ? allData.filter(item => selectedRegions.includes(item.region))
    : allData;
  
  // 表格选择处理
  const onSelectChange = (selectedRowKeys) => {
    setSelectedRegions(selectedRowKeys);
  };
  
  const columns = [
    { title: '产品名称', dataIndex: 'name', key: 'name' },
    { title: '销售额', dataIndex: 'sales', key: 'sales' },
    { title: '利润', dataIndex: 'profit', key: 'profit' },
    { title: '区域', dataIndex: 'region', key: 'region' },
  ];
  
  // 图表颜色映射
  const COLORS = {
    '华东': '#1890ff',
    '华北': '#52c41a',
    '华南': '#fa8c16',
    '西部': '#ff4d4f'
  };
  
  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <Card title="区域销售数据">
        <Table
          columns={columns}
          dataSource={allData}
          rowKey="name"
          rowSelection={{
            type: 'checkbox',
            selectedRowKeys: selectedRegions,
            onChange: onSelectChange,
            getCheckboxProps: record => ({
              value: record.region,
            }),
          }}
        />
      </Card>
      
      <Card title="产品销售额对比">
        <div style={{ height: 400 }}>
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={filteredData}>
              <XAxis dataKey="name" />
              <YAxis />
              <Bar dataKey="sales">
                {filteredData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[entry.region]} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </Card>
    </Space>
  );
};

方案二：表单控件驱动图表数据

import { useState } from 'react';
import { Card, Form, Select, Slider, Button, Space } from 'antd';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

const FormDrivenChart = () => {
  const [form] = Form.useForm();
  const [chartData, setChartData] = useState([]);
  
  // 生成模拟数据
  const generateData = (params) => {
    const { categoryCount, variance } = params;
    const data = [];
    
    for (let i = 0; i < categoryCount; i++) {
      // 基于方差参数生成有差异的数据
      const value = Math.floor(Math.random() * 100 * variance) + 10;
      data.push({
        name: `分类${i+1}`,
        value,
        color: `hsl(${i * (360 / categoryCount)}, 70%, 60%)`
      });
    }
    
    return data;
  };
  
  // 表单提交处理
  const handleSubmit = (values) => {
    setChartData(generateData(values));
  };
  
  return (
    <Card title="自定义数据分布模拟">
      <Form 
        form={form} 
        layout="inline" 
        initialValues={{ categoryCount: 5, variance: 5 }}
        onFinish={handleSubmit}
      >
        <Form.Item name="categoryCount" label="分类数量">
          <Slider min={3} max={12} marks={{ 3: '3', 6: '6', 9: '9', 12: '12' }} />
        </Form.Item>
        <Form.Item name="variance" label="数据差异度">
          <Select>
            <Select.Option value={1}>均匀分布</Select.Option>
            <Select.Option value={3}>中等差异</Select.Option>
            <Select.Option value={5}>显著差异</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">生成图表</Button>
        </Form.Item>
      </Form>
      
      <div style={{ height: 400, marginTop: 20 }}>
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={chartData}
              cx="50%"
              cy="50%"
              labelLine={false}
              outerRadius={120}
              fill="#8884d8"
              dataKey="value"
              label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
            >
              {chartData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

3. 响应式可视化设计

响应式可视化就像可折叠的旅行杯——在不同设备上自动调整形态，保持最佳使用体验：

import { useLayoutEffect, useState } from 'react';
import { Card } from 'antd';
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, ResponsiveContainer } from 'recharts';

// 响应式图表组件
const ResponsiveAnalytics = ({ data }) => {
  // 检测屏幕尺寸
  const [screenSize, setScreenSize] = useState('desktop');
  
  useLayoutEffect(() => {
    // 监听窗口大小变化
    const handleResize = () => {
      const width = window.innerWidth;
      if (width < 576) {
        setScreenSize('mobile');
      } else if (width < 992) {
        setScreenSize('tablet');
      } else {
        setScreenSize('desktop');
      }
    };
    
    handleResize(); // 初始化
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  // 根据屏幕尺寸调整图表配置（移动优先设计）
  const renderChart = () => {
    // 移动端：简化图表，仅显示核心数据
    if (screenSize === 'mobile') {
      return (
        <LineChart data={data}>
          <XAxis dataKey="name" tick={{ fontSize: 10 }} />
          <YAxis tick={{ fontSize: 10 }} />
          <Line type="monotone" dataKey="value" stroke="#1890ff" />
        </LineChart>
      );
    }
    
    // 平板：显示双数据系列
    if (screenSize === 'tablet') {
      return (
        <LineChart data={data}>
          <XAxis dataKey="name" />
          <YAxis yAxisId="left" />
          <YAxis yAxisId="right" orientation="right" />
          <Line yAxisId="left" type="monotone" dataKey="value" stroke="#1890ff" />
          <Line yAxisId="right" type="monotone" dataKey="target" stroke="#fa8c16" />
        </LineChart>
      );
    }
    
    // 桌面端：完整图表，包含详细信息
    return (
      <BarChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Bar dataKey="value" fill="#1890ff" name="实际值" />
        <Bar dataKey="target" fill="#fa8c16" name="目标值" />
      </BarChart>
    );
  };
  
  return (
    <Card title="响应式数据分析">
      <div style={{ height: screenSize === 'mobile' ? 300 : 400 }}>
        <ResponsiveContainer width="100%" height="100%">
          {renderChart()}
        </ResponsiveContainer>
      </div>
    </Card>
  );
};

💡 技术提示：响应式可视化设计要点：

  1. 采用移动优先策略，从最小屏幕开始设计
  2. 关键指标在小屏幕上保持可见
  3. 交互方式适配触摸操作（移动端）
  4. 使用相对单位（%、rem）而非固定像素
  5. 考虑横屏/竖屏切换场景

四、常见问题解决方案

1. 图表容器尺寸问题

问题：图表初始化时容器尺寸为0，导致图表无法显示
解决方案：使用useEffect确保DOM挂载后再初始化图表

// 正确的图表初始化方式
useEffect(() => {
  let chart;
  
  // 等待DOM渲染完成
  const timer = setTimeout(() => {
    if (chartRef.current) {
      chart = echarts.init(chartRef.current);
      chart.setOption(option);
    }
  }, 0);
  
  return () => {
    clearTimeout(timer);
    chart?.dispose();
  };
}, [option]);

2. 数据更新时图表不刷新

问题：数据源变化后，图表未重新渲染
解决方案：显式监听数据变化并调用setOption

// 确保数据更新时图表刷新
useEffect(() => {
  if (chartInstance && data.length > 0) {
    // 仅更新数据部分，避免重绘整个图表（提升性能）
    chartInstance.setOption({
      series: [{ data: data.map(item => item.value) }]
    });
  }
}, [data]);

3. 多图表页面性能问题

问题：一个页面包含多个图表导致加载缓慢、卡顿
解决方案：实现图表懒加载和按需渲染

import { useInView } from 'react-intersection-observer';

const LazyChart = ({ data, option }) => {
  const { ref, inView } = useInView({
    triggerOnce: true, // 只触发一次
    threshold: 0.1 // 可见区域达到10%时加载
  });
  
  return (
    <div ref={ref} style={{ height: 400 }}>
      {inView ? (
        <EChartsComponent data={data} option={option} />
      ) : (
        <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Spin size="small" tip="图表加载中..." />
        </div>
      )}
    </div>
  );
};

4. 图表与主题样式冲突

问题：图表样式与UI库主题不统一
解决方案：基于主题变量动态生成图表样式

// 从Ant Design主题中提取颜色
import { useTheme } from 'antd';

const ThemedChart = () => {
  const { token } = useTheme();
  
  // 使用Ant Design主题变量定义图表样式
  const option = {
    color: [token.colorPrimary, token.colorSuccess, token.colorWarning],
    tooltip: {
      backgroundColor: token.colorBgContainer,
      borderColor: token.colorBorder,
      textStyle: { color: token.colorText }
    },
    // 其他样式配置...
  };
  
  return <EChartsComponent option={option} />;
};

5. 复杂交互场景下的状态管理

问题：图表交互与UI组件状态同步困难
解决方案：使用状态管理库统一管理可视化状态

// 使用React Context管理图表状态
import { createContext, useContext, useReducer } from 'react';

// 创建上下文
const ChartContext = createContext();

// 状态 reducer
const chartReducer = (state, action) => {
  switch (action.type) {
    case 'SELECT_DATA_POINT':
      return { ...state, selectedPoint: action.payload };
    case 'FILTER_DATA':
      return { ...state, filter: action.payload };
    default:
      return state;
  }
};

// 提供状态
export const ChartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(chartReducer, { 
    selectedPoint: null,
    filter: null
  });
  
  return (
    <ChartContext.Provider value={{ state, dispatch }}>
      {children}
    </ChartContext.Provider>
  );
};

// 在组件中使用
const DataPointDetail = () => {
  const { state } = useContext(ChartContext);
  
  return (
    <Card title="数据详情">
      {state.selectedPoint ? (
        <pre>{JSON.stringify(state.selectedPoint, null, 2)}</pre>
      ) : (
        <p>请在图表中选择数据点查看详情</p>
      )}
    </Card>
  );
};

附录：可视化资源推荐清单

图表库选择指南

  • 通用场景：ECharts（完整功能）、Recharts（React友好）
  • 科学可视化：D3.js（高度定制）、Plotly.js（交互丰富）
  • 地理信息：Mapbox GL（地图可视化）、deck.gl（大规模地理数据） = 移动端优先：Chart.js（轻量级）、Nivo（现代UI设计）

开发工具

  • 图表编辑器：Ant Design Charts Editor（可视化配置生成代码）
  • 在线演示：CodeSandbox（快速原型开发）
  • 性能分析：Chrome Performance面板（渲染性能分析）

学习资源

  • 数据可视化理论：《数据可视化之美》、《深入浅出数据可视化》
  • 技术博客：ECharts官方博客、Recharts文档示例
  • 视频课程：前端可视化实战（涵盖各类图表库应用）

性能优化工具

  • 数据处理：lodash（数据转换）、date-fns（时间处理）
  • 渲染优化：react-window（虚拟列表）、useMemo/useCallback（组件优化）
  • 动画控制：react-spring（流畅动画）、framer-motion（复杂交互）

通过本文介绍的方案，你可以在开源UI组件库中构建功能完善、性能优异的数据可视化模块。关键在于理解不同可视化库的特性，合理设计组件接口，并针对实际业务场景进行优化。无论是简单的数据展示还是复杂的交互式分析，这些技术方案都能为你提供坚实的基础。

ant-design
An enterprise-class UI design language and React UI library
项目地址：https://gitcode.com/GitHub_Trending/an/ant-design
登录后查看全文

相关内容推荐

1 终极指南：awesome-shadcn/ui 精选组件库完全解析 🚀2 Tailwind CSS 2025年终极指南：从入门到精通的完整资源清单3 如何用Vue Data UI打造令人惊艳的数据可视化界面：2025年新手必备指南 🚀4 Element UI与数据可视化组件集成：从基础到高级实践指南5 🔥终极Kafka可视化管理指南：Kafka Console UI让集群运维效率提升10倍！6 Element UI与数据可视化组件集成：从需求分析到实战落地7 3个核心价值：Agent-Chat-UI实时交互界面全攻略8 DataRoom开源大屏设计器：零代码构建专业数据可视化平台9 Vue Data UI：释放数据可视化潜能的 Vue 3 组件库10 awesome-tailwindcss社区精选：2025年最受欢迎的资源推荐
热门项目推荐
相关项目推荐

热门内容推荐

1 build-your-own-x 探索指南：从零构建编程技能体系2 技术实践新范式：build-your-own-x项目的系统构建与能力跃迁指南3 build-your-own-x 开源学习项目一站式指南4 【亲测免费】 开源项目 `build-your-own-x` 使用指南5 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解6 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用7 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

解锁Duix-Avatar本地化部署：构建专属AI视频创作平台的实战指南Linux内核性能优化实战指南：从调度器选择到系统响应速度提升DBeaver PL/SQL开发实战：解决Oracle存储过程难题的完整方案RNacos技术实践：高性能服务发现与配置中心5步法RePKG资源提取与文件转换全攻略：从入门到精通的技术指南揭秘FLUX 1-dev：如何通过轻量级架构实现高效文本到图像转换OpenPilot实战指南：从入门到精通的5个关键步骤Realtek r8125驱动：释放2.5G网卡性能的Linux配置指南Real-ESRGAN：AI图像增强与超分辨率技术实战指南静态网站托管新手指南：零成本搭建专业级个人网站

项目优选

收起
kernelkernel
deepin linux kernel
C
27
13
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
641
4.19 K
pytorchpytorch
Ascend Extension for PyTorch
Python
478
579
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
934
841
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
386
272
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.52 K
866
flutter_flutterflutter_flutter
暂无简介
Dart
885
211
cangjie_runtimecangjie_runtime
仓颉编程语言运行时与标准库。
Cangjie
161
922
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
139
163
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解
Java
69
21