企业官网建设流程全解析

• 数据可视化
• 前端

F2（@antv/f2）是 AntV 团队专为移动端打造的图表库，以 Canvas 为核心渲染技术，基于《The Grammar of Graphics》（图形语法）理论，为开发者与设计师提供了优雅、交互自然且扩展灵活的可视化解决方案。本文以 packages/f2/README.en-US.md 为主线，结合当前仓库源码深入讲解 F2 的核心设计、安装方式、完整上手示例、源码架构与本地开发流程，帮助读者快速掌握在 H5 及多端环境中构建高质量移动端图表的能力。

项目定位：Born for Mobile

F2 的诞生目标非常明确——为移动端而生。它是一款基于 HTML5 Canvas 的图表库，同时兼容 Node.js、Weex、React Native 以及支付宝小程序、微信小程序等多端运行环境，力求"一份代码，多设备多环境渲染"。

F2 的设计思想根植于 Leland Wilkinson 可以看到，当前版本为5.14.0，包名为@antv/f2，采用 MIT 协议，同时提供main（CommonJS）、module（ES Module）、unpkg（浏览器全量包）与types（TypeScript 类型声明）等多种入口。

需要说明的是，本文基于当前仓库中的文档与源码撰写，所描述的能力以仓库实际代码为准。

安装

F2 通过 npm 即可安装：

$ npm install @antv/f2

安装后即可在项目中引入。F2 的核心入口 packages/f2/src/index.ts 对外导出了Chart组件（含ChartProps类型）、Scale/ScaleConfig（来自内置的 f2-scale 依赖），以及全部组件与@antv/f-engine渲染引擎的完整能力。

核心特性

为移动端设计，交互更自然

F2 在视觉设计上坚持以人为本，追求自然、简单、易懂的表达效果，让用户在碎片化时间里更快、更高效地获取图表信息；在交互层面则追求内容与操作的有机融合，使点击、滑动、缩放等手势符合人的自然行为反应。

从源码结构看，交互能力内嵌于图表组件体系之中：例如 packages/f2/src/chart/index.tsx 中的Chart类提供了on()/off()事件注册接口，并透传为底层手势事件；packages/f2/src/components/geometry/index.tsx 的_initEvent()方法会为onPressStart、onPress、onPressEnd、onPan、onPanStart、onPanEnd等回调自动绑定到 chart 上，开发者只需在几何标记组件上声明这些 props 即可获得触摸交互能力。

轻巧流畅，性能优先

F2 针对移动设备做了大量优化：不带交互版本的包在 gzip 压缩后约44k（带全部交互版本约 56k，该数据来自项目官方 README），同时保持丰富的图表能力。此外，F2 采用模块化设计支持动态加载，进一步压缩体积。

多端异构，一套代码多处渲染

在完美支持 H5 环境之外，F2 同时兼容多种运行环境。当前仓库以 pnpm monorepo 形式组织，各端封装包均位于仓库内，可直接查看：

• Node.js 端：packages/f2-node，可在服务端用 JSX 语法生成图表（见其examples/src/index.jsx）；
• 支付宝小程序端：packages/f2-my，提供小程序自定义组件封装；
• 微信小程序端：packages/f2-wx；
• React 封装：packages/f2-react；
• Vue 封装：packages/f2-vue，内含 Vite 与 Vue3 两种示例工程；
• 词云扩展：packages/f2-wordcloud，基于 d3-cloud 实现。

图表丰富，组件完备

凭借图形语法理论，F2 支持50+ 种图表类型（官方文档数据），覆盖折线图、柱状图、饼图、散点图、仪表盘等经典图表，且数量可以继续扩展。除基础图形外，F2 还提供了功能丰富的图表组件。

从 packages/f2/src/components/index.ts 可以看到完整的组件清单：几何标记类包括Line（折线）、Area（面积）、Interval（柱/条）、Point（点）、Candlestick（K 线）、Pictorial（象形柱）等；辅助组件包括Axis（坐标轴）、Legend（图例）、Tooltip（提示框）、Guide（辅助标记）、PieLabel（饼图标签）、Gauge（仪表盘）、Treemap（矩形树图）、Sunburst（旭日图）、Zoom（缩放）、ScrollBar（滚动条）、Magnifier（放大镜）、ElementLink（元素连线）等。

