AntV F2是蚂蚁金服旗下的一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。

　　AntV F2官方文档地址：https://antv.alipay.com/zh-cn/f2/3.x/

　　话不多说，直接进入正题：

　　Antv F2官方比较友好，给我们提供了两种方式方便我们使用，分别是CDN方式（引入在线资源 <script src=“https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js”></script>）和npm安装方式，因为项目是vue-cli搭建的，同时CDN方式引入比较简单，引入文件即可使用，所以在项目中使用的是npm安装；

　　安装命令（必须在项目对应的文件夹路径下运行）：

  1. 　　npm install @antv/f2 --save

 

　　安装完依赖之后接着就是需要引用到项目中，这里有个坑，官方提供的引用方式在vue里面是会报错的，官方提供的方式是下图

　　

　　 如果在项目中是 import F2 from “@antv/f2” 这样引用是会报语法错误的，报错信息为：“chart.pieLabel is not a function”，所以安装方式建议修改为    

　　import F2 from “@antv/f2/lib/index-all”，这样引用是可以正常使用不报错的，亲测可用；

　　安装完依赖和引用文件资源之后，就可以直接进行图表配置和开发了；我在项目中用到了环形图，直接进入环形图Demo案例界面看看Demo，

　　https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html#_%E9%A5%BC%E5%9B%BE，

　　首先使用的时候视图层很简单，一个大div包住canvas标签即可

  1.   <div class="chart-wrapper">
  2.     <canvas id="mountNode"></canvas>
  3.   </div>

