taro3.x 引入f2图表，F2Canvas定义

1、安装@antv/f2

npm install @antv/f2 –save
2、封装Canvas组件

F2Canvas.js

import React from ‘react’
import Taro from ‘@tarojs/taro’
import { Canvas } from ‘@tarojs/components’

/**
|————————————————–
| @Drawer
| #Component
| 封装的canvas
|————————————————–
*/

interface Config {
context: CanvasRenderingContext2D
width: number
height: number
pixelRatio: number
}

export type F2CanvasProps = {
id: string
className?: string
style: string
onInit: (conifg: Config) => any
}

function wrapEvent(e: any) {
if (!e) return
if (!e.preventDefault) {
e.preventDefault = function () {}
}
return e
}

export default class F2Canvas extends React.Component<F2CanvasProps> {
canvasEl: any
chart: any

componentWillMount() {
setTimeout(() => {
this.onWxCanvas()
}, 100)
}

// weapp canvas
onWxCanvas() {
const query = Taro.createSelectorQuery()

query
.select(‘#’ + this.props.id)
.fields({
node: true,
size: true,
})
.exec((res) => {
const { node, width, height } = res[0]
const context = node.getContext(’2d’)
const pixelRatio = Taro.getSystemInfoSync().pixelRatio
// 高清设置
node.width = width * pixelRatio
node.height = height * pixelRatio
// chart全局设置
const appendPadding = 5
const config = { context, width, height, pixelRatio, appendPadding }

const chart = this.props.onInit(config)
if (chart) {
this.chart = chart
this.canvasEl = chart.get(‘el’)
}
})
}

touchStart(e: { preventDefault: () => void }) {
const canvasEl = this.canvasEl
if (canvasEl) {
canvasEl.dispatchEvent(‘touchstart’, wrapEvent(e))
}
}

touchMove(e: any) {
const canvasEl = this.canvasEl
e.stopPropagation()
e.preventDefault()
if (canvasEl) {
canvasEl.dispatchEvent(‘touchmove’, wrapEvent(e))
}
}

touchEnd(e: { preventDefault: () => void }) {
const canvasEl = this.canvasEl
if (canvasEl) {
canvasEl.dispatchEvent(‘touchend’, wrapEvent(e))
}
}

render() {
return (
<Canvas
className={this.props.className}
style={this.props.style}
type=’2d’
id={this.props.id}
onTouchStart={this.touchStart.bind(this)}
onTouchMove={this.touchMove.bind(this)}
onTouchEnd={this.touchEnd.bind(this)}
/>
)
}
}
3、使用图表库

例如封装一个折线图组件

LineChart.js

import React, { Component } from ‘react’
import PropTypes from ‘prop-types’
import F2Canvas from ‘./F2Canvas’
import F2 from ‘@antv/f2′
// import fixF2 from ‘./fix_f2′

export default class LineChart extends Component {
constructor(props) {
super(props)
this.state = {}
}

render() {
const data = this.props.data
const initChart = (config) => {
// ⚠️ 别忘了这行
// 为了兼容微信小程序，你需要通过这个命令为F2打补丁
// fixF2(F2)
const chart = new F2.Chart(
Object.assign(config, {
appendPadding: [10, 15, 10, 15],
// 预留展示tooltip高度
padding: [40, 'auto', 'auto'],
})
)
chart.clear()

// 装载数据
chart.source(data, {
x: {
type: ‘timeCat’,
mask: ‘MM-DD’,
},
})

// 设置折线样式
chart.line().position(‘x*y’).color(‘#1876ff’).shape(‘smooth’)

// 设置折线锚点样式
chart.point().position(‘x*y’).color(‘#1876ff’).size(3)

// 添加tooltip
chart.tooltip({
showCrosshairs: true,
showTitle: true,
background: {
radius: 5,
fill: ‘#0a0d24′,
},
crosshairsStyle: {
stroke: ‘white’,
labelWidth: 2,
},
alwaysShow: true,
})

// 暂时固定样式，后续拓展
chart.axis(‘y’, {
label: {
fill: ‘#B6B5B8′,
fontSize: 12,
},
})
chart.axis(‘x’, {
label: {
fill: ‘#B6B5B8′,
fontSize: 12,
},
})

chart.render()
// 一定要返回chart实例哦
return chart
}

return (
<F2Canvas
id=’chart-id’
style={{ width: ’100%’, height: ’200px’ }}
onInit={initChart}
/>
)
}
}

LineChart.propTypes = {
data: PropTypes.array,
}
4、在页面中使用

import React, { useState } from ‘react’
// 根据自己摆放的路径引入，我是放在全局的
import LineChart from ‘@/common/components/f2-chart/lineChart’

const index = () => {
// 假数据
const data1 = [
{ y: 63.4, x: '2011-10-01' },
{ y: 62.7, x: '2011-10-02' },
{ y: 72.2, x: '2011-10-03' },
{ y: 58, x: '2011-10-04' },
{ y: 59.9, x: '2011-10-05' },
{ y: 67.7, x: '2011-10-06' },
{ y: 53.3, x: '2011-10-07' },
]

return (
<LineChart data={data1} />
)
}

export default Index

来源：https://heweizhi033.blog.csdn.net/article/details/115307131

最后编辑：2021-07-08

作者：管理员

这个作者貌似有点懒，什么都没有留下。

站内专栏