在vue中使用G2图表的示例代码


Posted in Javascript onMarch 19, 2019

G2笔记

G2是蚂蚁金服的一套开源图表插件,因项目需要研究了一下,相比Echarts来说,G2文档比较难懂,网上也没有太多示例,所以在这里记录一些使用G2遇到的问题。

官方推荐在vue项目中使用Viser,它对G2进行了封装,使用起来可能更方便,又研究了一个Viser,结果Viser整个只对viser-react如何使用进行了介绍,对viser-vue一笔带过,官网是这么介绍的:

我们以 viser-react 举例写一个 chore 图为例,viser-vue 和 viser-ng 的用法类似。

结果用的时候发现这区别也太大了 : ( ,去github上找issue,还算有些收获,但如何定制一个符合产品需求的图形还是不知道啊,只能开啃文档,把G2和Viser的文档比对来比对去,最后得出一个结论:

直接在vue中用G2比使用viser-vue更方便(因为viser-vue一点文档没有啊!)

如果不懂G2的话,viser-vue是玩不转的,所以还是先讲G2。

1. 在vue中直接使用G2

安装

npm install @antv/g2
npm install @antv/data-set

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

文件中引用

import G2 from '@antv/g2'
import { View } from '@antv/data-set'

创建图表

先创建一个图表容器

<div id="funnelNode" ></div>

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

  • 漏斗图分基础漏斗图(底部是方形)和尖底漏斗图,两者使用时的区别是实例化图表时几何标记对象Geom的shape()方法,shape('funnel') 表示基础漏斗,shape('pyramid') 表示尖底漏斗。(https://www.yuque.com/antv/g2-docs/api-geom)
  • 关于图表的事件处理(https://www.yuque.com/antv/g2-docs/tutorial-chart-event),官方文档中有详细介绍,这里只介绍漏斗图点击事件绑定方法,如下:
chart.on('interval:click', ev => {
  //这里写自定义事件
 })

此处使用interval:click是因为漏斗图对应的geom类型是 interval (https://www.yuque.com/antv/g2-docs/tutorial-geom)。

2. 在vue中使用viser-vue:

安装

npm install viser-vue
npm install @antv/data-set

main.js中全局引用

import Viser from 'viser-vue'
Vue.use(Viser)

绘制图表(以漏斗图为例)

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

替换前:

<v-pyramid
  :position="funnelOpts.position"
  :color="funnelOpts.color"
  ...
 />

替换后:

<v-funnel
  :position="funnelOpts.position"
  :color="funnelOpts.color"
  ...
 />

如果需要加点击事件,在<v-funnel>标签里使用:on-click绑定事件。

我的github项目地址:https://github.com/Inspiration1/asteroid,里面有详细的例子。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 #Javascript
vue+iview动态渲染表格详解
Mar 19 #Javascript
浅谈vue加载优化策略
Mar 19 #Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 #Javascript
详解js加减乘除精确计算
Mar 19 #Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 #Javascript
You might like
php smarty的预保留变量总结
2008/12/04 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python简易版停车管理系统
2019/08/12 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
string = null 和string = ''的区别
2013/04/28 面试题
车工岗位职责
2013/11/26 职场文书
人力资源专业推荐信
2013/11/29 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
校运会通讯稿
2015/07/18 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
村主任当选感言
2015/08/01 职场文书
清明节随笔
2015/08/15 职场文书
七年级思品教学反思
2016/02/20 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers