我的项目需要求在挪动端 H5 须要展现一些数据统计的图表,尽管第一工夫想到的是 echarts,常
用还有 Highcharts,D3 等,antv 家族的图表 UI 难看一些,再加上 F2 是挪动端可视化计划于是
就抉择 F2,关上官网果然眼前一亮 F2 提供的正能满足需要,F2 官网地址:
https://antv.alipay.com/zh-cn… 首次应用记录一下掘坑之路:
一,疾速上手(此处参考官网 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> 标签,咱们就能够进行简略的图表绘制: 创立
Chart 图表对象,指定图表 ID、指定图表的宽高、边距等信息;载入图表数据源;应用图
形语法进行图表的绘制;渲染图表。在官网 demo 中抉择相应本人想要的图表能够查看到代
码,利用到 vue 我的项目中就能够了,依据需要作相应的更改。
至此就能够看到成果了,是不是很简略大厂的货色就是香,真正做到了开箱即用