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

5星 · 超过95%的资源 185 浏览量更新于2023-05-03 收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

在在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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38732454

粉丝: 6
资源: 952

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