微信小程序中AntV F2的使用

最近在做小程序时，需要做部分数据图表，对比了AntV F2、echarts和ucharts，最后选择了比较陌生的AntV F2，想尝试一下。

一、使用环境准备

---

1、创建全新小程序。

2、打开刚刚创建的小程序，在项目根目录下，初始化package文件

npm init

3、使用--production选项可以减少安装一些无用的npm包，可有效减少整个小程序的体积大小。

npm install --production

4、安装小程序F2组件

npm i @antv/f2-canvas

5、安装好相关依赖包之后，使用微信开发者工具运行项目，点击开发者工具顶部详情，勾选 使用npm模块，再点击菜单栏中工具下的构建npm即可运行

二、开始使用

---

走到这里，我们就可以来使用F2来绘制相关的图表了，这里，咱们一起来两个例子，第一个例子以看到效果为目的，第二个例子结合异步请求，动态实现数据的渲染。

1、静态效果实现

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

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

index.wxss 定义 ff-canvas 组件宽、高度
.container {
  width:90%;
  height: 400rpx;
  margin: 0 auto;
  border: 1px solid #dde1e3;
  box-sizing: border-box;
} 
.canvasStyle{
  width: 100%;
  height: 100%;
}

import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @antv/wx-f2 依赖
let chart3 = null;
function initChart3(canvas, width, height, F2) { // 使用 F2 绘制图表
    var data2 = [{
        time: '2016-08-08 00:00:00',
        tem: 10
    },{
        time: '2016-08-09 00:00:00',
        tem: 85
    }] 
    chart3 = new F2.Chart({
        el: canvas,
        width,
        height
    });
    chart3.source(data2, {
        time: {
            type: 'timeCat',
            tickCount: 3,
            range: [0, 1]
        },
        tem: {
            tickCount: 5,
            min: 0
        }
    });

    chart3.axis('time', {
        label: function label(text, index, total) {
            const textCfg = {};
            if (index === 0) {
                textCfg.textAlign = 'left';
            } else if (index === total - 1) {
                textCfg.textAlign = 'right';
            }
            return textCfg;
        }
    });
    chart3.tooltip({
        showCrosshairs: true
    });

    chart3.area()
        .position('time*tem')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth');
    chart3.line()
        .position('time*tem')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth');
    chart3.render();
}
Page({

    /**
     * 页面的初始数据
     */
    data: {
        opts3: {
            onInit: initChart3, 
        }, 
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
         
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        
    },
})

以上代码效果展示如下： 

2、异步请求数据渲染 

针对于实际业务中，往往静态效果不能满足我们的需求，这里我们就一起来看一下异步请求后的数据如何来进行渲染，其实异步请求的数据进行渲染，我们仅仅需要来处理一下我们js代码：

import F2 from '@antv/wx-f2'; // 注：也可以不引入， initChart 方法已经将 F2 传入，如果需要引入，注意需要安装 @antv/wx-f2 依赖
let chart3 = null;
function initChart3(canvas, width, height, F2) { // 使用 F2 绘制图表
    var pages = getCurrentPages(); // 获取当前页面栈
    var currPage = pages[pages.length - 1];
    var data1 = currPage.data.aademo;
    var dataArray = [];
    for(var i = 0;i < data1.length;i++){
        var item = {};
        item['time'] = data1[i]['DateTime'];
        item['tem'] = data1[i]['RepairNum'];
        dataArray.push(item);
    } 
    chart3 = new F2.Chart({
        el: canvas,
        width,
        height
    });
    chart3.source(dataArray, {
        time: {
            type: 'timeCat',
            tickCount: 3,
            range: [0, 1]
        },
        tem: {
            tickCount: 5,
            min: 0
        }
    });

    chart3.axis('time', {
        label: function label(text, index, total) {
            const textCfg = {};
            if (index === 0) {
                textCfg.textAlign = 'left';
            } else if (index === total - 1) {
                textCfg.textAlign = 'right';
            }
            return textCfg;
        }
    });
    chart3.tooltip({
        showCrosshairs: true
    });

    chart3.area()
        .position('time*tem')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth');
    chart3.line()
        .position('time*tem')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
        .shape('smooth');
    chart3.render();
}
Page({

    /**
     * 页面的初始数据
     */
    data: {
        opts3:{
            lazyLoad: true
        },
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.request({
            url: getApp().globalData.basepath + 'xxxx',
            method: 'post',
            success: function (res) {
                if (res) {
                    _this.setData({
                        aademo: res.data,
                    })
                    _this.ecComponent = _this.selectComponent('#mycanvas');
                    _this.ecComponent.init(initChart3);
                }
            }
        })

    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
          
    }, 
})

修改之后的效果：