【项目技术点总结之二】微信小程序中集成antvF2进行图表开发

本文档介绍了如何在微信小程序中集成Antv F2 4.x版本,对比了不同版本的使用差异,并提供了从环境配置到页面开发的详细步骤,包括配置npm、编写页面代码等,帮助开发者顺利实现图表展示。同时,文章还讨论了与其他解决方案如@antv/f2-canvas和@antv/wx-f2的对比,以及如何在不使用jsx的情况下进行开发。
摘要由CSDN通过智能技术生成


前言

近期在做一个微信小程序的项目,涉及到大量的不同形式的图表展示,就需要集成比较成熟的图表组件,网上找了很多资料,有很多方案,但是尝试完都觉得不是很符合自己的要求,因为之前项目中有用到antvF2做移动端的图表开发,因此就仍是使用该方案。
再者,网上关于集成antvF2的方法也有几种,比如:@antv/f2-canvas(git166※);以及@antv/wx-f2(git1.2k※),但最近以此更新也是2年前了,找了很长时间资料,没找到最新的antvF2集成整合方案,因此记录一下个人使用的方法。


一、antvF2简介

antvF2目前是4.x版本,与之前版本的语法差异比较大,之前版本是通过API的方法进行调用,而4.x版本以声明式编写图表,声明式可以让代码更直观和简介,避免了复杂的 API 调用,而且采用了JSX语法(JSX语法)。

1.1 前后版本使用差异

4.x版本的核心用法:

import {
    jsx, Canvas, Chart, Interval, Axis, Tooltip, Legend } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const data = [
  {
    genre: 'Sports', sold: 275 },
  {
    genre: 'Strategy', sold: 115 },
  {
    genre: 'Action', sold: 120 },
  {
    genre: 'Shooter', sold: 350 },
  {
    genre: 'Other', sold: 150 },
];
const 
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值