在Vue中使用Viser说明(基于AntV-G2可视化引擎)
5星 · 超过95%的资源 110 浏览量
2021-01-18
18:13:36
上传
评论
收藏 52KB PDF 举报 
在在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
weixin_38732454
- 粉丝: 6
- 资源: 952
- 1
- 2
前往页