H5移动端vue项目中使用 Antv F2数据分析可视化图表

项目须要求在移动端H5须要展现一些数据统计的图表，虽然第一时间想到的是echarts，经常使用还有Highcharts，D3等，antv家族的图表UI好看一些，再加上F2是移动端可视化方案因而就选择F2，打开官网果真眼前一亮F2提供的正能知足需求，F2官网地址：https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html

初次使用记录一下掘坑之路：

一，快速上手（此处参考官方api文档就能够完成https://www.yuque.com/antv/f2/getting-started）

1.习惯在vue里面使用cnpm安装，执行 cnpm install @antv/f2 --save

2.安装完成以后就是使用了，根据api提供的引用方式在vue里面是玩不转的，涉及到图表交互的须要点击的图表会报js错误（ 'interaction' is not a function），固然也不是没有解决的办法的，看过源码会发现能够修改引用路径解决：

const F2 = require('@antv/f2/lib/index')复制代码

二，开始使用

使用也特别的简单，官方api给到的很是的详细，首先须要建立 <canvas> 标签，咱们就能够进行简单的图表绘制:

1. 建立 Chart 图表对象，指定图表 ID、指定图表的宽高、边距等信息；

2. 载入图表数据源；

3. 使用图形语法进行图表的绘制；

4. 渲染图表。

在官方demo中选择相应本身想要的图表能够查看到代码，应用到vue项目中就能够了，根据需求做相应的更改。

至此就能够看到效果了，是否是很简单大厂的东西就是香，真正作到了开箱即用！

三，效果展现