DDR爱好者之家

在Vue中使用Viser说明(基于AntV-G2可视化引擎)
站长资源 2024/12/24 佚名
34 1538
DDR爱好者之家 Design By 杰米

前言

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米