AntV/F2/3.x学习笔记

F2简介

F2，可视化解决方案，支持H5环境，兼容node，小程序，weex。

相关链接

官网
GitHub

特性

优雅

• 轻量，交互自然
• 流畅
• 多端异构，兼容多环境

图表丰富，组件完备

扩展灵活

• 为开发者提供了灵活的扩展机制，包括Shape、动画以及交互的自定义能力
• 图表样式个性化

开源

---

快速上手

安装

浏览器或本地引入

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>
<!-- 引入本地脚本 -->
<script src="./f2.js"></script>

通过npm安装

npm install @antv/f2 --save

安装后，

const f2=require('@antv/f2');

基础实例

1. 创建标签，并指定id

<canvas id="myChart" width="400" height="300"></canvas>

2. js部分

window.onload=function(){
   
    //准备数据
    const data=[
        {
   type:'剧情电影',playAmount:111},
        {
   type:'文艺电影',playAmount:34},
        {
   type:'科幻电影',playAmount:566},
        {
   type:'动画电影',playAmount:233},
        {
   type:'喜剧电影',playAmount:456},
    ];
    //创建Chart对象
    const chart=new F2.Chart({
   
        id:'myChart',
        pixelRatio:window.devicePixelRatio
    });
    //载入数据
    chart.source(data);
    //创建图形语法，绘制柱状图，type映射至x轴，playAmount映射至y轴
    chart.interval().position('type*playAmount').color('type');
    //渲染图表
    chart.render();
}

3. 效果如下图：
   
   更多实例 demo

---

图表组成

F2 图表一般包含坐标轴（Axis）、几何标记（Geometry）、提示信息（Tooltip）、图例（Legend）等，另外还可以包括辅助标记（Guide）、数据标签（dataLabels）等。