F2 的微信小程序版本，支持原生 F2 的所有功能

F2 的微信小程序版本，支持原生 F2 的所有功能

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 模块”选项：

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

rm -rf node_modules/@babel/runtime

2. 使用自定义组件

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

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

2. wxml 使用组件

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

F2 API 参见：https://f2.antv.vision/zh/docs/api/f2

如何贡献

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

License

MIT license

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。