AntV F2是蚂蚁金服旗下一款移动化、开箱即用的可视化解决方案，完美支持H5环境，兼容多种环境(Node、Small Program、Weex)，拥有完整的图语法理论，满足您的各种可视化需求。专业的移动设计指南为您带来最佳的移动图形体验。

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

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

Antv F2官方友好，为我们提供了两种方便使用的方式，分别是CDN(介绍在线资源脚本src=' http :3359 GW . alipayobjects.com/OS/Antv/assets/F2/3 . 3 . 8/F2 . min . js '/脚本)和npm安装，因为项目是vue。

安装命令(必须在对应于项目的文件夹路径下运行):

npminstall @ antv/F2-保存安装依赖项后，需要引用到项目中。这里有个坑。官方提供的参考方法将报告vue中的错误。官方提供的方法如下

如果在项目中引用了来自“@antv/f2”的import F2，会报告语法错误，错误信息为“chart.pieLabel不是函数”，建议将安装方法修改为

从“@ antv/F2/lib/index-all”导入F2，这样引用就可以正常使用，不会报错，可以使用父测试；

安装依赖和引用文件资源后，可以直接配置和开发图表；我在项目中使用了环图，直接去环图Demo案例界面看Demo。

https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html#_饼图，

当您第一次使用它时，视图层非常简单，一个大的div可以包装画布标签

div class=' chart-wrapper ' canvas ID=' mount node '/canvas/div然后就是数据逻辑层。据文件介绍：

//模拟数据，或者根据ajax请求后台数据。vardata=[{const :' const '，type : ' transportation and travel '，money: 51.39}，{const :' const '，type : '饮食'，Money : 356.68}，{const :' const '，type : '日常生活'，Money 3360 20.00}，{Const :' Const '，Type 333366//配置视图id对应于上面的html，var chart=new F2 . chart({ id : ' mount node '，pixel ratio: window。devicepixel ratio })；//定义渲染数据源chart . source(data)；//定义图表类型样式，其中半径和内半径可以改变圆环大小chart.coord ('polar '，{转置： true，半径： 0.9，内半径： 0.5 })；chart.axis(假)；//图表图例chart . legend(false)；//图表提示信息chart . tooltip(false)；//您可以在这里配置和更改环形中心文本图表。指南()。html ({position: ['50% '，' 50%']，html : ' div style=' text-align : center；宽度width:150px高度： 50px； n p style=' font-size : 12px；color: # 999margin : 0 ' id=' title '/p n p style=' font-size : 18px；color: # 343434margin : 0；font-weight:粗体；id=' money '/p n/div ' })；//配置图表颜色样式和位置图表。间隔()。持仓(' const * money ')。调整('堆栈')。color ('type '，['# 1890ff '，' # 13c2c2 '，' # 2fc25b '，' # facc 14 ']//配置一些基本的文本信息和样式chart . pie label({ side padding : 30，activeshape 3360 true，label 1: function label 1(data){ return { text : 'data . money，fill3360' # 343434 '，fontweight : '。}，label2:函数label2(数据){ return { text: data.type，fill : ' # 999 ' }；}，//点击事件onclick :函数onclick(ev){ var data=ev . data；if (data) { $('#title ')。文本(data . type)；$('#money ')。文本(data . money)；} } });//最后一次渲染是chart . render()；可以这样配置，但是有一个问题就是不能直接在vue里面写，所以需要在一个方法里面定义这些代码，放在methods对象里面，然后挂载的时候执行。渲染如下：

这里有一个漏洞，那就是我们在使用AntV F2的时候，不能像以前一样直接放入挂载函数，否则会造成图表出现空白，可以通过刷新来摆脱这个bug。这个问题的原因昨天下午想了很久也没有解决。早上来公司的时候，突然意识到这个bug的原因其实很简单。就是因为Ant F2是用jquery模式写的，还有一个操作DOM。如果我们直接在挂载上执行方法，会带来一个问题，js已经执行了，但是DOM元素还没有渲染，图表没有数据，所以是空白的。此外，装载的方法将在加载和重新进入后存储在缓存中，因此将被刷新。我这里的解决方案是直接设置一个timer setTimeout，直接延迟执行模式1秒左右就可以解决；

然后简单介绍一下折线图的用途：

HTML视图层代码：

div class=' chart-wrapper ' canvas id=' mount node '/canvas/div js数据逻辑层代码：

//模拟数据var data=[{ day: '星期一'，value: 300 }，{ day: '星期二'，value: 400 }，{day: '星期三'，value3360 350}，{day: '星期四'，Value: 500 }，{day: '星期五'，value: 490 }，{ day 3: '星期六'，value 3://对应上面的视图层，var chart=new F2 . chart({ id : ' mount node '，pixel ratio 3360 window。devicepixel ratio })；//配置数据源chart.source(data，{，//value和day都是根据模拟数据的属性配置的，所以这里的value和day是可以更改的，具体是根据后台数据属性，value: {tick count: 5，min3360 0 0}，day: {range: [0，1]})//配置文本提示信息和触发方法chart . tooltip({ showcross 3360 true，showitemmarker: false，on项目[0]。name=null项目[0]。value='$ '项[0]。价值；} });//配置相应的方法chart.axis ('day '，{label: function label (text，index，total){ var text CFG={ }；if(index===0){ text CFG . text align=' left '；} else if(index===total-1){ text CFG . text align=' right '；}返回textCfg} });//配置并定位chart.line()。位置('日*值')；//配置图表样式图表。点()。位置('日*值')。样式({stroke:' # fff '，line width : 1 })；//呈现chart . render()；配置完成后，可以看到效果，渲染如下：

最后，让我们总结一下：

(1)首先，我们在工作中肯定会遇到各种各样的问题或bug。一定要理性分析解决，不能陷入误区。如果我们多次尝试都无法解决，很有可能是你进入了误区。这个时候，我们需要静下心来分析思考。我遇到的就是一个典型的案例；

(2)使用此可视化图表时，有些功能不可用，例如，单击环形图显示图例。这是因为AntV F2是用jquey实现的，如果没有在您的项目中引入它，它将报告一个错误(" $未定义")。如果真的需要使用，可以引入jquery。

(3)正是因为AntV F2是jquery开发的，需要操作DOM树，所以有时候js已经执行了，但是DOM元素还没有渲染。这个时候，我们要想另一种思路，比如setTimeout，来解决。考虑到问题要多元化、综合性，方法总是比较难。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。