https://github.com/domisolo/taro-f2-react
在 Taro React 中使用 @antv/f2 。
https://github.com/domisolo/taro-f2-react
antv antv-f2 f2 miniprogram mp react taro tarojs
Last synced: 4 months ago
JSON representation
在 Taro React 中使用 @antv/f2 。
- Host: GitHub
- URL: https://github.com/domisolo/taro-f2-react
- Owner: domisolo
- License: mit
- Created: 2022-06-16T09:41:12.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T15:00:25.000Z (almost 2 years ago)
- Last Synced: 2025-10-08T20:52:39.779Z (8 months ago)
- Topics: antv, antv-f2, f2, miniprogram, mp, react, taro, tarojs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/taro-f2-react
- Size: 87.9 KB
- Stars: 28
- Watchers: 1
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# taro-f2-react
> 在 Taro React 中使用 @antv/f2 。
# Demo
# Install
```bash
#via pnpm
$ pnpm add taro-f2-react @antv/f2@4.0.51
# via npm
$ npm i taro-f2-react
# via yarn
$ yarn add taro-f2-react
```
# Usage
不需要额外配置 usingComponents 小程序原生组件，通过 import 引入 taro-f2-react 组件即可。
详细使用文档参考 [@antv/f2](https://f2.antv.vision/zh/docs/tutorial/getting-started)
接下来就可以愉快的在 Taro 中使用 F2 了
```javascript
import React from "react";
import { View } from "@tarojs/components";
import F2Canvas from "taro-f2-react";
import { Chart, Interval } from "@antv/f2";
const data = [
{ genre: "Sports", sold: 275 },
{ genre: "Strategy", sold: 115 },
{ genre: "Action", sold: 120 },
{ genre: "Shooter", sold: 350 },
{ genre: "Other", sold: 150 },
];
function Index() {
return (
);
}
```
## 多图表
有时候需要在同一个页面展示多个图表，这个时候就可以通过指定 F2Canvas 不同的 id 来实现
| 属性 | 类型 | 默认值 | 是否必填 |
| ------- | ------- | ------- | ------- |
| id | string | f2Canvas | 否 |
```javascript
...
```
# 异常处理
## TypeError: Cannot destructure property 'node' of 'res[0]' as it is null.
Taro 在 >= 3.6.0 版本中 Dev 模式下新增了 split chunks，导致加载第三方 UI 组件时，无法正确的挂载组件，可以通过修改以下配置关闭此特性，问题即可解决。
```
{
...
compiler: {
type: 'webpack5',
prebundle: {
enable: false,
},
},
...
}
```
# 关于 @antv/f2 5.x
* 由于开发者反馈 @antv/f2 5.x 版本的问题较多，最新版本修改为支持 4.x 版本
* 如果想体验 @antv/f2 5.x 版本，可以安装 taro-f2-react 1.2.0 版本
# Support
Taro >= 3.x
@antv/f2@4.x
## LICENSE [MIT](LICENSE)
Copyright © 2022 Daniel Zhao.