微信小程序 + 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: