AVW-8：中国前端可视化与 UI 生态——ECharts、AntV、Ant Design 及阿里/腾讯/字节的 20+ 项目

2026年6月7日 01:10 CST EChartsAntVAnt DesignSemi DesignTDesignArco DesignAMIS数据可视化低代码中国开源

AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | 交互叙事 | AI 生成 UI | 视频与动效 | 程序化三剑客 | AVW-8 中国生态 ← 本文 | 视觉指南

# 中国可视化与 UI 生态 ## ECharts 生态 - Apache ECharts (60k★) - ECharts GL (3D/地球) - ZRender (底层渲染器) ## AntV 七件套 - G2 (图形语法) + G6 (图) - X6 (流程图) + L7 (地理) - F2 (移动端) + S2 (表格) - AVA (AI推荐) ## Ant Design 全栈 - antd (93k★) + Pro - Ant Design Charts + Umi ## 设计系统 - Semi Design (字节) - Arco Design (字节) - TDesign (腾讯) ## 低代码 & AI - LowCode Engine (阿里) - AMIS (百度) - Designable (阿里)

在国际可视化工具（Plotly、Bokeh、Observable）之外，中国的开源社区在可视化、UI 组件、低代码平台三条线上都有世界级产品，彼此形成了完整工具链闭环。

第一线：ECharts

官网: echarts.apache.org
GitHub: apache/echarts · 60k+ stars
归属: Apache 软件基金会（顶级项目），2018 年由百度捐赠
代表用户: 阿里巴巴、腾讯、百度、华为、字节跳动
获奖: 2021 年度最受欢迎 Apache 项目

核心优势: 图表种类极丰富（60+ 类型）、移动端表现优异（Canvas 渲染）、内置中国地图到区县级、定制深度极高。

ECharts GL: github.com/ecomfe/echarts-gl — 3D 图表 + 3D 地球。

ZRender: github.com/ecomfe/zrender — ECharts 的底层 2D 渲染器，可独立使用并在图表上叠加 GSAP 自定义动画。

第二线：AntV — 蚂蚁集团可视化七件套

官网: antv.antgroup.com

工具	GitHub	Stars	定位	对标
G2	antvis/G2	12k+	图形语法引擎	ggplot2
G6	antvis/G6	11k+	图可视化/知识图谱	vis.js, Pyvis
X6	antvis/X6	6k+	流程图/ER图/DAG编辑器	draw.io
L7	antvis/L7	4k+	WebGL 地理空间	Kepler.gl, Mapbox
F2	antvis/F2	8k+	移动端专用图表	—
S2	antvis/S2	1.5k+	表格分析/透视表	Excel 透视表
AVA	antvis/AVA	新锐	AI 驱动的可视化推荐	—

AVA 详解

AVA 是 AntV 家族中最特殊的一个——AI-native 的可视化框架。输入数据 + 分析目的 → 自动推荐最佳图表类型（带置信度分数），然后自动生成。这代表了可视化从"手动配置"到"AI 决策"的范式转变。

第三线：Ant Design — 93k+ Stars 的企业级 React UI

官网: ant.design
GitHub: ant-design/ant-design · 93k+ stars
许可: MIT

完整生态:

工具	链接	定位
antd	ant.design	React UI 组件库
Ant Design Pro	pro.ant.design	开箱即用的中台前端框架
Ant Design Charts	charts.ant.design	基于 AntV 的 React 图表库
Umi	umijs.org · GitHub	企业级 React 框架

第四线：其他中国设计系统

设计系统	官网	GitHub	Stars	出品方	特色
Semi Design	semi.design	DouyinFE/semi-design	9k+	字节/抖音	3000+ Design Tokens，AI-friendly
Arco Design	arco.design	arco-design/arco-design	5k+	字节	字节内部系统广泛使用
TDesign	tdesign.tencent.com	Tencent/tdesign	3k+	腾讯	同时支持 React/Vue/Angular/小程序
IconPark	iconpark.oceanengine.com	bytedance/IconPark	8k+	字节	多主题 SVG 图标库

第五线：低代码与 JSON 驱动 UI

AMIS（百度）

官网: aisuda.bce.baidu.com/amis
GitHub: baidu/amis · 17k+ stars
核心: JSON 配置生成页面 — AI 生成 UI 的最短链路

{ "type": "page", "body": {
  "type": "crud", "api": "/api/models",
  "columns": [
    { "name": "name", "label": "模型名称" },
    { "name": "accuracy", "label": "准确率", "type": "progress" }
  ]
}}

零前端代码，一个 JSON 渲染完整的 CRUD 管理界面。

LowCode Engine（阿里）

官网: lowcode-engine.cn
GitHub: alibaba/lowcode-engine · 15k+ stars
定位: 可扩展的低代码引擎（不是平台，是引擎）

其他

工具	GitHub	用途
Designable	alibaba/designable	可视化表单设计器
x-render	alibaba/x-render	表单/表格/图表配置化方案
qiankun	umijs/qiankun	微前端框架

第六线：AI 时代的整合

场景一：AI 模型监控仪表盘（中国生态版）

前端框架: Umi + Ant Design Pro
UI 组件: antd (Table, Form, Statistic)
图表: @ant-design/charts + ECharts
动画: GSAP (数字递增、状态转换)
地图: L7 (如果涉及地理数据)
后端: FastAPI / Flask
部署: 阿里云 / 腾讯云

场景二：AI Prompt 生成页面

用户输入 → LLM → AMIS JSON → 页面即时渲染 → 对话迭代

场景三：AI 推荐可视化

数据分析结果 → AVA 分析 → 推荐最佳图表类型 → 自动生成 G2/ECharts 配置 → GSAP 动画增强

综合对比：国际 vs 中国

维度	国际方案	中国方案
通用图表	Plotly, Bokeh	ECharts, G2
知识图谱	vis.js, Pyvis	G6
流程图编辑器	draw.io, React Flow	X6
地理可视化	Mapbox, Kepler.gl	L7
移动端图表	依赖响应式	F2
AI 可视化推荐	无成熟方案	AVA
UI 组件库	MUI, shadcn/ui	Ant Design, Semi
JSON 驱动 UI	少数方案	AMIS
低代码引擎	Appsmith, Retool	LowCode Engine

下一篇：AVW-9 视觉指南——工具 Logo 墙、架构图、对比表与演示索引