使用antv替代Echarts实现数据可视化图表详解_vue.js_

前言

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

周一，还在愉快的为移动端框架添砖加瓦中，主管就过来询问我，能腾出一周时间做些其他事情吗，我有些诧异，这种语气。问了需要做什么吗，原来是业务部门有个大数据图表没有多余的人做，需要我去支援一波，虽然有点拒绝，但主管发话了，只能安排。

之前做可视化图表都是用echarts，原因是第一次用的是它，后来就习惯了，基本上都能满足自己的业务需求，对于文档也比较熟悉，用的人也多，遇到问题就能快速的查到解决方案。有点不幸的是，这次客户指名道姓只能采用阿里的antv，那我也就没有第二个选择了。

对于antv没有太多的接触，在它刚开源的时候，有去观摩一下，很炫酷，相比于echarts更加好看，不过那时文档没那么全，示例也不是特别多，时至今日再去看，已经很全面了，有多个不同场景系列，常用图表的G2，数据关联图的G6，移动端可视化的F2，以及专注于地图的L7，当然还有对于之前这些基础图表做进一层封装的plot系类，比如@antv/g2plot、@antv/l7plot。

这次的开发关于PC的，所以主要会涉及到G2，L7。在开发过程中的感受，使用起来挺简单的，但是有些属性设置文档没有，需要从例子中去查找，然后网上关于它使用的文章也比较少，没有echarts那么多，可能需要自己会时间去文档和示例中自己找寻答案。

面积图

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

常用参数文档

图表

度量 scale

提示 tooltip

坐标系 axis

chart.line(options)

用于绘制折线图、曲线图、阶梯线图等。

chart.area(options)

用于绘制区域图（面积图）、层叠区域图、区间区域图等。

geom.position()

配置 position 通道映射规则

示例：

// 数据结构: [{ x: 'A', y: 10, color: 'red' }] geom.position('x*y'); 

geom.color()

配置图表颜色

// 基础颜色设置 geom.color('#1890ff'); // 渐变 geom.color("l(90) 0:#0b83de 1:#0c1c2d") 

geom.shape()

图形相关设置，文档上的说明不是很全，可以从图表示例获取相应信息

柱状图

柱状图在日常数据分析中正常都会使用，也比较直观，这边我列了使用到的一些属性，其他的跟上面的常用参数文档是一致

数据标签 label

chart.coordinate()

图表坐标系设置

chart.interval(options)

用于绘制柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等。

地图

antv文档对于地图的描述不是特别全，比如地图等级viewLevel、地图边界设置、地图颜色配置，这些都要结合实例慢慢摸索，我实现了比较常用的中国地图，包含toolTip，以及省的散点图，只要修改地图等级viewLevel，配合相应数据就能实现不同省市的散点图了，大家可以举一反三。

我这边是采用@antv/l7plot，内部就分装了地图相关绘制，如果采用是@antv/l7，它主要是根据请求地图路径坐标数据请求绘制，数据也挺庞大的，会比较麻烦一些。

这边就不放图了，可以在Github运行查看

地图容器配置项 map

地图等级 viewLevel