微信小程序图表组件 wx-f2

时间 2019-11-08

标签微信程序图表组件 f2 繁體版

原文原文链接

转载：https://www.jianshu.com/p/6b9fe45f799f

Github地址：github.com/antvis/wx-f…
AntV F2地址： AntV F2html

https://antv.alipay.com/zh-cn/f2/3.x/demo/

微信小程序图表组件 wx-f2，专为移动而生的可视化解决方案，特为你们提供了微信小程序端版本，体积小巧，性能卓越，底层基于图形语法，能够提供很是丰富的图表类型。html5

可使用微信扫描如下二维码先体验一番：git

wx-f2

F2 的微信小程序版本，支持原生 F2 的全部功能，欢迎使用反馈。github

快速体验

微信扫码体验

使用微信开发者工具打开此项目

文档结构

本项目参考了 echarts-for-weixin 的封装思路，即封装一个自定义组件 <f2-canvas>，方便用户使用，该组件位于 /f2-canvas 目录下。npm

微信小程序自定义组件结构和使用请参考: 自定义组件json

如下是目录结构说明：canvas

├── f2-canvas                    // f2-canvas 组件        
│   ├── f2-canvas.js
│   ├── f2-canvas.json
│   ├── f2-canvas.wxml
│   ├── f2-canvas.wxss
│   └── lib                      // f2-canvas 组件依赖的类库
│       ├── EventEmitter.min.js  // 事件发射器，用于监听、触发事件， 3.1K
│       ├── f2.js                // f2 脚本（压缩），155K
│       └── renderer.js          // f2 专为适配微信小程序绘图上下文 context 而封装的伪 Canvas
├── pages                        // f2-canvas 组件使用示例
│

复制代码

下载

因为目前微信小程序中不支持经过 npm install 来安装第三方的工具库，因此须要将本项目中的 /f2-canvas 文件夹拷贝到本身的项目中以便使用。小程序

注意微信小程序

/f2-canvas/lib/ 目录下的 f2.js 文件默认咱们会保证它始终为 F2 最新稳定版。若有必要，也能够由用户本身编译（如要使用 F2 的按需加载）替换。api

快速开始

下面咱们就开始使用 f2-canvas 组件来绘制图表吧，这里假设用户已经初步了解微信小程序的基础框架，如不了解，请先阅读官网教程：官方教程。

以绘制柱状图为例：

STEP 1：在 pages 目录下新建 column 目录，该目录须要包含如下几个文件：

index.js
index.json
index.wxml
index.wxss

各个文件的内容以下：

index.json 配置文件，引入 f2-canvas 组件，这里须要注意路径要正确，因为微信小程序组件名不容许包含数字，因此这里将其命名为 ff-canvas

// index.json
{
  "usingComponents": {
    "ff-canvas": "../../../f2-canvas/f2-canvas"
  }
}

复制代码

index.wxml 视图，使用 ff-canvas 组件，其中 opts 是一个咱们在 index.js 中定义的对象，必设属性，它使得图表可以在页面加载后被初始化并设置，详见 index.js 中的使用。

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

复制代码

index.js 逻辑处理，这里还须要引入 F2 用于绘制图表，结构以下，注意路径正确。

// index.js
import F2 from '../../../f2-canvas/lib/f2';

let chart = null;

function initChart(canvas, width, height) { // 使用 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() {
  }
});

复制代码

因为 f2-canvas 组件主要是对小程序的画布上下文和 html5 canvas 的上下文进行了适配以支持 F2 在小程序端的渲染，因此 F2 能绘制什么图表，小程序端就能绘制什么图表，使用时也只需按照 F2 的语法来写便可。

本项目只展现了部分 demos，更全的见 AntV F2。

须要注意的是，在建立 chart 的时候，须要使用 'el' 属性来指定容器，对应 this.data.opts.onInit方法形参中的 canvas 属性，另外该方法还会返回 width, height 属性分别对应画布的宽和高。

chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

复制代码

不支持的功能

目前因为小程序不支持 document，因此 Guide.Html 辅助元素组件目前仍没法使用，其余 F2 的功能所有支持。

微信版本要求

微信版本 >= 6.6.3
基础库版本 >= 1.9.91

组件 Github地址

github.com/antvis/wx-f…

F2 微信小程序图表 Demo

F2 的微信小程序版本，支持原生 F2 的全部功能，欢迎使用反馈。

快速体验

微信扫码体验

使用微信开发者工具打开此项目

如何使用

本 demo 图表使用微信小程序 F2 自定义图表组件 f2-canvas 绘制，故须要微信小程序支持使用 npm 安装第三包。 重要：版本要求

小程序基础库版本 2.2.1 或以上
开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。

若是须要使用原始版本，请 checkout 该项目的分支： github.com/antvis/wx-f…

使用微信开发者工具打开此项目，而后在项目根目录下运行：

npm install --production复制代码

安装好依赖包以后，点击工具顶部菜单栏的详情：

勾选“使用 npm 模块”选项：

最后点击开发者工具中的菜单栏：工具 --> 构建 npm 便可运行。

说明

@antv/f2-canvas 模块为 F2 的微信小程序图表自定义组件，依赖于 @antv/wx-f2(F2 对于微信小程序进行的适配)，请直接使用 @antv/f2-canvas。
若是须要单独引入 F2 全局变量时，请安装 @antv/wx-f2，如不须要，则不须要安装。
非 npm 包安装的自定义组件使用方式见 custom-components 分支。

API

@antv/f2-canvas 的使用详见： github.com/antvis/f2-c…
F2 API 参见：antv.alipay.com/zh-cn/f2/3.…