在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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
理解javascript正则表达式
Mar 08 Javascript
动态加载js、css的实例代码
May 26 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
js实现带箭头的进度流程
Mar 26 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
初学Javascript的一些总结
2008/11/03 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
linux面试题参考答案(1)
2016/01/22 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
五年级语文教学反思
2014/01/30 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2015年监理工作总结范文
2015/04/07 职场文书