---

前言

适用于初学者的v-chart封装方法

G2文档（viser.js以G2为底层，两个文档需要交替看）
viser.js 官方文档
viser.js 官方例子

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、圆环

代码如下（示例）：

<template>
  <div style="">
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
      <!-- 显示浮动 -->
      <!-- <v-tooltip :showTitle="false" dataKey="item*percent" /> -->
      <!-- 显示X,Y轴 -->
      <!-- <v-axis /> -->
      <!-- 显示描述 -->
      <!-- <v-legend dataKey="item" position="right" :offsetX="-100" /> -->
      <v-legend :offsetX="20" :offsetY="20" :textStyle="textStyle" />
      <!-- 显示圆 -->
      <v-pie :position="position" color="item" :vStyle="pieStyle" />
      <!-- 显示圆环 -->
      <v-coord type="theta" :radius="1" :innerRadius="0.70" />
    </v-chart>
    <div class="main">
      <div style="font-size: 30px;">在线率</div><span style="
  font-size: 50px;">{{ sumData }}</span>
    </div>
  </div>
</template>

<script>
import { DataSet } from '@antv/data-set'
import { black } from 'color-name'

export default {
  name: 'SalesData',
  // mixins: [ChartEventMixins],
  props: {
    preData: {
      type: Array,
      default: () => [
      { item: '在线: 916', count: 961, itemData: '在线' },
      { item: '离线: 40', count: 40, itemData: '离线' },
      ]
    },
    position: {
      type: String,
      default: 'percent'
    }
  },
  data () {
    return {
      scale: [{
        dataKey: 'percent',
        min: 0,
        formatter: '.0%'
      }],
      height: 395,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 2,
      },
      textStyle: { //图例文字的样式
        color: black,
        fontSize: 16
      },    
      padding: [40, 20, 50, 50],//整个v-chart的内边距布局
    }
  },
  computed: {
    data () {
      const dv = new DataSet.View().source(this.preData)
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
      })
      const data = dv.rows
      return data
    },
    sumData () {
      const dv = new DataSet.View().source(this.preData)
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
      })
      const data = dv.rows
      const ddd = ((data[0].num / (data[0].num + data[1].num)) * 100).toFixed(2) + "%"
      console.log("1111", ddd)
      return ddd
    }
  },
}
</script>

<style scoped>
.main {
  color: black;
  text-align: center;
  border-radius: 20px;
  position: absolute;
  left: 56%;
  top: 46%;
  transform: translate(-50%, -50%);
}
</style>

二、折线图

代码如下（示例）：

<template>
  <div v-if="data.length">
    <v-chart :forceFit="true" height="400" :data="data" :scale="scale" :padding="padding">
      <!-- 显示浮动 -->
      <v-tooltip />
      <!-- 显示X,Y轴 -->
      <v-axis />
      <!-- 显示描述 -->
      <v-legend />
      <!-- 显示折线 -->
      <v-line position="extra*value" color='key' :opacity='opacity' />
      <!-- 显示折线上的点 , :label="labelConfig"显示折线上的描述-->
      <v-point position="extra*value" color='key' :size="4" :v-style="style" :shape="'circle'" :label="labelConfig" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set');
export default {
  data () {
    return {
      label: {
        textStyle: {
          // fill: '#aaaaaa'
        }
      },
      style: { stroke: '#fff', lineWidth: 1 },//折线的边
      labelConfig: ['percent', {//显示线上文字
        formatter: (val, item) => {
          // console.log("222323", item);
          return item.point.value
        }
      }],
      opacity: ['key', function (val) {
        if (val === 'China') {
          return 1;
        }
        return 0.7;
      }],
      scale: [{
        dataKey: 'extra',
        range: [0, 1]
      }],
      padding: [40, 40, 180, 50],
      dataSource: [
        {
          extra: 2013,
          key: '食品烟酒',
          value: 4127
        }, {
          extra: 2013,
          key: '衣着',
          value: 1027
        }, {
          extra: 2013,
          key: '居住',
          value: 2999
        }, {
          extra: 2013,
          key: '生活用品',
          value: 806
        }, {
          extra: 2013,
          key: '交通通行',
          value: 1627
        }, {
          extra: 2013,
          key: '文教娱',
          value: 1398
        }, {
          extra: 2013,
          key: '医疗保健',
          value: 912
        }, {
          extra: 2013,
          key: '其他',
          value: 325
        }, {
          extra: 2014,
          key: '食品烟酒',
          value: 4494
        }, {
          extra: 2014,
          key: '衣着',
          value: 1099
        }, {
          extra: 2014,
          key: '居住',
          value: 3201
        }, {
          extra: 2014,
          key: '生活用品',
          value: 890
        }, {
          extra: 2014,
          key: '交通通行',
          value: 1869
        }, {
          extra: 2014,
          key: '文教娱',
          value: 1536
        }, {
          extra: 2014,
          key: '医疗保健',
          value: 1045
        }, {
          extra: 2014,
          key: '其他',
          value: 358
        }, {
          extra: 2015,
          key: '食品烟酒',
          value: 4814
        }, {
          extra: 2015,
          key: '衣着',
          value: 1164
        }, {
          extra: 2015,
          key: '居住',
          value: 3419
        }, {
          extra: 2015,
          key: '生活用品',
          value: 951
        }, {
          extra: 2015,
          key: '交通通行',
          value: 2087
        }, {
          extra: 2015,
          key: '文教娱',
          value: 1723
        }, {
          extra: 2015,
          key: '医疗保健',
          value: 1165
        }, {
          extra: 2015,
          key: '其他',
          value: 389
        }, {
          extra: 2016,
          key: '食品烟酒',
          value: 5151
        }, {
          extra: 2016,
          key: '衣着',
          value: 1203
        }, {
          extra: 2016,
          key: '居住',
          value: 3746
        }, {
          extra: 2016,
          key: '生活用品',
          value: 1044
        }, {
          extra: 2016,
          key: '交通通行',
          value: 2338
        }, {
          extra: 2016,
          key: '文教娱',
          value: 1915
        }, {
          extra: 2016,
          key: '医疗保健',
          value: 1307
        }, {
          extra: 2016,
          key: '其他',
          value: 406
        }
      ]
    }
  },
  computed: {
    data () {//响应数据，直接用
      const dv = new DataSet.View().source(this.dataSource)
      let rows = dv.rows
      console.log("2343", dv)
      return rows
    }
  },
};
</script>