taro-f2-react
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

taro-f2-react

支持在使用 Taro React 开发小程序中,按 React 组件书写方式使用 F2 。
使用 @antv/f2
taro-f2-react 1.1.x 支持 4.x <= @antv/f2 < 5.x
taro-f2-react 1.2.x 支持 @antv/f2 >= 5.x

Demo

Demo

Install

#via pnpm
$ pnpm add taro-f2-react @antv/f2

# via npm
$ npm i taro-f2-react @antv/f2

# via yarn
$ yarn add taro-f2-react @antv/f2

Usage

不需要额外配置 usingComponents 小程序原生组件,通过 import 引入 taro-f2-react 组件即可。
详细使用文档参考 @antv/f2
接下来就可以愉快的在 Taro 中使用 F2 了

import React from 'react';
import ReactDOM from 'react-dom';
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 },
];

ReactDOM.render(
  <View style={{ width: '100%', height: '260px' }}>
    <F2Canvas>
      <Chart data={data}>
        <Interval x="genre" y="sold" />
      </Chart>
    </F2Canvas>
  </View>,
  document.getElementById('root')
);

多图表

有时候需要在同一个页面展示多个图表,这个时候就可以通过指定 F2Canvas 不同的 id 来实现

属性 类型 默认值 是否必填
id string f2Canvas
<F2Canvas id="myCanvas1">
  <Chart data={data}>
    <Interval x="genre" y="sold" />
  </Chart>
</F2Canvas>

...

<F2Canvas id="myCanvas2">
  <Chart data={data}>
    <Interval x="genre" y="sold" />
  </Chart>
</F2Canvas>

异常处理

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,
    },
  },
  ...
}

Support

Taro >= 3.x
taro-f2-react 1.1.x 支持 4.x <= @antv/f2 < 5.x
taro-f2-react 1.2.x 支持 @antv/f2 >= 5.x

LICENSE MIT

Copyright © 2022 Daniel Zhao.

Package Sidebar

Install

npm i taro-f2-react

Weekly Downloads

14

Version

1.2.0

License

MIT

Unpacked Size

12.7 kB

Total Files

11

Last publish

Collaborators

  • danielzd