聊聊vue+antv怎么实现数据可视化图表

vue项目中怎么不用Echarts实现数据可视化图表?下面本篇文章给大家介绍一下vue项目中,采用antv实现数据可视化图表的方法,希望对大家有所帮助!

聊聊vue+antv怎么实现数据可视化图表

前端(vue)入门到精通课程:进入学习

技术永无止尽,多看看不同风景

还在愉快的为移动端框架添砖加瓦中,主管就过来询问我,能腾出一周时间做些其他事情吗,我有些诧异,这种语气。问了需要做什么吗,原来是业务部门有个大数据图表没有多余的人做,需要我去支援一波,虽然有点拒绝,但主管发话了,只能安排。之前做可视化图表都是用echarts,原因是第一次用的是它,后来就习惯了,基本上都能满足自己的业务需求,对于文档也比较熟悉,用的人也多,遇到问题就能快速的查到解决方案。有点不幸的是,这次客户指名道姓只能采用阿里的antv,那我也就没有第二个选择了。【相关推荐:vuejs视频教程】

对于antv没有太多的接触,在它刚开源的时候,有去观摩一下,很炫酷,相比于echarts更加好看,不过那时文档没那么全,示例也不是特别多,时至今日再去看,已经很全面了,有多个不同场景系列,常用图表的G2,数据关联图的G6,移动端可视化的F2,以及专注于地图的L7,当然还有对于之前这些基础图表做进一层封装的plot系类,比如@antv/g2plot@antv/l7plot。这次的开发关于PC的,所以主要会涉及到G2L7。在开发过程中的感受,使用起来挺简单的,但是有些属性设置文档没有,需要从例子中去查找,然后网上关于它使用的文章也比较少,没有echarts那么多,可能需要自己会时间去文档和示例中自己找寻答案。

面积图

折线图是经常使用并且比较容易的一种图形,G2 中并没有特定的图表类型(柱状图、散点图、折线图等)的概念,用户可以单独绘制某一种类型的图表,如饼图,也可以绘制混合图表,比如折线图和柱状图的组合,折线图和面积图混合就可以实现如图效果;

聊聊vue+antv怎么实现数据可视化图表

常用参数文档

图表

属性说明类型默认值
container指定 chart 绘制的 DOM,可以传入 DOM id,也可以直接传入 dom 实例string | HTMLElement-
autoFit图表是否自适应容器宽高, 如果用户设置了 height,那么会以用户设置的 height 为准booleanfalse
width图表宽度number-
height图表高度number-
padding图表内边距'auto'|number |number[]'auto'

度量 scale

属性说明类型默认值
min设置对应坐标系的最小值any-
max设置对应坐标系的最小值any-
range坐标系的绘制范围,一般不用修改[number,number][0, 1]
alias数据字段的显示别名,一般用于字段对应中文名称设置string-
nice自动调整 min、maxbooleanfalse

提示 tooltip

属性说明类型默认值
showTitle是否展示 tooltip 标题booleanfalse
sharedtrue 表示合并当前点对应的所有数据并展示,false 表示只展示离当前点最逼近的数据内容booleanfalse
showCrosshairs是否显示 tooltips 辅助线。booleanfalse

坐标系 axis

属性说明类型默认值
line坐标轴线的配置项,null 表示不展示null | object-
tickLine坐标轴刻度线线的配置项,null 表示不展示null | object-
grid坐标轴网格线的配置项,null 表示不展示null | object-

chart.line(options)

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: