在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 名称冲突的解决方法
Apr 08 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
create-react-app中添加less支持的实现
Nov 15 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
基于js中的原型、继承的一些想法
2016/08/10 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python requests指定出口ip的例子
2019/07/25 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
应届生个人求职信模板
2013/11/26 职场文书
大学团支书的自我评价分享
2013/12/14 职场文书
关于迟到的检讨书
2014/01/26 职场文书
三查三看党性分析材料
2014/02/18 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
高三英语复习计划
2015/01/19 职场文书
团员个人年度总结
2015/02/26 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
音乐之声观后感
2015/06/04 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
新郎新娘致辞
2015/07/31 职场文书
倡议书怎么写?
2019/04/11 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python