vue项目中怎么不用Echarts实现数据可视化图表？下面本篇文章给大家介绍一下vue项目中，采用antv实现数据可视化图表的方法，希望对大家有所帮助！
前端（vue）入门到精通课程：进入学习
技术永无止尽，多看看不同风景
还在愉快的为移动端框架添砖加瓦中，主管就过来询问我，能腾出一周时间做些其他事情吗，我有些诧异，这种语气。问了需要做什么吗，原来是业务部门有个大数据图表没有多余的人做，需要我去支援一波，虽然有点拒绝，但主管发话了，只能安排。之前做可视化图表都是用echarts，原因是第一次用的是它，后来就习惯了，基本上都能满足自己的业务需求，对于文档也比较熟悉，用的人也多，遇到问题就能快速的查到解决方案。有点不幸的是，这次客户指名道姓只能采用阿里的antv，那我也就没有第二个选择了。【相关推荐：vuejs视频教程】
对于antv没有太多的接触，在它刚开源的时候，有去观摩一下，很炫酷，相比于echarts更加好看，不过那时文档没那么全，示例也不是特别多，时至今日再去看，已经很全面了，有多个不同场景系列，常用图表的G2，数据关联图的G6，移动端可视化的F2，以及专注于地图的L7，当然还有对于之前这些基础图表做进一层封装的plot系类，比如@antv/g2plot、@antv/l7plot。这次的开发关于PC的，所以主要会涉及到G2，L7。在开发过程中的感受，使用起来挺简单的，但是有些属性设置文档没有，需要从例子中去查找，然后网上关于它使用的文章也比较少，没有echarts那么多，可能需要自己会时间去文档和示例中自己找寻答案。
面积图
折线图是经常使用并且比较容易的一种图形，G2 中并没有特定的图表类型（柱状图、散点图、折线图等）的概念，用户可以单独绘制某一种类型的图表，如饼图，也可以绘制混合图表，比如折线图和柱状图的组合，折线图和面积图混合就可以实现如图效果；
常用参数文档
图表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| container | 指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例 | string | HTMLElement | - |
| autoFit | 图表是否自适应容器宽高， 如果用户设置了 height，那么会以用户设置的 height 为准 | boolean | false |
| width | 图表宽度 | number | - |
| height | 图表高度 | number | - |
| padding | 图表内边距 | 'auto'|number |number[] | 'auto' |
度量 scale
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| min | 设置对应坐标系的最小值 | any | - |
| max | 设置对应坐标系的最小值 | any | - |
| range | 坐标系的绘制范围，一般不用修改 | [number,number] | [0, 1] |
| alias | 数据字段的显示别名，一般用于字段对应中文名称设置 | string | - |
| nice | 自动调整 min、max | boolean | false |
提示 tooltip
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| showTitle | 是否展示 tooltip 标题 | boolean | false |
| shared | true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容 | boolean | false |
| showCrosshairs | 是否显示 tooltips 辅助线。 | boolean | false |
坐标系 axis
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| line | 坐标轴线的配置项，null 表示不展示 | null | object | - |
| tickLine | 坐标轴刻度线线的配置项，null 表示不展示 | null | object | - |
| grid | 坐标轴网格线的配置项，null 表示不展示 | null | object | - |