　　接着就是数据逻辑层根据文档介绍：

  1. 　//模拟数据，也可以根据ajax进行请求后台数据  
    var data = [{
  2.     const: \'const\',
  3.     type: \'交通出行\',
  4.     money: 51.39
  5.   }, {
  6.     const: \'const\',
  7.     type: \'饮食\',
  8.     money: 356.68
  9.   }, {
  10.     const: \'const\',
  11.     type: \'生活日用\',
  12.     money: 20.00
  13.   }, {
  14.     const: \'const\',
  15.     type: \'住房缴费\',
  16.     money: 116.53
  17.   }];
    　　//配置视图id与上面html对应
  18.   var chart = new F2.Chart({
  19.     id: \'mountNode\',
  20.     pixelRatio: window.devicePixelRatio
  21.   });
    　　//定义渲染数据源
  22.   chart.source(data);
    　　//定义图表类型样式，其中radius和innerRadius可以更改环形的大小
  23.   chart.coord(\'polar\', {
  24.     transposed: true,
  25.     radius: 0.9,
  26.     innerRadius: 0.5
  27.   });
  28.   chart.axis(false);
    　//图表图例
  29.   chart.legend(false);
    　// 图表提示信息
  30.   chart.tooltip(false);
    　//这里可以配置更改环形中心文字
  31.   chart.guide().html({
  32.     position: [\'50%\', \'50%\'],
  33.     html: \'<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>\'
  34.   });
    　// 配置图表颜色样式和定位
  35.   chart.interval().position(\'const*money\').adjust(\'stack\').color(\'type\', [\'#1890FF\', \'#13C2C2\', \'#2FC25B\', \'#FACC14\']);
    　　//配置一些基本的文本信息及样式
  36.   chart.pieLabel({
  37.     sidePadding: 30,
  38.     activeShape: true,
  39.     label1: function label1(data) {
  40.       return {
  41.         text: \'￥\' + data.money,
  42.         fill: \'#343434\',
  43.         fontWeight: \'bold\'
  44.       };
  45.     },
  46.     label2: function label2(data) {
  47.       return {
  48.         text: data.type,
  49.         fill: \'#999\'
  50.       };
  51.     },
    　　//点击事件
  52.     onClick: function onClick(ev) {
  53.       var data = ev.data;
  54.       if (data) {
  55.         $(\'#title\').text(data.type);
  56.         $(\'#money\').text(data.money);
  57.       }
  58.     }
  59.   });
    　// 最后渲染即可
  60.   chart.render();

　　就这样配置，就可以了，但是有个问题我们在vue中是不能直接这么写的，所以我们需要把这些代码定义在一个方法里放在methods对象里面，然后挂载时执行即可，效果图如下：

　　

　　这里有个坑，就是我们用AntV F2的时候不能跟之前的习惯一样直接放在mounted函数中执行，不然会造成图表处空白，刷新一下才能好这种bug，出现这个问题的原因昨天下午想了很久没想通没有得到解决，早上来公司的时候突然恍然大悟：造成这种bug的原因其实很简单，就是因为Ant F2是jquery方式写的，并且还有操作DOM，我们直接在mounted上直接执行方法就会带来一个问题就是js已经执行了，但是DOM元素还没渲染完成，图表没有数据，所以才会空白，并且mounted方法是加载完成再次进入会存入缓存的，所以才会刷新一下才能好；我这里的解决方案是直接设置个定时器setTimeout，直接延迟1秒左右执行方式就可以解决；

 

　　再简单介绍一个折线图的使用方法：

　　HTML视图层代码：

  1.   <div class="chart-wrapper">
  2.     <canvas id="mountNode"></canvas>
  3.   </div>

　　js数据逻辑层代码：

  1.   //模拟数据
    var data = [{
  2.     day: \'周一\',
  3.     value: 300
  4.   }, {
  5.     day: \'周二\',
  6.     value: 400
  7.   }, {
  8.     day: \'周三\',
  9.     value: 350
  10.   }, {
  11.     day: \'周四\',
  12.     value: 500
  13.   }, {
  14.     day: \'周五\',
  15.     value: 490
  16.   }, {
  17.     day: \'周六\',
  18.     value: 600
  19.   }, {
  20.     day: \'周日\',
  21.     value: 900
  22.   }];
    　　// 与上面的视图层对应
  23.   var chart = new F2.Chart({
  24.     id: \'mountNode\',
  25.     pixelRatio: window.devicePixelRatio
  26.   });
  27. 　　//配置数据源
  28.   chart.source(data, {、
    　　//value和day都是根据模拟数据的属性来配置的，所以这里的value和day是可以更改的，具体根据后台数据属性来
  29.     value: {
  30.       tickCount: 5,
  31.       min: 0
  32.     },
  33.     day: {
  34.       range: [0, 1]
  35.     }
  36.   });
    　　// 配置文本提示信息以及触发的方法
  37.   chart.tooltip({
  38.     showCrosshairs: true,
  39.     showItemMarker: false,
  40.     onShow: function onShow(ev) {
  41.       var items = ev.items;
  42.       items[0].name = null;
  43.       items[0].value = \'$ \' + items[0].value;
  44.     }
  45.   });
    　　//配置对应方式
  46.   chart.axis(\'day\', {
  47.     label: function label(text, index, total) {
  48.       var textCfg = {};
  49.       if (index === 0) {
  50.         textCfg.textAlign = \'left\';
  51.       } else if (index === total - 1) {
  52.         textCfg.textAlign = \'right\';
  53.       }
  54.       return textCfg;
  55.     }
  56.   });
    　　// 配置定位
  57.   chart.line().position(\'day*value\');
    　　//配置图表样式
  58.   chart.point().position(\'day*value\').style({
  59.     stroke: \'#fff\',
  60.     lineWidth: 1
  61.   });
    　　//渲染
  62.   chart.render();

　　配置完之后我们就可以看到效果了，效果图如下：

　　

 

 　　最后我们来总结一下：

　　　　　　（1） 首先我们在工作中肯定会碰到各种各样的问题或者说bug，一定要理性的分析和解决，不能钻进误区不出来，如果多次尝试还是没办法解决，那很大的概率就是你自己进入了误区，这个时候就需要冷静下来分析和思考，我遇到的就是典型的案例；

　　　　　　（2）在使用这种可视化图表的时候有些部分功能是不可使用的，比如环形图的点击展示图例，这是因为AntV F2是用jquey实现的，你的项目中没有引入的话是会报错（“$ is not defined”），如果确实需要使用引入jquery即可

　　　　　　（3）正是因为AntV F2是jquery开发的，需要操作DOM树，所以有的时候会造成js已经执行了但是DOM元素还没有渲染完成的情况，这个时候我们要想到换种思路比如setTimeout即可解决，考虑问题要多元化和全面，办法总比困难多

　　

 　　　　好了，本篇关于AntV F2移动端可视化图表库的介绍和应用就到这里了，如有疑问欢迎私信沟通交流或在评论区留言一起讨论解决！ 

版权声明：本文为dengyao-blogs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dengyao-blogs/p/11429532.html