文章底部获取项目地址
F2 是一个专注于移动端的可视化图表引擎，支持 H5 并且兼容多种环境运行，如 Node、小程序，旨在为开发者提供高效、灵活的图表解决方案。支持多种类型图表，如折线图、面积图、柱状图、饼图、环形图、玫瑰图、雷达图、散点图、漏斗图、金字塔图、矩形式树图、旭日图、火焰图、K 线图、仪表图等等。
F2 提供多端适配功能，并支持在 Vue、React、小程序中使用，方法参考官方文档，以下是常规使用方法。
// npm
npm install @antv/f2 --save
// html
<canvas id="myChart" width="400" height="260"></canvas>
// js
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
const context = document.getElementById('myChart').getContext('2d');
const { props } = (
<Canvas context={context} pixelRatio={window.devicePixelRatio}>
<Chart data={data}>
<Axis field="genre" />
<Axis field="sold" />
<Interval x="genre" y="sold" color="genre" />
<Tooltip />
</Chart>
</Canvas>
);
const canvas = new Canvas(props);
canvas.render();
《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、在看、转发、关注！！！
其他推荐
项目地址
GitHub：https://github.com/antvis/f2
