@antv/my-f2

    2.1.6 • Public • Published

    F2 支付宝小程序

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

    说明

    为了方便使用,我们封装了小程序的自定义组件,故需要支付宝小程序基础库支持自定义组件

    重要:版本要求

    1. 小程序基础库版本 1.7.0 或以上

    如何使用

    1. 安装依赖

    项目默认初始化出来的是没有package.json的,需要新增package.json后再安装

    ## 没有package.json时执行下面这段
    ## echo "{}" > package.json
    
    npm install @antv/my-f2 --save

    2. 使用自定义组件

    1. 打开json文件,引入组件

    {
      "usingComponents": {
        "f2": "@antv/my-f2"
      }
    }

    2. axml 使用组件

    <view class="f2-chart">
      <f2 onInit="onInitChart"></f2>
    </view>

    3. acss 设置宽高

    .f2-chart {
      width: 100%;
      height: 500rpx;
    }

    4. 实例化图表

    Page({
      data: {},
      onInitChart(F2, config) {
        const chart = new F2.Chart(config);
        const data = [
          { value: 63.4, city: 'New York', date: '2011-10-01' },
          { value: 62.7, city: 'Alaska', date: '2011-10-01' },
          { value: 72.2, city: 'Austin', date: '2011-10-01' },
          { value: 58, city: 'New York', date: '2011-10-02' },
          { value: 59.9, city: 'Alaska', date: '2011-10-02' },
          { value: 67.7, city: 'Austin', date: '2011-10-02' },
          { value: 53.3, city: 'New York', date: '2011-10-03' },
          { value: 59.1, city: 'Alaska', date: '2011-10-03' },
          { value: 69.4, city: 'Austin', date: '2011-10-03' },
        ];
        chart.source(data, {
          date: {
            range: [0, 1],
            type: 'timeCat',
            mask: 'MM-DD'
          },
          value: {
            max: 300,
            tickCount: 4
          }
        });
        chart.area().position('date*value').color('city').adjust('stack');
        chart.line().position('date*value').color('city').adjust('stack');
        chart.render();
        // 注意:需要把chart return 出来
        return chart;
      }
    });

    API

    如何贡献

    如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

    License

    MIT license

    Install

    npm i @antv/my-f2

    DownloadsWeekly Downloads

    145

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    7.52 kB

    Total Files

    8

    Last publish

    Collaborators

    • iaaron
    • wjgogogo
    • yangzhanmei
    • jinke.li
    • susan_ann
    • yard
    • intchous
    • soundquiet
    • lviser
    • freestyle21
    • serializedowen
    • sturuby
    • xdzhao
    • elaine.q.10
    • sakuya223
    • leungwensen
    • dori
    • simaq
    • dxq613
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn