Vue使用Viser

最近產品經理發現antV的圖表非常漂亮，想在項目里使用，看了下文檔antV適用於Vue的分支叫Viser，Viser的官方文檔寫的有點隨意，在此給出Vue中使用Viser的方法如下：

1.安裝Viser相關包

npm install viser-vue
npm install @antv/data-set

2.在項目的main.js中引入Viser

import Viser from 'viser-vue'
Vue.use(Viser)

與引入ElementUI等框架相同，這里不需要額外引入CSS樣式

3.vue文件中書寫代碼

官方餅圖案例文檔

<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip :showTitle="false" dataKey="item*percent" />
      <v-axis />
      <v-legend dataKey="item" />
      <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
      <v-coord type="theta" />
    </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 {
    data() {
      return {
        data,
        scale,
        height: 400,
        pieStyle: {
          stroke: "#fff",
          lineWidth: 1
        },
        labelConfig: ['percent', {
          formatter: (val, item) => {
            return item.point.item + ': ' + val;
          }
        }],
      };
    }
  };
</script>

別忘了拷貝最后一行的閉合</script>哦，小編實踐的時候就忘記寫了，一直出不來圖表，編譯時也不報錯，整了幾個小時才發現時少寫了這個。