微信小程序中使用Antv F2绘制图表

1. 安装node.js
2. 终端打开项目所在根目录

npm init
npm install --production
npm i @antv/f2-canvas
npm install @antv/wx-f2 -save

3. 开发者工具中打开项目→右上角“详情”→勾选“使用npm模块”
4. 菜单栏→工具→构建npm
5. pages下新建文件夹column，column下新建page并命名为index
6. index.json

{
  "usingComponents": {
    "ff-canvas": "@antv/f2-canvas"
  }
}

7. index.wxml

<view class="container">
  <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>

8. 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: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

9. app.wxss

/**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;
} 

10. 编译结果

    
    result.gif