文章目录
前言
近期在做一个微信小程序的项目,涉及到大量的不同形式的图表展示,就需要集成比较成熟的图表组件,网上找了很多资料,有很多方案,但是尝试完都觉得不是很符合自己的要求,因为之前项目中有用到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