阅读 35

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

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

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

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

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

可以使用微信扫描以下二维码先体验一番:

wx-f2

F2 的微信小程序版本,支持原生 F2 的所有功能,欢迎使用反馈。

快速体验

  • 微信扫码体验
  • 使用微信开发者工具打开此项目

文档结构

本项目参考了 echarts-for-weixin 的封装思路,即封装一个自定义组件 <f2-canvas>,方便用户使用,该组件位于 /f2-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 的按需加载)替换。

快速开始

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

以绘制柱状图为例:

<img src="https://gw.alipayobjects.com/zos/rmsportal/aDmzXXwkPmUFLCXwXBvo.gif" width="332">

  • 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 安装第三包。 重要:版本要求

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

如果需要使用原始版本,请 checkout 该项目的分支: github.com/antvis/wx-f…

使用微信开发者工具打开此项目,然后在项目根目录下运行:

npm install --production复制代码

安装好依赖包之后,点击工具顶部菜单栏的详情:

image

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

image

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

image

说明

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

  • 如果需要单独引入 F2 全局变量时,请安装 @antv/wx-f2,如不需要,则不需要安装。

  • 非 npm 包安装的自定义组件使用方式见 custom-components 分支。

API


关注下面的标签,发现更多相似文章
评论