微信小程序中AntV F2的使用

微信小程序 专栏收录该内容
4 篇文章 0 订阅

最近在做小程序时,需要做部分数据图表,对比了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 () {
          
    }, 
})

修改之后的效果:

  • 0
    点赞
  • 1
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值