在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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jquery tools之tooltip
Jul 25 Javascript
input的focus方法使用
Mar 13 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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生成随机数或者字符串的代码
2008/09/05 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
php批量删除操作代码分享
2017/02/26 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Django添加feeds功能的示例
2018/08/07 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
产品质量承诺范本
2014/03/31 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
导游词之日月潭
2019/11/05 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Django实现翻页的示例代码
2021/05/24 Python