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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android device monit
- 下一篇： 数仓dw怎么建_网易严选如何打造数仓规范