如何在vue中使用G2图表

　　介绍

这期内容当中小编将会给大家带来有关如何在vue中使用G2图表,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强> 1。在vue中直接使用G2

<强>安装

npm  install  @antv/G2 　　npm  install  @antv/气候资料数据集

必不可少,它是G2的数据处理模块。

<强>文件中引用

import  G2 得到& # 39;@antv/G2 # 39; 　　import  {, View },得到& # 39;@antv/先于# 39;

<强>创建图表

先创建一个图表容器

& lt; div  id=癴unnelNode",祝辞& lt;/div>

之后实例化图表对象,参考官网示例代码,这里主要记录如何修改一些配置属性来定制符合需求的图形。

<李>

漏斗图分基础漏斗图(底部是方形)和尖底漏斗图,两者使用时的区别是实例化图表时几何标记对象几何学的形状()方法,形状(& # 39;漏斗# 39;)表示基础漏斗,形状(& # 39;金字塔# 39;)表示尖底漏斗。(https://www.yuque.com/antv/g2-docs/api-geom)

<李>

关于图表的事件处理(https://www.yuque.com/antv/g2-docs/tutorial-chart-event),官方文档中有详细介绍,这里只介绍漏斗图点击事件绑定方法,如下:

, chart.on(& # 39;间隔:点击# 39;,,ev =祝辞,{//这才能里写自定义事件 　　之前,})

此处使用间隔:点击是因为漏斗图对应的几何学类型是间隔(https://www.yuque.com/antv/g2-docs/tutorial-geom)。

<强> 2。在vue中使用viser-vue:

安装

npm  install  viser-vue 　　npm  install  @antv/先于

主要。js中全局引用

import  Viser 得到& # 39;viser-vue& # 39; 　　Vue.use(遮光板)

<强>绘制图表(以漏斗图为例)

遮光板官网给了基础漏斗图(其实是尖底漏斗图)的例子,首先就是要把它改造成真的基础漏斗图(漏斗底部是方形),将示例代码中的& lt; v-pyramid>标签替换成& lt; v-funnel>标签,因为在G2中“漏斗”代表基础漏斗,“金字塔”代表尖底漏斗,遮光板封装时也是基于此。

替换前:

, & lt; v-pyramid 　　,,:位置=癴unnelOpts.position" 　　,,:颜色=癴unnelOpts.color" 　　,,… 　　,/在

替换后:

, & lt; v-funnel 　　,,:位置=癴unnelOpts.position" 　　,,:颜色=癴unnelOpts.color" 　　,,… 　　,/在

上述就是小编为大家分享的如何在vue中使用G2图表了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。

如何在vue中使用G2图表