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>哦，小编实践的时候就忘记写了，一直出不来图表，编译时也不报错，整了几个小时才发现时少写了这个。