网站建设788gg/买号链接

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

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

Antv F2官方比较友好，给我们提供了两种方式方便我们使用，分别是CDN方式(引入在线资源)和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，

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