前言

阅读时间约 1 分钟

什么是 F6

F6 是一个移动端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。通过 F6 用户可以在小程序和移动端中绘制关系图谱，更便捷的构建自己的图可视化应用。F6 延续了 G6 的 API 设计，用户只需简单改动，便可快速迁移 G6 图谱到移动端。

入门教程简介

我们在本入门教程中将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 Tutorial 案例。

前言

我们将会通过本入门教程完成包含图的创建、渲染、元素的配置、布局、交互、动画、工具的最终的 Tutorial 案例。在这部分教学中，读者将会学习到 F6 中基础和核心的功能。掌握该入门教程内容后，可以帮助读者初步理解 F6 并为深度理解 F6 打好基础, F6 API 与 F6 会保持最大程度的一致性，以减少学习成本。

该入门教程将会划分为以下几个章节：

快速上手
创建图
元素及其配置
使用图布局 Layout
图的交互 Behavior
插件 & 工具
*动画（选读）
*微信中使用 F6（选读）

提示
该入门教程是为希望“边学边做”的读者设计的。如果您更希望从底层概念开始学习 F6，您可以参见：核心概念。

基础知识

本教程展示如何使用 F6 创建一个完整的图可视化应用。我们假设读者默认在小程序中绘图，并对小程序已经有了基础的了解，但并不要求对 F6 有任何基础，如果读者对 G6 的已经比较熟悉，可以跳过 F6 基础知识，我们会尽力保证两边 api 的一致性。在学习之前，我们假设读者对 HTML 和 JavaScript 有所了解，但并不要求对 F6 有任何的基础。如果读者对 F6 的基本内容已经熟知，可以适当跳过部分内容，有针对性地阅读重要的知识点。

环境准备

F6 中示例将以支付宝小程序的形式展开，所以在学习前，读者需要下载支付宝小程序 ide，当然这些示例也很容易在微信小程序中使用，参考微信中使用 F6，仅需复制核心代码即可。