.f2-canvas{宽度：100%；height:600rpx;}前言本文从使用场景来看，应该看成是如何在微信中使用常用的h5图表库（antv/f2、echarts等）小程序。但是得益于uni-app的跨平台能力，我们可以使用大家比较熟悉的Vue框架来实现微信小程序的开发。对于uni-app用户，如果想使用图表能力，只能在dcloud社区插件（https://ext.dcloud.net.cn/）中搜索，或者自己动手。下面就来看看如何通过自己封装组件来使用这些h5图表库。antv/f2因为新的4.x版本使用了jsx语法，不是很习惯。这里演示的是3.x（https://f2-v3.antv.vision/zh/docs/tutorial/getting-started）版本。在官方文档中我们不难发现：F2是基于CanvasRenderingContext2D（https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D）的标准接口绘制的，所以只要提供标准的CanvasRenderingContext2D接口即可实现对象，F2即可绘制图表。因为小程序给出的context对象并不是标准的CanvasRenderingContext2D，封装的核心思想是将context和CanvasRenderingContext2D对齐，所以F2针对支付宝和微信这两个常见场景做了一层context对齐，见详情：https://github.com/antvis/f2-context，其他小程序也可以用同样的方式打包。当然，微信小程序已经兼容f2，使用时可以省略这一步。首先在src（基于vue-cli）目录下的components文件夹下新建一个组件f2-uni，添加到f2-uni.vue文件的模板中。设置容器的宽度高的。.f2-canvas{宽度：100%；height:600rpx;}组件接收一个参数onInit，用于接收F2的构造方法和config。props:{onInit:{type:Function,default:()=>{}}}，注册组件初始化时调用该方法。从这里我们也可以看出小程序和h5在DOM操作的选择器方法上的区别。constquery=uni.createSelectorQuery().in(this)query.select('.f2-canvas').fields({node:true,size:true}).exec(res=>{const{node,width,height}=res[0]constcontext=node.getContext('2d')//微信基础库2.7.0及以上支持constpixelRatio=uni.getSystemInfoSync().pixelRatio//高清设置node.width=width*pixelRatio节点.height=height*pixelRatioconstconfig={context,width,height,pixelRatio}constchart=this.onInit(F2,config)if(chart){this.canvasEl=chart.get('el')}})注：Canvas.getContext基础库2.7.0开始支持，如有兼容性需求，请参考官方兼容性处理（https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html).触摸事件处理（其他两个相同）。functionwrapEvent(e){if(!e)returnif(!e.preventDefault){e.preventDefault=function(){}}returne}touchStart(e){constcanvasEl=this.canvasElif(!canvasEl){return}canvasEl.dispatchEvent('touchstart',wrapEvent(e))}至此组件体封装完成，可以在页面中使用了。方法：{onInitChart:(F2Constructor,config)=>{constchart=newF2Constructor.Chart(config)constdata=[{value:63.4,city:'NewYork',date:'2011-10-01'},{value:62.7,city:'Alaska',date:'2011-10-01'},{value:72.2，城市：'奥斯汀'，日期：'2011-10-01'}，{值：58，城市：'纽约'，日期：'2011-10-02'}，{值：59.9，城市：'阿拉斯加',date:'2011-10-02'},{value:67.7,city:'Austin',date:'2011-10-02'},{value:53.3,city:'纽约',date:'2011-10-03'},{值:59.1,城市:'阿拉斯加',日期:'2011-10-03'},{值:69.4,城市:'奥斯汀',日期:'2011-10-03'}]chart.source(data,{date:{range:[0,1],type:'timeCat',mask:'MM-DD'},value:{max:300,tickCount:4}})图表。是a().position('date*value').color('city').adjust('stack')chart.line().position('date*value').color('city').adjust('stack')chart.render()//注意：需要返回图表returnchart}}}成功渲染示例图表本文旨在提供思路，具体封装可以更加灵活易用。完整代码（https://code.juejin.cn/pen/7113852538541047821）。echarts同上，主要是对小程序的dom选择器和canvas上下文做了一些兼容处理。具体打包请参考dcloud社区一个不错的插件echartsforuniapp（https://ext.dcloud.net.cn/plugin?id=8017）下载插件zip包并查看源码代码。如果只是在微信小程序平台编译使用，条件编译不生效，我提取了一个纯净版：代码片段（https://code.juejin.cn/pen/7113871812777230372）。
