Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antvis/wx-f2
F2 的微信小程序
https://github.com/antvis/wx-f2
antv charts f2 miniprogram visualization webchat wei-xin weixin
Last synced: about 2 months ago
JSON representation
F2 的微信小程序
- Host: GitHub
- URL: https://github.com/antvis/wx-f2
- Owner: antvis
- License: mit
- Created: 2018-04-12T09:30:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-03T10:33:17.000Z (about 3 years ago)
- Last Synced: 2024-04-14T04:05:03.993Z (5 months ago)
- Topics: antv, charts, f2, miniprogram, visualization, webchat, wei-xin, weixin
- Language: JavaScript
- Homepage:
- Size: 720 KB
- Stars: 1,267
- Watchers: 49
- Forks: 186
- Open Issues: 145
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# F2 微信小程序
F2 的微信小程序版本，支持原生 [F2](https://f2.antv.vision/) 的所有功能，欢迎使用反馈。
## 快速体验
- 微信扫码体验
- 使用微信开发者工具打开此项
## 说明
为了方便使用，我们封装了微信小程序的自定义组件，故需要微信小程序支持使用 npm 安装第三包。
**重要：版本要求**
1. 小程序基础库版本 2.7.0 或以上
1. 开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。
## 如何使用
### 1. 安装依赖
项目默认初始化出来的是没有`package.json`的，需要新增`package.json`后再安装
```bash
## 没有package.json时执行下面这段
## echo "{}" > package.json
npm install @antv/wx-f2 --save
```
安装好依赖包之后，点击工具顶部菜单栏的详情：
勾选“使用 npm 模块”选项：
最后点击开发者工具中的菜单栏：工具 --> 构建 npm 即可运行。
如果碰到 **@babel/runtime 未找到npm包入口文件**，直接忽略就行了，不影响使用（强迫症碍眼的话，手动删除`node_modules/@babel/runtime`目录）
```bash
rm -rf node_modules/@babel/runtime
```
### 2. 使用自定义组件
#### 1. 打开json文件，引入组件
```json
{
"usingComponents": {
"f2": "@antv/wx-f2"
}
}
```
#### 2. wxml 使用组件
```xml
```
#### 3. wxss 设置宽高
```css
.f2-chart {
width: 100%;
height: 500rpx;
}
```
#### 4. 实例化图表
```js
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](https://f2.antv.vision/zh/docs/api/f2)
## 如何贡献
如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/wx-f2/issues) 看看有没有类似的 bug 或者建议。
## License
[MIT license](https://github.com/antvis/wx-f2/blob/master/LICENSE)