vue + Antv F2

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’) 这种引用方法没法将全部图表全部引入，如果使用想某个图表需要单独配置，配置方法地址： https://f2.antv.vision/zh/docs/tutorial/manual/require

F2 script 标签引用 安装

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

<!-- 引入本地脚本 -->
<script src="./f2.js"></script>
<!-- 友情提醒：为防止在线资源稳定性不确定，可能导致上线后 无法成功引用报错，
建议把在线资源下载到本地或者放到我们自己的CDN静态资源下。 -->

开始使用

1、在需要使用图表的页面中js引入

import F2 from "@antv/f2/lib/index-all"

2、在index.vue页面上创建一个 标签并指定 id

// index.vue
<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中调用

// index.js
<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、图表数据更新（前后数据结构不发生变化），需要马上更新图表

this.initChartObj.changeData(data);

3-2、如果仅仅是更新数据，而不需要马上更新图表，可以调用 chart.source(data)，然后在需要更新图表时调用 chart.repaint()

this.initChartObj.source(newData); // 更新数据源
this.initChartObj.repaint(); // 更新图表

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” 将所有图表先引用进来，避免使用过程出现方法报错等，但是打包过程中可能会将所有的包都打进来，当前页面没有用到的包也会进行打包，所以大家使用过程中可视情况而定，需要什么图表引用什么图表，图表引用单独配置可见图表按需引用。

点击查看 F2 官网地址