taro引入f2图表_Package - taro-f2
Taro多端F2图表
目前支持: H5、微信小程序、支付宝小程序
直接克隆代码 可查阅示例
更新日志
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 = require('@antv/f2/lib/core'); // 必须引入
require('@antv/f2/lib/geom/interval'); // 引入 interval 几何标记
require('@antv/f2/lib/coord/polar'); // 引入 极坐标
require('@antv/f2/lib/geom/adjust/stack'); // 引入数据层叠调整类型
事件
事件名称
说明
返回参数
onCanvasInit
画板初始化完毕事件
(canvas: any, width: number, height: number, scope: any): void
canvas: 小程序下为伪Canvas元素
F2Canvas宽高为100% 设置宽高需要在外面套个View
保存图片
if(process.env.TARO_ENV === 'h5'){
const a = document.createElement("a");
a.href = canvas.toDataURL('image/png');
a.download = '图表.png';
a.click();
}else {
const saveTempFile = Taro.canvasToTempFilePath({
canvasId: canvas.ctx.canvasId,
}, scope);
saveTempFile.then(image => {
Taro.saveImageToPhotosAlbum({
filePath: image.tempFilePath,
}).then(() => {
Taro.showToast({ title: '保存成功', icon: 'none' })
}, () => {
Taro.showToast({ title: '保存相册失败', icon: 'none' })
})
}, () => {
Taro.showToast({ title: '无法读取canvas', icon: 'none' })
})
}
示例
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'
export default class Index extends Component {
drawRadar(canvas, width, height){
// ⚠️ 别忘了这行
// 为了兼容微信与支付宝的小程序,你需要通过这个命令为F2打补丁
fixF2(F2);
const data = [
{ name: '超大盘能力', value: 6.5 },
{ name: '抗跌能力', value: 9.5 },
{ name: '稳定能力', value: 9 },
{ name: '绝对收益能力', value: 6 },
{ name: '选证择时能力', value: 6 },
{ name: '风险回报能力', value: 8 }
];
const chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
value: {
min: 0,
max: 10
}
});
chart.coord('polar');
chart.axis('value', {
grid: {
lineDash: null
},
label: null,
line: null
});
chart.axis('name', {
grid: {
lineDash: null
}
});
chart.area()
.position('name*value')
.color('#FE5C5B')
.style({
fillOpacity: 0.2
})
.animate({
appear: {
animation: 'groupWaveIn'
}
});
chart.line()
.position('name*value')
.color('#FE5C5B')
.size(1)
.animate({
appear: {
animation: 'groupWaveIn'
}
});
chart.point().position('name*value').color('#FE5C5B').animate({
appear: {
delay: 300
}
});
chart.guide().text({
position: ['50%', '50%'],
content: '73',
style: {
fontSize: 32,
fontWeight: 'bold',
fill: '#FE5C5B'
}
});
chart.render();
}
render () {
return (
)
}
}
Current Tags
2.2.0 ... latest (a year ago)
30 Versions
2.2.0 ... a year ago
2.1.2 ... 2 years ago
2.1.1 ... 2 years ago
2.1.0 ... 2 years ago
2.0.9 ... 2 years ago
2.0.8 ... 2 years ago
2.0.7 ... 2 years ago
2.0.6 ... 2 years ago
2.0.5 ... 2 years ago
2.0.4 ... 2 years ago
2.0.3 ... 2 years ago
2.0.2 ... 2 years ago
2.0.1 ... 2 years ago
2.0.0 ... 2 years ago
1.2.1 ... 2 years ago
1.2.0 ... 2 years ago
1.1.2 ... 2 years ago
1.1.1 ... 2 years ago
1.1.0 ... 2 years ago
1.0.10 ... 2 years ago
1.0.9 ... 2 years ago
1.0.8 ... 2 years ago
1.0.7 ... 2 years ago
1.0.6 ... 2 years ago
1.0.5 ... 2 years ago
1.0.4 ... 2 years ago
1.0.3 ... 2 years ago
1.0.2 ... 2 years ago
1.0.1 ... 2 years ago
1.0.0 ... 2 years ago
taro引入f2图表_Package - taro-f2相关推荐
- f2 柱状图滚动 钉钉小程序_钉钉小程序图表库AntV - F2 使用总结
项目涉及图表部分的技术选型 对于图表这块的开发,使用一些流行的图表库可以大大提高我们的开发效率,目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异,我印象比较深刻的是 ...
- 微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件 安装 npm i @antv/f2-canvas 快速开始 下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...
- 微信小程序中绘制图表 (AntV F2 的使用)
1.安装小程序F2组件 npm i @antv/f2-canvas 2.安装好相关依赖包之后,使用微信开发者工具运行项目,点击开发者工具顶部详情,勾选 使用npm模块,再点击菜单栏中工具下的构建npm ...
- 支付宝小程序中使用F2图表
支付宝小程序中使用F2图表 介绍 最近在支付宝小程序开发中接到显示图表的需求,因为支付宝小程序方未提供相关插件,并且目前支付宝小程序不支持document,所以根据推荐使用f2-canvas图表组件. ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
- canvas画条形图 微信小程序_小程序-引入 echart 图表画圆饼图
前言 在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢 示例效果 完整示例效果-可以点击此处查看 下载使用 ec-canvas 在github上下载echarts ...
- taro 引入js_Taro跨端开发之多业务模块管理 React Native篇(终篇)
React Native 热更新方案 rn的业务越来越庞大,同时协同的团队越来越多. rn的动态化就必须提上日程了. 对于rn热更新,首当其冲的问题就是分包. rn的基础库很大,再加上我们依赖了很多的 ...
- 钉钉小程序----使用阿里的F2图表
在钉钉小程序中使用F2的图表遇见很多问题 不能点击或者点击错乱的问题还没有解决,因为我解决不了........................... ------------------------- ...
最新文章
- java SE环境变量配置
- 构造器与一般方法对比
- 076_浏览器对象模型
- windows 10家庭版关闭Defender
- AGC038D - Unique Path(建图)
- [转]FFMPEG调节音频的音量大小,混音
- 使用string定义一个变量如何输出
- RabbitMQ 基本使用(注解的方式)
- oracle中结果集合并
- 敏捷开发任务看板_看板方法的进化论:从丰田精益方法到敏捷研发
- Spring MVC框架-持久层用hibernate自动化(1)
- 【sklearn第五讲】特征提取(上)
- 详解Unity的几种移动方式实现
- 淘宝新店铺如何打造爆款
- 群晖nas不能修改php.ini,群晖nas 修改nginx配置的问题
- matlab 中trace,trace命令和tracert命令的用途 matlab中的trace 怎么用的?
- C语言:判断质数合数的代码
- pr图形模板预设怎么使用_PR怎样安装动态图形模板?怎样调用Mogrt预设?Premiere导入MOGRTs预设完整教程...
- 2018“云移杯- 景区口碑评价分值预测
- 51单片机:流水灯蜂鸣器控制
热门文章
- 手把手教你安装Flutter(Flutter起步之安装)
- jQuery获取或设置元素的宽度和高度
- A1035. 素数之和
- [CareerCup] 9.5 Permutations 全排列
- 【数据挖掘】中文期刊点评
- *62.分页和分段的区别
- Tensorflow从入门到精通之——Tensorflow基本操作
- (一)为什么你应该(从现在开始就)写博客
- c,C++语言中、\t \r \n 和空格什么意思
- 中山行书百年纪念版字体可以商用吗_干货|免费可商用字体