Taro多端F2图表
目前支持: H5、微信小程序、支付宝小程序
微信部分实现方法完全照搬: https://github.com/antvis/wx-f2
F2图表具体使用方法请参考: https://github.com/antvis/f2
直接克隆代码 可查阅示例
更新日志
- 2.1.2:
onCanvasInit
增加scope导出, 增加导出图片示例, 如果h5编译报错可以尝试将@tarojs/webpack-runner
降级到 1.2.x。具体参见:#18 - 2.1.0: 支持了按需引用
onInit
修改为onCanvasInit
,回调不再返回F2- 增加
F2Canvas.f2Fix()
方法, 用于为F2增加小程序等兼容代码 - 增加示例代码
- 1.2.0: 使用新的打包方式,注意升级Taro库到 1.2.0 或更高版本
- 1.1.2: 改用低版本@tarojs/cli编译,新版本貌似改了h5的编译方式了
- 1.1.0: 增加支付宝小程序支持, 修复h5模糊的问题
安装
$ yarn add taro-f2 @antv/f2
注意 @antv/f2 需要手动安装
修改项目配置文件 config/index.js
在 h5
的 esnextModules
中增加 taro-f2
{
h5: {
esnextModules: ['taro-f2']
}
}
在 weapp
的 compile.include
中增加 taro-f2
{
weapp: {
compile: {
include: ['taro-f2']
}
}
}
使用指南
在 Taro 文件中引入组件
import F2Canvas from "taro-f2";import fixF2 from "taro-f2/dist/weapp/common/f2-tool.ts";import F2 from "@antv/f2"
按需引用
假如一个业务场景下仅需要绘制饼图(不带动画)
import F2Canvas from "taro-f2";import fixF2 from "taro-f2/dist/weapp/common/f2-tool.ts";const F2 = ; // 必须引入; // 引入 interval 几何标记; // 引入 极坐标; // 引入数据层叠调整类型
事件
事件名称 | 说明 | 返回参数 |
---|---|---|
onCanvasInit | 画板初始化完毕事件 | (canvas: any, width: number, height: number, scope: any): void canvas: 小程序下为伪Canvas元素 |
F2Canvas宽高为100% 设置宽高需要在外面套个View
保存图片
ifprocessenvTARO_ENV === 'h5' const a = document; ahref = canvas; adownload = '图表.png'; a;else const saveTempFile = Taro; saveTempFile
示例
import Taro Component from '@tarojs/taro'import View from '@tarojs/components'import F2Canvas from 'taro-f2'import fixF2 from 'taro-f2/dist/weapp/common/f2-tool.ts'import F2 from '@antv/f2' { // ⚠️ 别忘了这行 // 为了兼容微信与支付宝的小程序,你需要通过这个命令为F2打补丁 ; const data = name: '超大盘能力' value: 65 name: '抗跌能力' value: 95 name: '稳定能力' value: 9 name: '绝对收益能力' value: 6 name: '选证择时能力' value: 6 name: '风险回报能力' value: 8 ; const chart = el: canvas width height ; chart; chart; chart; chart; chart ; chart ; chart; chart; chart; } { return <View ='index'> <View ='width:100%;height:500px'><F2Canvas =></F2Canvas></View> </View> }