在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学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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在线打包程序源码
2008/07/27 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
js实现星星打分效果
2020/07/05 Javascript
Python Property属性的2种用法
2015/06/21 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
SQL Server面试题
2016/10/17 面试题
监理员的岗位职责
2013/11/13 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
高级工程师岗位职责
2013/12/15 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
医院合作意向书范本
2015/05/08 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技