欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年10月28日 14:18:20   作者：DuebassLei  
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

前言

AntV-G2官網(wǎng)推薦使用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: "學(xué)習(xí)", count: 40 },
 { item: "聽歌", count: 21 },
 { item: "鍛煉", count: 17 },
 { item: "游戲", count: 13 },
 { item: "發(fā)呆", 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中使用啦，更多用法見下面官方開發(fā)手冊。

參考：

G2 可視化圖形語法

Viser 再一次發(fā)現(xiàn)你的數(shù)據(jù)

補(bǔ)充知識：vue結(jié)合AntV G2 使用踩坑

官網(wǎng)使用import G2 from '@antv/g2';引入但是會報(bào)一個(gè)

"export 'default' (imported as 'G2') was not found in '@antv/g2' 得錯(cuò)誤

找了半天原因，最終解決辦法

import * as G2 from '@antv/g2'

以上這篇在Vue中使用Viser說明(基于AntV-G2可視化引擎)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論