vue+antv如何实现数据可视化图表

这篇文章主要介绍了vue+antv如何实现数据可视化图表的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+antv如何实现数据可视化图表文章都会有所收获，下面我们一起来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到老河口网站设计与老河口网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、申请域名、网络空间、企业邮箱。业务覆盖老河口地区。

面积图
折线图是经常使用并且比较容易的一种图形，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	-

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()

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

属性	说明
smooth	用于折线图平滑设置

柱状图

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

vue+antv如何实现数据可视化图表

数据标签 label

属性	说明	类型	默认值
offset	相对数据点的偏移距离	number	-
offsetX	相对于数据点在 X 方向的偏移距离	number	-
offsetY	相对于数据点在 Y 方向的偏移距离	number	-
style	文本图形属性样式，设置颜色需要用 fill	number	-

chart.coordinate()

图表坐标系设置

属性	说明	类型	默认值
rotate	配置旋转度数，使用弧度制	number	-
reflect	沿 x 方向镜像或者沿 y 轴方向映射	x \| y	-
scale	沿着 x 和 y 方向的缩放比率	number, number	-
transpose	x，y 轴置换，常用于条形图和柱状图之间的转换	-	-

chart.interval(options)

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

地图

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

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

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

地图容器配置项 map

属性	说明	类型	默认值
type	地图底图类型，amap: 高德地图，mapbox: Mapbox 地图	string	amap
center	初始中心经纬度	number[]	[0, 0]
pitch	初始倾角	number	0
zoom	初始缩放层级	number	0
style	内置样式: dark: 黑暗，light: 明亮，normal: 普通，blank: 无底图	string	dark
logo	是否显示 logo	boolean	true

地图等级 viewLevel

属性	说明
level	层级国家；"country"、省份："province"、市："city"、县："district"
adcode	层级编码中国；100000、浙江省："330000"、杭州市："330100"、西湖区："330106"




#container {
  width: 100%;
  height: 300px;
}

关于“vue+antv如何实现数据可视化图表”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue+antv如何实现数据可视化图表”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

网页标题：vue+antv如何实现数据可视化图表
网站链接：http://myzitong.com/article/jpdcss.html

vue+antv如何实现数据可视化图表

常用参数文档

图表

度量 scale

提示 tooltip

坐标系 axis

chart.line(options)

chart.area(options)

geom.position()

geom.color()

geom.shape()

柱状图

数据标签 label

chart.coordinate()

chart.interval(options)

地图

地图容器配置项 map

地图等级 viewLevel

其他资讯