今天给大家分享一款超优秀的移动端可视化方案F2。
antv-F2 蚂蚁金服研发的移动端图表可视化方案,star高达7.3K 。完美支持H5,兼容多种环境(Node、小程序、Weex)专业的移动端图表体验。
功能特性
- 专注移动-体验优雅:围绕设计、性能以及异构环境,为用户提供移动端图表的最佳实践。
- 图表丰富-组件完备:基于图形语法,可灵活构建各类图表(50 ),组件完备,覆盖各类场景。
- 扩展灵活-创意无限:插件机制,图形、动画、交互均可灵活扩展,使用更自由。
安装
$ npm i @antv/f2 -S
引入插件
安装成功后,即可使用import或浏览器引入。
import { Chart } from \'@antv/f2\';
<script src="https://unpkg.com/@antv/f2@3.7.7/dist/f2.js">script>
<script src="./f2.js">script>
使用插件
<canvas id="myChart" width="400" height="260">canvas>
<script>
const data = [
{ genre: \'Sports\', sold: 275 },
{ genre: \'Strategy\', sold: 115 },
{ genre: \'Action\', sold: 120 },
{ genre: \'Shooter\', sold: 350 },
{ genre: \'Other\', sold: 150 },
];
// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
id: \'myChart\',
pixelRatio: window.devicePixelRatio // 指定分辨率
});
// Step 2: 载入数据源
chart.source(data);
// Step 3: 绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
chart.interval().position(\'genre*sold\').color(\'genre\');
// Step 4: 渲染图表
chart.render();
script>
小程序上渲染 F2
为了使用方便,分别对支付宝小程序和微信小程序分装了自定义组件,官网上的demo都是可以在小程序中运行。
- 聊一聊 F2 与小程序
https://www.yuque.com/antv/blog/bg9sxf
- F2 的微信小程序版本
https://github.com/antvis/wx-f2
- F2 的支付宝小程序版本
https://github.com/antvis/my-f2
丰富齐全的官方文档及API使用。
覆盖蚂蚁会员、支付宝月账单、个人总资产等业务场景。
广泛应用于基金、定期、黄金、股票等各个金融业务场景中,支撑着蚂蚁财富 app 上众多可视化场景。
so good,真的是非常强的一款多功能移动端图表解决方案,大家不要错过!
最后附上文档及项目地址
# 文档地址
https://f2.antv.vision/
# 图表演示
https://github.com/antvis/f2
# 仓库地址
https://github.com/antvis/f2
ok,就分享到这里。如果小伙伴们有其它好的移动端图表插件,欢迎一起学习交流。
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/11377.html