在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遍历对象、数组、集合实例
Nov 08 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
JavaScript事件委托实例分析
May 26 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
微信小程序按钮点击跳转页面详解
May 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使用变量动态创建类的对象用法示例
2017/02/06 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
phpStorm2020 注册码
2020/09/17 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
Django实现快速分页的方法实例
2017/10/22 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python3实现逐字输出的方法
2019/01/23 Python
使用python远程操作linux过程解析
2019/12/04 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python 串口通信的实现
2020/09/29 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
上海某公司.net方向笔试题
2014/09/14 面试题
医学专业自荐信
2014/06/14 职场文书
质量提升方案
2014/06/16 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS