AntV-F2–超强大F2移动端可视化图表方案

Vedu • 2020-09-14 11:01 • 资源分享 • 阅读 4016

今天给大家分享一款超优秀的移动端可视化方案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在不同环境下功能对比

聊一聊 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

AntV-F2–超强大F2移动端可视化图表方案

功能特性

安装

引入插件

使用插件

小程序上渲染 F2

相关推荐

发表评论