扩展灵活，创意无限

F2 在提供最佳实践的同时，为开发者保留了灵活的扩展机制，包括Shape（图形）、动画、交互的自定义能力，以及图表样式的个性化定制。每个组件都通过高阶组件模式（如withLine、withArea、withInterval、withAxis等）与具体视图（View）解耦，开发者可基于既有实现替换或扩展视图层。

快速开始：五分钟绘制第一张图表

F2 对数据源格式的要求非常简单——仅需 JSON 数组，数组的每个元素是一个标准 JSON 对象。完整示例来自官方 README：

<canvas id="mountNode"></canvas>

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。 const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ]; // 获取 canvas context const context = document.getElementById('mountNode').getContext('2d'); const { props } = ( <Canvas context={context} pixelRatio={window.devicePixelRatio}> <Chart data={data}> <Axis field="genre" /> <Axis field="sold" /> <Interval x="genre" y="sold" color="genre" /> <Tooltip /> </Chart> </Canvas> ); const canvas = new Canvas(props); await canvas.render();

这段代码虽然简短，却完整展示了 F2 的声明式 JSX 编程范式：

• Canvas：渲染入口，接收context（canvas 2d 上下文）与pixelRatio（设备像素比，移动端高清适配的关键）；
• Chart：图表容器，接收data数据源，负责坐标系、度量（scale）的初始化与布局计算；
• Axis：坐标轴，通过field声明绑定哪个数据字段；
• Interval：柱形几何标记，通过x、y、color声明数据字段到视觉通道的映射；
• Tooltip：提示框组件，无参数即可启用默认交互。

F2 使用了 JSX 语法，因此项目中需要配置相应的 JSX 转换（Babel 或编译工具），仓库根目录提供jsx-runtime.js、jsx-dev-runtime.js及其类型声明文件（位于 packages/f2/jsx-runtime.js 与 packages/f2/jsx-runtime.d.ts），可参考各端示例包的 Babel 配置（如 packages/f2-node/examples/babel.config.json）。

深入：Chart 组件的 props 与生命周期

从 packages/f2/src/chart/index.tsx 的ChartProps定义可以看到，Chart支持以下核心配置：

在内部实现上，Chart初始化了两个控制器：ScaleController（管理度量）与CoordController（管理坐标系），并在willMount时完成度量创建与坐标系初始化；当data变化时自动调用scale.changeData()刷新度量，当scale配置变化时调用scale.update()更新。此外，Chart还暴露了filter()、highlight()、getPosition()、getSnapRecords()等 API，供图例筛选、交互高亮与数据定位使用。

深入：Interval 几何标记的默认行为

packages/f2/src/components/interval/withInterval.tsx 揭示了柱形图底层的智能逻辑：

• getDefaultSize()根据坐标系与数据数量自动计算柱子默认宽度：直角坐标系下为(1 / values.length) * (1/2)，玫瑰图使用0.999999比例，多饼图使用3/4，且分组（dodge）时宽度会除以类别个数；
• 支持sizeRatio（显示比例）与sizeZoom（缩放比例，可以是数值或回调函数）定制柱子大小；
• 支持showLabel与labelCfg开启柱子顶部标签；
• 默认从 0 开始绘制（startOnZero: true），保证柱形语义的准确性。

深入：Axis 的字段绑定与标签防重叠

packages/f2/src/components/axis/withAxis.tsx 展示了坐标轴的完整能力：Axis通过field绑定度量，并通过构造器调用chart.setScale()将type、tickCount、range、mask、formatter、min、max、nice、ticks等配置注入 Chart 的度量系统。针对移动端窄屏场景，Axis还内置了两大防重叠策略：

