Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 101 Commits
.github		.github
scripts		scripts
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
package.json		package.json
rollup.config.js		rollup.config.js

Repository files navigation

F2 微信小程序

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

快速体验

微信扫码体验

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

说明

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

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

如何使用

1. 安装依赖

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

## 没有package.json时执行下面这段## echo "{}" > package.jsonnpm 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 使用组件

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

3. wxss 设置宽高

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

4. 实例化图表

Page({data:{onInitChart(F2,config){constchart=newF2.Chart(config);constdata=[{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 出来returnchart;}},});