导读

F2 是一个专注于移动，开箱即用的可视化解决方案，这次我们带来了F2 的v3.5版本，这个版本对不同端的适应能力做了更进一步的加强与升级，核心库即使在完全脱离浏览器环境后也能完美运行，真实实现一套代码全端运行的能力，在未来，我们还会提供在native上使用F2的能力，甚至是各种iot设备
另外除了多端适应能力的加强外，我们还在F2中新增了漏斗图和金字塔图，进一步扩充F2的图形种类

移动『端』的差异性

今天，我们在进行移动端的开发时，需要面临各种各样的移动端环境，包括传统的webview、各种小程序、node canvas，以及在native上绘制，当然未来可能还有更多，但是我们都需要对不同端有相应的适配才能比较好的运行，这就无法很好满足我们想要实现一套代码全端运行的愿景，所以在v3.5里，我们对多端的适配做了更进一步的统一，实现绘制代码的完全统一

下面以支付宝和微信小程序为例，演示下如果在小程序中使用F2

如何在小程序中使用

针对支付宝小程序，和微信小程序我们统一了这2者的使用方式，让他们看起来更简单和统一

支付宝小程序

1. 安装依赖
  1. npm install @antv/my-f2 --save

2. 使用组件
  1. {
  2.   "usingComponents": {
  3.     "f2": "@antv/my-f2"
  4.   }
  5. }
  1. <view class="container">
  2.   <f2 onInit="onInitChart"></f2>
  3. </view>
  1. Page({
  2.   data: {},
  3.   onInitChart(F2, config) {
  4.     const chart = new F2.Chart(config);
  5.     const data = [
  6.       { value: 63.4, city: 'New York', date: '2011-10-01' },
  7.       { value: 62.7, city: 'Alaska', date: '2011-10-01' },
  8.       { value: 72.2, city: 'Austin', date: '2011-10-01' },
  9.       { value: 58, city: 'New York', date: '2011-10-02' },
  10.       { value: 59.9, city: 'Alaska', date: '2011-10-02' },
  11.       { value: 67.7, city: 'Austin', date: '2011-10-02' },
  12.       { value: 53.3, city: 'New York', date: '2011-10-03' },
  13.       { value: 59.1, city: 'Alaska', date: '2011-10-03' },
  14.       { value: 69.4, city: 'Austin', date: '2011-10-03' },
  15.     ];
  16.     chart.source(data, {
  17.       date: {
  18.         range: [0, 1],
  19.         type: 'timeCat',
  20.         mask: 'MM-DD'
  21.       },
  22.       value: {
  23.         max: 300,
  24.         tickCount: 4
  25.       }
  26.     });
  27.     chart.area().position('date*value').color('city').adjust('stack');
  28.     chart.line().position('date*value').color('city').adjust('stack');
  29.     chart.render();
  30.     // 注意：需要把chart return 出来
  31.     return chart;
  32.   }
  33. });

微信小程序

1. 安装依赖
  1. npm install @antv/wx-f2 --save

2. 使用组件
  1. {
  2.   "usingComponents": {
  3.     "f2": "@antv/wx-f2"
  4.   }
  5. }
  1. <view class="container">
  2.   <f2 onInit="{{onInitChart}}" />
  3. </view>
  1. Page({
  2.   data: {
  3.     onInitChart(F2, config) {
  4.       const chart = new F2.Chart(config);
  5.       const data = [
  6.         { value: 63.4, city: 'New York', date: '2011-10-01' },
  7.         { value: 62.7, city: 'Alaska', date: '2011-10-01' },
  8.         { value: 72.2, city: 'Austin', date: '2011-10-01' },
  9.         { value: 58, city: 'New York', date: '2011-10-02' },
  10.         { value: 59.9, city: 'Alaska', date: '2011-10-02' },
  11.         { value: 67.7, city: 'Austin', date: '2011-10-02' },
  12.         { value: 53.3, city: 'New York', date: '2011-10-03' },
  13.         { value: 59.1, city: 'Alaska', date: '2011-10-03' },
  14.         { value: 69.4, city: 'Austin', date: '2011-10-03' },
  15.       ];
  16.       chart.source(data, {
  17.         date: {
  18.           range: [0, 1],
  19.           type: 'timeCat',
  20.           mask: 'MM-DD'
  21.         },
  22.         value: {
  23.           max: 300,
  24.           tickCount: 4
  25.         }
  26.       });
  27.       chart.area().position('date*value').color('city').adjust('stack');
  28.       chart.line().position('date*value').color('city').adjust('stack');
  29.       chart.render();
  30.             // 注意：需要把chart return 出来
  31.       return chart;
  32.     }
  33.   },
  34. });

小结

支付宝小程序和微信小程序除了本身框架的差异外，在使用F2上几乎是一模一样的，更多细节可以参考git仓库

node canvas

在之前的版本上，由于node端不支持事件，所以在node端只能进行图表的纯绘制，在3.5版本中，只要能构造基础的事情对象，也能让图表响应图表的变化
下面demo这个就是完全用node canvas绘制，并以图片形式显示展示，且能响应交互的变化
example.gif

具体实现可参考 https://github.com/zengyue/node-f2

漏斗图 & 金字塔图

除了上面的端的适应性外，3.5里还带了全新的图表，漏斗图和金字塔图

image.png image.png

更多使用方式可参考 https://f2.antv.vision/zh/examples/funnel/basic

其他更多请参考官网

链接