在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 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
JavaScript实现三级联动效果
Jul 15 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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 header函数分析详解
2011/08/06 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
什么是唯一索引
2015/07/05 面试题
摄影实习自我鉴定
2013/09/20 职场文书
太太口服液广告词
2014/03/20 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
创业计划书之熟食店
2019/10/16 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
MySQL 服务和数据库管理
2021/11/11 MySQL