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安装；

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

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标签即可

 <div class="chart-wrapper">
  <canvas ></canvas>
 </div>

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

　//模拟数据，也可以根据ajax进行请求后台数据 
var data = [{
  const: 'const',
  type: '交通出行',
  money: 51.39
 }, {
  const: 'const',
  type: '饮食',
  money: 356.68
 }, {
  const: 'const',
  type: '生活日用',
  money: 20.00
 }, {
  const: 'const',
  type: '住房缴费',
  money: 116.53
 }];
　　//配置视图id与上面html对应
 var chart = new F2.Chart({
  id: 'mountNode',
  pixelRatio: window.devicePixelRatio
 });
　　//定义渲染数据源
 chart.source(data);
　　//定义图表类型样式，其中radius和innerRadius可以更改环形的大小
 chart.coord('polar', {
  transposed: true,
  radius: 0.9,
  innerRadius: 0.5
 });
 chart.axis(false);
　//图表图例
 chart.legend(false);
　// 图表提示信息
 chart.tooltip(false);
　//这里可以配置更改环形中心文字
 chart.guide().html({
  position: ['50%', '50%'],
  html: '<div >\n   <p  ></p>\n   <p  ></p>\n   </div>'
 });
　// 配置图表颜色样式和定位
 chart.interval().position('const*money').adjust('stack').color('type', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14']);
　　//配置一些基本的文本信息及样式
 chart.pieLabel({
  sidePadding: 30,
  activeShape: true,
  label1: function label1(data) {
   return {
    text: '￥' + data.money,
    fill: '#343434',
    fontWeight: 'bold'
   };
  },
  label2: function label2(data) {
   return {
    text: data.type,
    fill: '#999'
   };
  },
　　//点击事件
  onClick: function onClick(ev) {
   var data = ev.data;
   if (data) {
    $('#title').text(data.type);
    $('#money').text(data.money);
   }
  }
 });
　// 最后渲染即可
 chart.render();