博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5移动端vue项目中使用 Antv F2数据分析可视化图表
阅读量:6776 次
发布时间:2019-06-26

本文共 757 字,大约阅读时间需要 2 分钟。

项目需要求在移动端H5需要展示一些数据统计的图表,虽然第一时间想到的是echarts,常用还有,等,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项目中就可以了,根据需求作相应的更改。

至此就可以看到效果了,是不是很简单大厂的东西就是香,真正做到了开箱即用!

三,效果展示

转载于:https://juejin.im/post/5c9b1cea5188251df34055cf

你可能感兴趣的文章
分布式、微服务、云架构、dubbo+zookeeper+springmvc+mybatis+shiro+redis
查看>>
常用的es6
查看>>
java B2B2C Springcloud电子商城系统-搭建一个简单的Eureka程序
查看>>
李国庆与当当,一个中国网络书店的传奇
查看>>
一文读懂华为、小米、OV成为国产四强背后的秘诀?
查看>>
答联发科之问:决定消费者体验的,不是芯片性能,而是芯片功能
查看>>
2019前端面试题汇总(主要为Vue)
查看>>
Express中间件body-parser简单实现
查看>>
谈谈分享邀请奖励机制(附iOS实现代码)
查看>>
拆轮子系列--RxJava理解(二)--subscribeOn
查看>>
1:AOP、hugo日志库、Android Profiler、Fragment#onActivityResult调用原理、BlockCanary检测UI卡顿...
查看>>
混合 APP 开发(Hybrid App)
查看>>
SpringMVC---IDEA 搭建SpringMVC工程
查看>>
2019年初考核题
查看>>
程序员确实更容易秃....
查看>>
基于MBProgressHUD仿写的Swift版加载控件NGProgressHUD
查看>>
Spring Cloud Alibaba基础教程:Nacos的集群部署
查看>>
解决由于export,import错误导致的元素类型无效【Element type is invalid】
查看>>
大数据构建模块:选择体系结构和开源框架
查看>>
Angular 响应式表单之表单分组
查看>>