Taro多端F2圖表

目前支持: H5、微信小程序、支付寶小程序

直接克隆代碼 可查閱示例

更新日志

2.1.2: onCanvasInit 增加scope導(dǎo)出, 增加導(dǎo)出圖片示例, 如果h5編譯報(bào)錯(cuò)可以嘗試將@tarojs/webpack-runner降級(jí)到 1.2.x。具體參見:#18

2.1.0: 支持了按需引用

onInit 修改為 onCanvasInit,回調(diào)不再返回F2

增加 F2Canvas.f2Fix() 方法, 用于為F2增加小程序等兼容代碼

增加示例代碼

1.2.0: 使用新的打包方式，注意升級(jí)Taro庫(kù)到 1.2.0 或更高版本

1.1.2: 改用低版本@tarojs/cli編譯，新版本貌似改了h5的編譯方式了

1.1.0: 增加支付寶小程序支持, 修復(fù)h5模糊的問(wèn)題

安裝

$ yarn add taro-f2 @antv/f2

注意 @antv/f2 需要手動(dòng)安裝

修改項(xiàng)目配置文件 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"

按需引用

假如一個(gè)業(yè)務(wù)場(chǎng)景下僅需要繪制餅圖(不帶動(dòng)畫)

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 幾何標(biāo)記

require('@antv/f2/lib/coord/polar'); // 引入 極坐標(biāo)

require('@antv/f2/lib/geom/adjust/stack'); // 引入數(shù)據(jù)層疊調(diào)整類型

事件

事件名稱

說(shuō)明

返回參數(shù)

onCanvasInit

畫板初始化完畢事件

(canvas: any, width: number, height: number, scope: any): void

canvas: 小程序下為偽Canvas元素

F2Canvas寬高為100% 設(shè)置寬高需要在外面套個(gè)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: '保存相冊(cè)失敗', icon: 'none' })

})

}, () => {

Taro.showToast({ title: '無(wú)法讀取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){

// ?? 別忘了這行

// 為了兼容微信與支付寶的小程序，你需要通過(guò)這個(gè)命令為F2打補(bǔ)丁

fixF2(F2);

const data = [

{ name: '超大盤能力', value: 6.5 },

{ name: '抗跌能力', value: 9.5 },

{ name: '穩(wěn)定能力', value: 9 },

{ name: '絕對(duì)收益能力', value: 6 },

{ name: '選證擇時(shí)能力', value: 6 },

{ name: '風(fēng)險(xiǎn)回報(bào)能力', 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

總結(jié)

以上是生活随笔為你收集整理的taro引入f2图表_Package - taro-f2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。