在Vue中使用Viser说明(基于AntV-G2可视化引擎)

前言

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中使用啦，更多用法见下面官方开发手册。

参考：

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可视化引擎)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Ant-design-vue Table组件customRow属性的使用说明

    官网示例 使用方式 // 表格中加入customRow属性并绑定一个custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table> // methods中定

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • vue用ant design中table表格,点击某行时触发的事件操作

    使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow.

  • antd vue table跨行合并单元格,并且自定义内容实例

    ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • 在Vue中使用Viser说明(基于AntV-G2可视化引擎)

    前言 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=&quo

  • 在Vue中使用antv的示例代码

    一,在vue原型中使用 1.首先安装antv/g2 yarn add @antv/g2 --save 2.在main.js中挂在到vue原型实例中 const G2 = require('@antv/g2') Vue.prototype.$G2 = G2 3.在vue文件中可以直接在mounted生命周期中直接使用 <template> <div> <div id="c1"></div> </div> </templat

  • 在vue中使用G2图表的示例代码

    G2笔记 G2是蚂蚁金服的一套开源图表插件,因项目需要研究了一下,相比Echarts来说,G2文档比较难懂,网上也没有太多示例,所以在这里记录一些使用G2遇到的问题. 官方推荐在vue项目中使用Viser,它对G2进行了封装,使用起来可能更方便,又研究了一个Viser,结果Viser整个只对viser-react如何使用进行了介绍,对viser-vue一笔带过,官网是这么介绍的: 我们以 viser-react 举例写一个 chore 图为例,viser-vue 和 viser-ng 的用法类似

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • 基于vue中解决v-for使用报红并出现警告的问题

    代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下: 控制台中也会有: (Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • 基于vue中keep-alive缓存问题的解决方法

    vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

随机推荐