F2 npm 安装:
npm install @antv/f2 --save
成功安装完成之后，即可使用 import 或 require 进行引用
import F2 from "@antv/f2/lib/index-all"
const F2 = require('@antv/f2/lib/index-all')
注意：官方文档 引用方式为： const F2 = require(’@antv/f2’) 这种引用方法没法将全部图表全部引入，如果使用想某个图表需要单独配置，配置方法地址： /zh/docs/tutorial/manual/require
F2 script 标签引用 安装
<!-- 引入在线资源 -->
<script src="/os/antv/assets/f2/3.4.2/"></script>
<!-- 友情提醒：请按需更新版本号。 -->
<!-- 引入本地脚本 -->
<script src="./"></script>
<!-- 友情提醒：为防止在线资源稳定性不确定，可能导致上线后 无法成功引用报错，
建议把在线资源下载到本地或者放到我们自己的CDN静态资源下。 -->
开始使用
1、在需要使用图表的页面中js引入
import F2 from "@antv/f2/lib/index-all"
2、在页面上创建一个 <canvas></canvas> 标签并指定 id
//
<template>
<div id="index">
// 单一柱状图
<div class="abeam">
<canvas id="histogram"></canvas>
</div>
</div>
</template>
注意： 一个页面可以有多个图表，每个canvas的id为每个图表的唯一标识，初始化Chart 时会根据图表id进行数据初始化及渲染，注意不要采用重复id
3、 在style 中 根据canvas id 设置每个图表的 宽高
<style scoped>
#index{
position: relative;
min-height: 100vh;
}
#index.abeam {
margin-top:10px;
padding-bottom: 10px;
background: #ffffff;
}
// 单一柱状图 宽高设置
#index.abeam #histogram{
display: block;
width: 100vw;// 我这里是为了移动端适配使用了vw布局，会根据屏幕大小自动缩放
height: 80vw;
}
</style>
4、 在 methods 中初始化Chart 方法，在mounted中调用
//
<script>
export default {
name: 'Index',
created(){
},
mounted: function(){
// 页面加载初始化图表
this.histogramChart()
},
data: function(){
return {
//初始化一个变量来存储图表对象
initChartObj: null,
//初始化一个数组来存储图表需要的数据
ChartData: []
}
},
methods: (function(){
return {
// 单一柱状图
histogramChart: function () {
var vm = this; //改变一下this指向
// 创建 Chart 对象
this.initChartObj = new F2.Chart({
id: 'histogram', // 对应创建的 canvas id
pixelRatio: window.devicePixelRatio // 指定分辨率, 防止图表画出来后模糊
});
// 装载数据
this.initChartObj.source(vm.ChartData);
// 提示信息
this.initChartObj.tooltip({
showItemMarker: false,
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
items[0].value = items[0].value;
}
});
// 创建图形语法，绘制柱状图，由 time 和 sales 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
this.initChartObj.interval().position('time*sales');
// 图表渲染
this.initChartObj.render();
}
}
})(),
}
</script>
如何更新数据：
3-1、图表数据更新（前后数据结构不发生变化），需要马上更新图表
(data);
3-2、如果仅仅是更新数据，而不需要马上更新图表，可以调用 (data)，然后在需要更新图表时调用 ()
(newData); // 更新数据源
(); // 更新图表3-3、更新数据时还可以清除图表上的所有元素，重新定义图形语法，改变图表类型和各种配置
this.initChartObj.line().position('x*y');
this.initChartObj.render();
this.initChartObj.clear(); // 清理所有图表内容
this.initChartObj.source(newData); // 加载新数据
this.initChartObj
.interval()
.position('x*y')
.color('z'); // 重新定义图形语法
this.initChartObj.render(); // 图表渲染
总结
1、在使用阿里F2之前尝试着写过一个百度echarts移动端的图表demo，echarts的插件包相对F2要大，而且图表样式比较单一，对于移动端H5在一些操作交互上还有一些兼容性问题。所以后来采用F2来实现移动数据平台。F2是一个专注于移动端的图表插件，官网说：完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex）。但是经过实验来说，对于小程序的兼容性还需要继续完善，目前兼容问题比较多，但对于H5兼容性比较友好。
2、注意！注意！注意！在引用的时候可以采用：import F2 from “@antv/f2/lib/index-all” 将所有图表先引用进来，避免使用过程出现方法报错等，但是打包过程中可能会将所有的包都打进来，当前页面没有用到的包也会进行打包，所以大家使用过程中可视情况而定，需要什么图表引用什么图表，图表引用单独配置可见图表按需引用。