• labelAutoRotate：自动旋转标签（findSuitableRotation()根据相邻 tick 间距计算合适旋转角度）；
• labelAutoHide：自动隐藏部分标签（findLabelsToHide()按步长抽稀，保留首尾及必要的中间标签）。

极坐标下，Axis还会为 y 轴生成环状网格线交叉点（_generateGridPoints()），支撑雷达图等场景。

源码架构速览：理解 F2 的组织方式

如果希望深入阅读或二次开发，建议先熟悉以下目录（均在 packages/f2/src 下）：

• chart/：Chart核心组件，负责数据、度量、坐标系的统筹与子组件调度；
• components/：全部可视化组件，几何标记（interval/line/area/point/candlestick 等）与功能组件（axis/legend/tooltip/guide 等）分开组织，每个组件均包含index.tsx（入口）、withXxx.tsx（高阶组件/逻辑层）、xxxView.tsx（渲染视图）三件套；
• controller/：度量（scale）、坐标系（coord）、属性（attr）三大控制器，以及 tick 生成逻辑（cat-tick、linear-tick、time-cat）；
• attr/：视觉通道属性（分类、线性、恒等）；
• coord/：直角坐标系与极坐标系的实现；
• deps/：内置的 f2-scale、f2-adjust 以及 d3 相关子依赖；
• util/：坐标转换、向量计算等工具函数。

配套的测试用例集中在 packages/f2/test，覆盖了各组件渲染快照、交互（pan/roam/selection）、数据处理（空数据、changeData）等场景；仓库还包含 issues 回归测试（如 packages/f2/test/issues/1835.test.tsx 验证平滑曲线、packages/f2/test/issues/1867.test.tsx 验证 x 轴字段缺失场景），可作为理解功能边界与排查问题的参考。

本地开发

F2 使用 monorepo（lerna + pnpm workspace）管理，根目录见 package.json 与 pnpm-workspace.yaml。参与开发或调试的完整流程如下：

$ npm install # 初始化 monorepo（串联各子包依赖） $ npm run bootstrap # 运行测试用例 $ npm run test-watch # 监听文件变化构建，并打开 demo 页面 $ npm run dev # 只运行某一个具体的测试用例 $ npm run test-watch -- 'TestFileName'

仓库的测试基于 Jest，并采用 Canvas 快照对比（__image_snapshots__目录下保存了各用例的渲染结果图片），方便在改动后直观确认渲染效果是否变化。

周边生态：基于 F2 的图表库

F2 开放的能力催生了多个第三方封装库（信息来自官方 README）：基于 F2 的 Ant Design Mobile 图表组件（React）、基于 F2 与 React 的可视化库 BizGoblin、基于 vux 与 F2 的移动端图表组件 VChart（Vue）、基于 Weex 的图表组件等。当前仓库本身也提供了 React（packages/f2-react）与 Vue（packages/f2-vue）的原生封装作为官方参考实现。

体验改进计划说明

F2 曾于 3.1.12 版本（2018-06-20 发布）起加入F2.track(true)方法用于用户体验改进计划的数据采集；该计划结束后，从3.3.4版本开始已将这一方法从 F2 中移除。当前仓库代码中已无track相关逻辑，开发者无需处理该 API。

许可证

F2 基于 MIT 协议 开源，可以放心用于商业与非商业项目。更多中文说明可参阅 中文 README，参与贡献前请阅读仓库的 贡献指南 与 CONTRIBUTING.zh-CN.md。

结语

F2 以"图形语法"为理论基石，以 Canvas 渲染为性能保障，以组件化、可扩展的架构为灵活抓手，为移动端数据可视化提供了一套开箱即用又不失深度的方案。从本文的快速开始示例到源码级剖析可以看出：声明式 JSX 让图表声明直观易懂，而底层的度量、坐标系、属性映射与调整（adjust）机制则支撑了 50+ 图表的组合表达能力。无论是直接使用、按需扩展，还是基于多端封装包落地小程序与框架项目，F2 都提供了清晰的路径与完整的仓库内参考实现。

• 数据可视化
• 前端