2021SC@SDUSC“F2移动端可视化方案”源码分析（一）——项目综述

2021SC@SDUSC 

目录

F2移动端可视化解决方案简介

概述

F2 v4.0架构

F2的优点

F2源码分析方式

F2安装

通过 npm 安装 

浏览器引入

项目分工

---

F2移动端可视化解决方案简介

概述

F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足用户的各种可视化需求，专业的移动设计指引为用户带来最佳的移动端图表体验

F2 同 G2 一样，基于《The Grammar of Graphics》(Leland Wilkinson 著)一书所提的图形理论。该理论是一套用来描述所有统计图形深层特性的语法规则，该语法回答了『什么是统计图形』这一问题，以自底向上的方式组织最基本的元素形成更高级的元素。

所以对于 F2 来说，没有具体的图表类型的概念，所有的图表都是通过组合不同的图形语法元素形成的

F2 v4.0架构

图源自知乎

F2的优点

多平台支持

• H5 端支持所有的图表、动画和交互
• 支持支付宝小程序和微信小程序，一些 HTML 的组件使用存在限制
• 支持 node 端渲染，可以在后台生成图表，通过图片加载到页面

图表类型丰富，动画与交互体验感优秀。

F2源码分析方式

通过GitHub与AntV F2官网下载开放式源码，同时在本机安装F2，引入浏览器，在动手实践使用F2的基础之上，对其源代码进行了解分析。

F2安装

通过 npm 安装 

npm install @antv/f2 --save

成功安装完成之后，即可使用 import 进行引用。

import F2 from '@antv/f2';

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源。

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2.min.js"></script>
<!-- 友情提醒：请按需更新版本号。 -->

<!-- 引入本地脚本 -->
<script src="./f2.js"></script>

也可以直接通过 unpkg 下载。

项目分工

本人主要负责F2核心机制中的动画机制的代码分析，后续分工会根据实际各核心机制的代码量进行调整。