微信小程序 + Antv F2

最新推荐文章于 2024-09-13 22:30:39 发布

FXZ_小智

最新推荐文章于 2024-09-13 22:30:39 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/fanxinzhi_fxz/article/details/103455008

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序 + 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.>  <ff-canvas></ff-canvas>组件的父元素为定位元素：	
  		position: relative;  或 position: absolute;  
  		建议设置position: relative; 不会脱离文档流，后期加其他元素比较方便； 
  <2.>  <ff-canvas  id=”xxxxx”></ff-canvas> 通过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”“$”等，都会出现报错情况，所以许多的细节组件或方法没法使用。