taro引入f2图表_关于在小程序项目中使用图表插件AntV（即F2）

前言：最近嘛从开发H5和各种图表系统被拉到来开发小程序，拿到的一个项目里面就涉及几个图表，用canvas是能实现效果，但是周期长而且还不一定好看稳定。所以嘛就上网找了相关资料。发现有Echarts为小程序专门改写的一套，但是类型不是很全，就转到了AntV这里来，阿里写的F2内容也挺全的。所以就采用了。在这里贴链接感谢这位码友的分享给我的灵感先 https://www.jianshu.com/p/6b9fe45f799f 。然后直接上代码(代码是经过项目需求更改的，仅做参考)如果找不到可以直接用下面我这个：https://github.com/FreeGrowth/f2-canvas

(/* 截图小程序为本人开发。转载请带上本文URL地址和出处，尊重劳动成果，谢谢 */)

1.如何引入F2在小程序中

先下载上面的GitHub地址中的代码压缩包，然后把里面的f2-canvas整个文件夹放到你的项目当中，路径要记得。如图

2. 在你所要用到的页面中import进去，引入的地方分别是json和js文件(当然也可以在app.js和app.json中引入)切记，两个都要引入哦

js引入：import F2 from '../../common/f2-canvas/lib/f2'; (路径按照你自己放的路径去改)

json引入如下：

{

"usingComponents": {

"ff-canvas": "../../common/f2-canvas/f2-canvas" // 这里是路径

}

}

3. 一切就绪后开始撸图表啦，wxml要先写好对应的容器宽高，一定要给宽高

这里的id可以随便给，但canvas-id最好按照F2的指定图表id来，具体可以看F2的demo。 opts绑定的是对应的数据变量名

css如下：(不给它宽高会报错的～)

#pie