微信小程序 + Antv F2

一、项目搭建

Antv F2 + 小程序文档地址

1、 创建微信小程序项目（下载微信小程序IDE，详细创建微信小程序流程见： 微信小程序文档:）

2、在项目根目录下，初始化创建package.json文件，打开cdm 执行：

	 npm init

3、安装npm install --production;

4、安装微信小程序 F2 图表组件: npm i @antv/f2-canvas ;

5、安装好依赖包之后，打开微信小程序项目 运行：1-4 步骤

6、构建npm 成功后，关闭IDE 重新启动项目（看情况而定，我安装的时候是重启项目后才不报错的，显示引入成功）

7、在index.json 文件中配置组件（在哪个页面用到图表绘制在哪个页面相对应的json文件里面进行配置就可以）

{
      
 	"usingComponents": {
      
     	"ff-canvas": "@antv/f2-canvas"
 	}
}

8、在index.wxml中使用 ff-canvas 组件

<1>其中 opts 是一个我们在 index.js 中定义的对象，必设属性， 它使得图表能够在页面加载后被初始化并设置，详见 index.js 中的使用

<2>id  :  canvas id  可以通过该id 设置图表的宽高

   <!--index.wxml-->
   <view class="index">
       <ff-canvas id="column-dom" canvas-id="column" opts="{
      { opts }}"></ff-canvas>
   </view>

9、在index.wxss 样式中设置

  <1.>  组件的父元素为定位元素：	
  		position: relative;  或 position: absolute;  
  		建议设置position: relative; 不会脱离文档流，后期加其他元素比较方便； 
  <2.>   通过id 设置图表的宽高

  /**index.wxss**/
.index {
      
    position: relative;
 	min-height: 100vh;
	background: #f2f2f2;
 }
.index  #column-dom{
      
    display: block;
	width: 750rpx;
 	height: 750rpx;
}

10.在index.js 中引入

index.js 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。
// index.js
import F2 from '@antv/wx-f2'; 
let chart = null;

function initChart(canvas, width, height, F2) {
       // 使用 F2 绘制图表
	const data = [
 		{
       year: '1951 年', sales: 38 },
  		{
       year: '1952 年', sales: 52 },
  		{
       year: '1956 年', sales: 61 },
  		{
       year: '1957 年', sales: 145 },
  		{
       year: '1958 年', sales: 48 },
  		{
       year: '1959 年', sales: 38 },
  		{
       year: '1960 年', sales: 38 },
  		{
       year: '1962 年', sales: 38 },
	];
	chart = new F2.Chart({
      
  		el: canvas,
  		width,
  		height
 	});

 	chart.source(data, {
      
		sales: {
      
    		tickCount: 5
 		}
	});
	chart.tooltip({
      
  	showItemMarker: false,
  	onShow(ev) {
      
    	const {
       items } = ev;
    	items[0].name = null;
    	items[0].name = items[0].title;
    	items[0].value = '¥ ' + items[0].value;
  	}
	});
	chart.interval().position('year*sales');
	chart.render();
	return chart;
}

Page({
      
	data: {
      
  		opts: {
      
    		onInit: initChart
 		}
 	},

	onReady() {
      

  	}
});

二、相关问题

1、一个页面加多个图表且超过一屏展示时，滑动页面卡顿问题，当图表页面滑动到页面底部或者顶部时，滑动页面仍会导致页面卡顿现象。
尝试解决方法：
<1> 删除f2 canvas 组件中的touch事件，删除后会导致 图表滑动交互全部失效，且滑动到顶部或底部依旧存在卡顿现象；
<2> 每个页面只留一个图表，且文档高度不得超过一屏，此方法对后期需求可能影响极大；
<3> 保留touch 事件， 在页面触底事件onReachBottom() 中监测是否到底部，到底部之后用微信页面滚动到指定位置方法 wx.pageScrollTo 计算屏幕窗口高度与文档高度，触底后自动回滚5px，让页面保持不触底状态。滑动到顶部时做同样处理， 此方法在真机测试中出现暴力上拉或者下拉时会导致页面疯狂抖动。

//页面触底事件
onReachBottom() {
      
    let query = wx.createSelectorQuery();
    let height = 0;
    let windowHeight = wx.getSystemInfoSync().windowHeight;
    query.select('.index').boundingClientRect(rect => {
      
    	height = rect.height;
   		wx.pageScrollTo({
      
        scrollTop: (height - windowHeight - 5),
        duration: 300,
           })
     }).exec(); 
 },
 // 滚动条事件
 onPageScroll(e){
      
     // 监控滚动条是否到达顶部，到达顶部后自动回滚5px
     if (e.scrollTop == 0){
      
           wx.pageScrollTo({
      
           		scrollTop: 5,
               	duration: 100,
           })
      }
 }

2、控制台报错： TypeError: Cannot read property ‘defaultView’ of undefined；
解决方法： 通过图表 id 设置图表的宽高

3、图表出现空白；
解决方法： 查看图表父元素是否设置为定位元素；

三、总结

在使用微信小程序+F2之前也尝试过 微信小程序+echarts，同样会存在一些多多少少的bug，虽然能实现效果但是对于用户体验是非常不友好的，经过此次微信小程序+图表插件 来实现移动可视化数据平台，可以看出小程序对于插件的兼容性还是没有做到特别的好，建议使用 vue + F2 兼容性要比微信小程序好太多，且加载速度与数据渲染及相关组件的支持会比较好，微信小程序是不支持DOM操作的，所以 Guide.Html 辅助元素组件目前仍无法使用，且F2是基于JQuery编写的，代码中包含“html”“$”等，都会出现报错情况，所以许多的细节组件或方法没法使用。

血泪教训： 不要用小程序 + 三方插件，九九八十一难，一步一坑。
还有一种比较兼容性比较好的方法就是：使用微信小程序的用户登录流程，然后用vue+F2写，写好的项目通过微信小程序的webview嵌套进微信小程序，这样兼容性比较好，如果有类似需求可以尝试