F2 图表库 Vue 集成实战指南：从 JSX 编译配置到组件化图表渲染

数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载导读本文基于 F2 官方文档 如何在 Vue 中使用系统讲解如何在 Vue 3 项目中引入 F2 图表库从安装依赖、配置 JSX 编译vue-cli/webpack 与 Vite 两种工程、到用Canvas、Chart、Axis、Interval等声明式组件渲染图表并结合本仓库源码与示例工程packages/f2-vue剖析底层 JSX 运行时原理。读完本文你将能在一个全新的 Vue 3 工程中从零搭建出可交互的 F2 图表并理解importSource、toRaw、pixelRatio等关键配置的来龙去脉。背景F2 5.x 的多端适配架构与 Vue 适配层F2 5.0 起F 系列基于移动端特点统一了底层渲染架构Fengine对接在最新的 G 5.0 之上。官方在 多端适配文档 中给出的架构概览为antv/f-engine— 无框架原生 JSantv/f-react— React 框架antv/f-vue— Vue 框架antv/f-my— 支付宝小程序端antv/f-wx— 微信小程序端F2 默认引入antv/f-engine中的 Canvas 能力使用者在不同框架/端下只需引入对应端的 Canvas 适配层与 F2 本体即可快速搭建可视化图表。本文聚焦其中 Vue 一端仓库内对应的适配层与完整示例位于 packages/f2-vue其中examples/vite是 Vue 3 Vite 工程examples/vue3是 Vue 3 vue-cliwebpack工程可作为下述配置步骤的可运行参照。安装依赖在 Vue 项目中同时安装图表库本体与 Vue 适配组件npm install antv/f2 --save npm install antv/f-vue --save其中antv/f2图表库本体本仓库对应 packages/f2当前版本为5.14.0提供Chart、Interval、Axis、Tooltip等图表组件antv/f-vueVue 框架适配层提供Canvas组件负责把 F2 的 JSX 渲染树挂载到 Vue 的响应式体系中。从仓库示例工程 packages/f2-vue/examples/vite/package.json 看一个完整的 Vue 3 Vite 示例还会显式声明vue^3.2.25、antv/f-engine1.x以及antv/f-vue1.x作为依赖说明 F2 5.x 的渲染核心由f-engine承担Vue 适配层只是桥接层。配置 JSX 编译F2 5.x 的图表描述采用 JSX 语法例如Chart data{data}.../Chart因此必须在构建工具中配置 JSX 编译将其转换为对 F2 JSX 运行时的调用。这一机制在源码中有直接体现packages/f2/jsx-runtime.js 仅有一行export * from antv/f-engine/jsx-runtime;即 F2 复用了f-engine的 JSX 运行时runtime: automatic模式会隐式引入该运行时。官方文档给出了 webpackvue-cli与 Vite 两种工程的配置方式完整如下。webpackvue-cli首先安装 Babel 插件npm install babel/plugin-transform-react-jsx --save-dev然后在项目根目录的vue.config.js中添加如下配置{ chainWebpack: (config) { config.module .rule(F2) .test(/\.jsx$/) .use(babel) .loader(babel-loader) .options({ plugins: [ [ babel/plugin-transform-react-jsx, { runtime: automatic, importSource: antv/f2, }, ], ], }) .end(); }, }仓库中的 vue-cli 示例 packages/f2-vue/examples/vue3/vue.config.js 在此基础上做了两点更精细的收窄可直接借鉴test用函数形式仅对.jsx文件生效并显式排除.vue.jsx后缀避免与 vue-cli 自身的 JSX 处理冲突.test((path) { // Only transform FEngine JSX in .jsx files. return /\.jsx$/.test(path) !/\.vue\.jsx$/.test(path); })示例中importSource写为antv/f-engine。从 packages/f2/jsx-runtime.js 的源码结构看antv/f2与antv/f-engine的 JSX 运行时同源因此文档中的importSource: antv/f2与示例中的importSource: antv/f-engine均可正常编译二者指向同一套运行时。Vite安装依赖npm install rollup/plugin-babel --save-dev npm install babel/plugin-transform-react-jsx --save-dev打开vite.config.js添加如下配置import vue from vitejs/plugin-vue; import vueJsx from vitejs/plugin-vue-jsx; import { babel } from rollup/plugin-babel; export default defineConfig({ plugins: [ babel({ plugins: [ [ babel/plugin-transform-react-jsx, { runtime: automatic, importSource: antv/f2, }, ], ], }), vue(), vueJsx(), ], });仓库中的 Vite 示例 packages/f2-vue/examples/vite/vite.config.js 与之基本一致仅在importSource上使用了antv/f-engine插件顺序上babel位于最前随后是vue()与vueJsx()。对应依赖版本可从 packages/f2-vue/examples/vite/package.json 查得babel/plugin-transform-react-jsx^7.17.3、rollup/plugin-babel^5.3.1、vitejs/plugin-vue^2.3.2、vitejs/plugin-vue-jsx^1.3.10。在 Vue 组件中渲染图表完成 JSX 编译配置后即可在 Vue 组件中通过render()返回 JSX 来声明图表。官方文档的完整示例如下script import { toRaw } from vue; import Canvas from antv/f-vue; import { Chart, Interval, Axis } from antv/f2; const data1 [ { genre: Sports, sold: 275 }, { genre: Strategy, sold: 115 }, { genre: Action, sold: 120 }, { genre: Shooter, sold: 350 }, { genre: Other, sold: 150 }, ]; const data2 [ { genre: Sports, sold: 275 }, { genre: Strategy, sold: 115 }, { genre: Action, sold: 20 }, { genre: Shooter, sold: 50 }, { genre: Other, sold: 50 }, ]; export default { name: App, data() { return { year: 2021, chartData: data1, }; }, mounted() { setTimeout(() { this.year 2022; this.chartData data2; }, 1000); }, render() { const { year, chartData } this; return ( div classNamecontainer Canvas pixelRatio{window.devicePixelRatio} Chart data{toRaw(chartData)} Axis fieldgenre / Axis fieldsold / Interval xgenre ysold colorgenre / /Chart /Canvas /div ); }, }; /script style .container { width: 500px; height: 300px; } /style这段示例包含几个关键点值得逐一展开组件分层Canvas来自antv/f-vue适配层负责提供渲染容器Chart、Axis、Interval来自antv/f2构成图表的三层描述结构——Chart接收数据并建立坐标系Axis按字段声明坐标轴fieldgenre、fieldsold分别对应分类轴与数值轴Interval声明柱形几何标记x、y、color分别绑定数据字段。toRaw(chartData)的作用Vue 3 中data()返回的对象会被包装成响应式 Proxy。F2 内部对数据有自身的处理与缓存逻辑示例统一通过 Vue 的toRaw取出原始数据对象再交给Chart避免响应式代理干扰图表内部的数据比较与更新。这是 Vue 3 集成 F2 时官方示例给出的标准写法仓库内两份示例 packages/f2-vue/examples/vite/src/App.vue 与 packages/f2-vue/examples/vue3/src/App.vue 均遵循这一约定。pixelRatio{window.devicePixelRatio}将 Canvas 的物理像素比与设备对齐保证移动端高清屏Retina下图表的文字与线条清晰锐利不会出现模糊。数据驱动的更新示例在mounted()中用setTimeout在 1 秒后将chartData切换为data2、year切换为2022图表会随响应式数据变化自动重渲染仓库的 vue3 示例还在此基础上增加了 3 秒后切回data1的循环演示并额外引入了Tooltip组件。这直观展示了 F2 与 Vue 响应式体系结合后的“改数据即改图”开发体验。使用 JSX 编写自定义图形除了组合内置的Chart/Axis/Interval等声明式组件F2 的 JSX 还可以直接描述画布图形节点用于叠加自定义标注。仓库示例工程中的 packages/f2-vue/examples/vite/src/graphic.jsx与 vue3 示例 packages/f2-vue/examples/vue3/src/graphic.jsx 内容一致给出了一个典型的自定义视图组件function View(props) { const { coord, year } props; const { left, top, width, height } coord; const x left width / 2; const y top height / 2; return ( group text attrs{{ x, y, text: year, textAlign: center, fontSize: 80px, fill: #ddd, }} / /group ); } export default View;要点说明自定义视图是一个纯函数组件接收props从源码结构看其中coord提供图表坐标系的left、top、width、height可用于把图形定位到绘图区中央示例中x、y即取绘图区中心返回的group/text是 F2 的图形节点 JSX 标签attrs中声明位置、文字、字号与颜色等图形属性该组件在 App.vue 中以Grahpic year{year} /的形式嵌在Chart内year直接来自 Vue 组件的数据从而与图表数据联动更新示例中 2021/2022 的年份数字会随数据切换而变化。这一模式是 F2 在 Vue 中做“图表 自定义图形”扩展的标准姿势更多用法可参考官方 自定义视图文档。仓库内完整示例与运行方式本仓库提供了两套可直接运行的 Vue 集成示例建议对照本文逐步实践工程路径技术栈Vite 示例packages/f2-vue/examples/viteVue 3 Vite 2.xvue-cli 示例packages/f2-vue/examples/vue3Vue 3 vue-cli/webpack以 Vite 示例为例其package.jsonpackages/f2-vue/examples/vite/package.json提供了devvite、buildvite build、previewvite preview三个脚本。进入对应目录安装依赖后执行npm run dev即可本地起服务查看图表效果其中包含柱状图、坐标轴、自定义年份标注、数据动态切换等完整演示。小结与常见坑位JSX 编译是前置条件忘记配置babel/plugin-transform-react-jsx或importSource写错会直接导致Chart、Interval等标签无法解析importSource两种取值均可用文档写antv/f2仓库示例写antv/f-engine二者运行时同源见 packages/f2/jsx-runtime.jsvue-cli 注意规则隔离建议像仓库示例一样仅匹配.jsx并排除.vue.jsx避免与框架自带 JSX 转换冲突数据传原始对象Vue 3 中记得用toRaw包裹图表数据保持 F2 数据处理的纯净性移动端清晰度Canvas pixelRatio{window.devicePixelRatio}是高清屏适配的标配写法。至此从依赖安装、构建配置到组件化渲染与自定义图形一套完整的 F2 × Vue 3 集成方案已经落地可直接迁移到自己的项目中。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐F2 核心概念与组件化架构完全指南从图表结构到声明式 JSX 实战F2 核心概念与组件化架构完全指南从图表结构到声明式 JSX 实战 F2 是一款面向移动端、基于 Canvas 渲染的交互式图表库其核心设计是 声明式的组件数据可视化前端aws-cli 中 set-type-default-version 命令详解为 CloudFormation 注册表扩展类型设置默认版本aws cli 中 set type default version 命令详解为 CloudFormation 注册表扩展类型设置默认版本 导读 本文围绕 A数据可视化前端Ignite图表组件数据可视化与图表库集成Ignite图表组件数据可视化与图表库集成 引言为什么React Native应用需要专业的数据可视化 在移动应用开发中数据可视化Data Visua开发工具代码生成移动开发上一篇3大颠覆式功能让《工业队长》效率倍增DoubleQoLMod-zh完全指南下一篇Deepin Boot Maker启动盘制作的零门槛解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考