在Vue中使用Viser说明(基于AntV-G2可视化引擎)


Posted in Javascript onOctober 28, 2020

前言

AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用。

安装viser-vue

yarn add viser-vue

yarn add @antv/data-set

main.js中引入

import Viser from 'viser-vue'

Vue.use(Viser)

定义d2demo.vue组件

<template>
 <div>
  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
   <v-tooltip :showTitle="false" data-key="item*percent"/>
   <v-axis/>
   <v-legend data-key="item"/>
   <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig"/>
   <v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>
  </v-chart>
 </div>
</template>

<script>
const DataSet = require("@antv/data-set");

const sourceData = [
 { item: "学习", count: 40 },
 { item: "听歌", count: 21 },
 { item: "锻炼", count: 17 },
 { item: "游戏", count: 13 },
 { item: "发呆", count: 9 }
];

const scale = [
 {
  dataKey: "percent",
  min: 0,
  formatter: ".0%"
 }
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
 type: "percent",
 field: "count",
 dimension: "item",
 as: "percent"
});
const data = dv.rows;

export default {
 name:'g2Demo',
 data() {
  return {
   data,
   scale,
   height: 400,
   pieStyle: {
    stroke: "#fff",
    lineWidth: 1
   },
   labelConfig: [
    "percent",
    {
     formatter: (val, item) => {
      return item.point.item + ": " + val;
     }
    }
   ]
  };
 }
};
</script>

效果

在Vue中使用Viser说明(基于AntV-G2可视化引擎)

到这里就是简单的在vue中使用啦,更多用法见下面官方开发手册。

参考:

G2 可视化图形语法

Viser 再一次发现你的数据

补充知识:vue结合AntV G2 使用踩坑

官网使用import G2 from '@antv/g2';引入但是会报一个

"export 'default' (imported as 'G2') was not found in '@antv/g2' 得错误

找了半天原因,最终解决办法

import * as G2 from '@antv/g2'

以上这篇在Vue中使用Viser说明(基于AntV-G2可视化引擎)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
浅谈React碰到v-if
Nov 04 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
You might like
PHP入门
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python数据结构之翻转链表
2017/02/25 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
人力资源经理自我评价
2014/01/04 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
python中%格式表达式实例用法
2021/06/18 Python