加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    F2 微信小程序

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

    快速体验

    • 微信扫码体验

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

    说明

    为了方便使用,我们封装了微信小程序的自定义组件,故需要微信小程序支持使用 npm 安装第三包。
    重要:版本要求

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

    如何使用

    1. 安装依赖

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

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

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

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

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

    如果碰到 @babel/runtime 未找到npm包入口文件,直接忽略就行了,不影响使用(强迫症碍眼的话,手动删除node_modules/@babel/runtime目录)

    rm -rf node_modules/@babel/runtime

    2. 使用自定义组件

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

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

    2. wxml 使用组件

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

    3. wxss 设置宽高

    .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

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/antvis/wx-f2

    发行版本

    当前项目没有发行版本

    贡献者 6

    开发语言

    • JavaScript 100.0 %