在小程序（Taro）中使用antv/f2

最新推荐文章于 2025-06-05 09:09:28 发布

原创

最新推荐文章于 2025-06-05 09:09:28 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #taro

一、项目背景

二、使用方式

三、自定义图表的样式

公司的小程序项目需求中需要使用图表展示一些数据趋势，于是就去调研了一些图表的组件库，最后结合各组件库的图表样式、性能以及后期维护和扩展等方面决定使用antv/f2这个图表库，记录一下使用方式、样式等属性的修改方法以及遇到的一些坑点。

一、项目背景

项目技术框架是使用的Taro脚手架搭建的（React+ts），antv/f2是适用于移动端的图表组件库，适用于vue、react以及小程序（快速上手 | F2），官方文档上也介绍了如何在vue、react以及小程序中使用。but官网上介绍的小程序的使用方法是在小程序原生框架上的，墙裂建议文档上可以介绍一下在taro项目下的使用方式，因为最后在taro项目下成功把第一个图表demo跑下来发现，还是跟文档上介绍的小程序的使用方式挺不一样的

二、使用方式

1）npm install @antv/f2 --save

这里需要注意的是我用的antv/f2的版本是4.0.29版本的，不同版本的组件的调用方式是不一样的

我踩的第一个坑就是我在项目中安装的版本是4.x.x的，但是我的调用方式是import F2 from '@antv/f2' ，于是就一直报错，后面看文档才知道需要import {} from '@antv/f2'这样使用，所以大家开发的时候一定要仔细看文档哦

2）封装Canvas组件，后期在调用antv/f2画图表组件时都需要基于这个组件，直接附上踩完坑的代码，并且代码注释上会标明一些我踩的坑点(tips1,tips2,tips3...)，给各位第一次使用的小伙伴们节省一点时间学(摸)习(鱼)呀

import { ReactNode, FC, useEffect, useRef, memo,CSSProperties } from 'react';
import { useReady, createSelectorQuery, getSystemInfoSync } from '@tarojs/taro';
import { ITouchEvent, CanvasTouchEvent, Canvas } from '@tarojs/components';
import { Canvas as FFCanvas } from '@antv/f2';

import useUnmount from './use-