在taro项目中使用antv/f2图表库

最新推荐文章于 2024-10-11 10:43:36 发布

一下子就醒了

最新推荐文章于 2024-10-11 10:43:36 发布

阅读量3.3k

点赞数 1

分类专栏： Taro 文章标签： taro antv/f2 react 小程序

本文链接：https://blog.csdn.net/weixin_42442713/article/details/115307131

版权

本文介绍如何在Taro项目中使用AntV F2图表库，包括安装库、封装Canvas组件F2Canvas.js，创建LineChart.js折线图组件，以及在页面实际应用和展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
  }

  /