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

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对象，参考官网示例代码，这里主要记录如何修改一些配置属性来定制符合需求的图形。

 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,里面有详细的例子。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue.js 和Chart.js制作绚丽多彩的图表

    使用Vue.js 和Chart.js制作绚丽多彩的图表

    前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自定义 chart.js 选项来制作很酷的图表. ⚡ Quick Start 我们需要: Vue.js vue-chart.js vue-cli 使用 vue-cli 来搭基本架构,希望你已经安装好了.我们使用 vue-chart.js 来作为 chart.js 的打包器. vue init webp

  • 在vue中添加Echarts图表的基本使用教程

    在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • vue-cli和v-charts实现可视化图表过程解析

    vue-cli和v-charts实现可视化图表过程解析

    v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表. v-charts的中文社区文档(https://v-charts.js.org/#/),可根据项目需要自主学习和浏览: 因为项目需要

  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    数据可视化 将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等 技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图 开发 组件化 本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面

  • vue使用echarts图表的详细方法

    vue使用echarts图表的详细方法

    本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli  脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue-cli项目中使用echarts图表实例

    vue-cli项目中使用echarts图表实例

    我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D3 它

  • 在vue中使用echarts图表实例代码详解

    安装vue依赖 使用npm npm install echarts --save 使用yarn yarn add echarts 使用国内的淘宝镜像: //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //从淘宝镜像下载 cnpm install echarts -S 引入ECharts 安装好的ECharts会放在node_modules目录下. 全部引入 1.直接在项目代码引入 可以直接在项目代码中

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

    G2笔记 G2是蚂蚁金服的一套开源图表插件,因项目需要研究了一下,相比Echarts来说,G2文档比较难懂,网上也没有太多示例,所以在这里记录一些使用G2遇到的问题. 官方推荐在vue项目中使用Viser,它对G2进行了封装,使用起来可能更方便,又研究了一个Viser,结果Viser整个只对viser-react如何使用进行了介绍,对viser-vue一笔带过,官网是这么介绍的: 我们以 viser-react 举例写一个 chore 图为例,viser-vue 和 viser-ng 的用法类似

  • Vue中实现过渡动画效果示例代码

    Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • 在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表 Echart UI构建(柱状图) Echart 假数据 Echart 动态设置数据 柱状图UI示例 // Echart config,包括init data 和style及数据类型 var option = { animation: false,//提高页面加载速度,关闭echart的动画 grid: [ //grid section UI ... ], xAxis: [ //xAxis section UI ... ], yAxis: [ //yAxis sec

  • vue 中简单使用mock的示例代码详解

    vue 中简单使用mock的示例代码详解

    一.首先,在vue项目中,安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev 二.在根目录下,新建一个mock文件 三.在vue.config.js文件中使用mock数据 四.配置mock中的index.js数据 const fs = requir

  • vue中使用gojs/jointjs的示例代码

    因为公司项目需求,要画出相关业务的流程图,以便客户了解自己身处何处 搜索框输入 "前端流程图插件",查了很多资料,总结一下有以下几种 flow-chart 代码写法繁琐,不是json就可以解决,效果也比较丑,PASS darge-d3 github :https://github.com/dagrejs/dagre-d3 效果图 下载里面的demo,改一下json就可以了 // States var states = [ "NEW", "SUBMITTED

  • VUE引入使用G2图表的实现

    目录 关于G2图表介绍 使用 模板中使用完整代码(柱状图) 在补充一下世界地图 关于G2图表介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性 使用 G2,可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表 G2图表官网地址 https://antv.gitee.io/zh G2图标详细开发手册 https://antv-g2.gitee.io/zh/docs/api/ge

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • Vue中使用Lodash的实现示例

    Vue中使用Lodash的实现示例

    安装 cnpm i -S lodash 全局引入 import _ from 'lodash' Vue.prototype._ = _ 使用 在任何地方使用_或者this._即可调用lodash 对象数组排序 let users = [ { user: 'a', age: 48 }, { user: 'b', age: 34 }, { user: 'a', age: 42 }, { user: 'b', age: 55 } ]; let c = this._.orderBy(users, ['a

  • vue+阿里的G2图表-antv+折线图实例

    vue+阿里的G2图表-antv+折线图实例

    目录 vue阿里的G2图表-antv+折线图 实现效果 实现步骤 antv g2柱状图与折线图混合使用 这是数据 这是组件 vue阿里的G2图表-antv+折线图 之前使用的图表是echarts+highcharts两个常用图表的,现在的话因为项目需要和别的原因也接触使用了阿里的g2图表,感觉效果还是挺好的,在这里分享下 官网入口 实现效果 实现步骤 第一:安装插件 npm install @antv/g2 --save 第二:lineCharts.vue,注意,图表这类型的数据必须mouned

  • Vue中使用Teleport的方法示例

    Vue中使用Teleport的方法示例

    目录 正文 Teleport 在 Vue 中的使用 禁用 Teleport 标签 正文 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中.但是,有时我们并不希望如此.一个很好的例子就是模态框——通常,模态框应该出现在页面上所有内容的顶部——所以如果我们在逻辑上在具体的组件中创建它,它可能会出现在某些 HTML 元素后面或需要一些奇怪的 CSS 样式让它达到顶部. 幸运的是,在 Vue 中有一种简单的方法可以解决这个问题,称为. 标签允许我们在组件中定义一些东西,然后在代

随机推荐