F2的微信小程序使用

1. F2简介及语法参照网址

   https://www.yuque.com/antv/f2/miniprogram

2. F2的微信小程序图表示例参照

   https://github.com/antvis/wx-f2

3. @antv/f2-canvas 模块为 F2 的微信小程序图表自定义组件，依赖于 @antv/wx-f2(F2
   对于微信小程序进行的适配)，请直接使用 @antv/f2-canvas。

   https://github.com/antvis/f2-canvas

原文链接（和原文相比有完善的地方）

F2的微信小程序使用详解

此教程适用于初步了解微信小程序基础框架的用户

1. 创建标准小程序
2. 在项目根目录下，初始化创建package.json文件

npm init    /*此处如果直接使用官方npm install 可能会出现没有node_modules错误*/

3. 安装npm install --production

npm install --production    /*建议使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小*/

4. 安装微信小程序 F2 图表组件

npm i @antv/f2-canvas

5. 安装好依赖包之后，运行**

点击开发者工具顶部详情，勾选 使用npm模块，再点击菜单栏中工具下的构建npm即可运行

6. 开始绘制柱状图

xx.json 配置文件，引入 f2-canvas 组件，由于微信小程序组件名不允许包含数字，所以这里将其命名为 ff-canvas。
// index.json
{
  "usingComponents": {
    "ff-canvas": "@antv/f2-canvas"
  }
}




xx.wxml 视图，使用 ff-canvas 组件，
其中 opts 是一个我们在 xx.js 中定义的对象，必设属性，
它使得图表能够在页面加载后被初始化并设置，详见 xx.js 中的使用
<!--index.wxml-->
<view class="container">
  <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>



xx.wxss 定义 ff-canvas 组件宽、高度
#column-dom{
  height: 100%;
  width: 100%
}


x.js 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。
// index.js
import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @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: {
     >: initChart
    }
  },

  onReady() {
  }
});

7. Q1：如果报如下图错误，检查是否有在 .wxss 文件中为 ff-canvas 组件定义 width 和 height 样式属性，如没有，加上即可，如此代码所示：

/**app.wxss**/
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} //这里是之前作者没有写到的本人探坑有这个


//可以不再app.wxss里面加这个，加这个会造成被绝对定位了可以只在xxx.wxss里加一个
.container {
		width: 100%;
		height: 75upx;
}
//只加高和宽就可以了

x.js 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。
在官方给的api中有这个
const chart = new F2.Chart({
  id: 'container',
  pixelRatio: window.devicePixelRatio
});
用的是这个window.devicePixelRatio会报错的
chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  直接把官方实例上的那个改成这个就行了el就是initChart的第一个实参调用这个方法时已经把window.devicePixelRatio封装进initChart的实参里了



// index.js
import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @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: {
     >: initChart
    }
  },

  onReady() {
  }
});