Blame view

ant-design-vue-jeecg/src/components/chart/Pie.vue 1.51 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
<template>
  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
    <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>
</template>

<script>
肖超群 authored
12
13
const DataSet = require('@antv/data-set')
import {ChartEventMixins} from './mixins/ChartMixins'
肖超群 authored
14
肖超群 authored
15
16
17
18
19
20
21
export default {
  name: 'Pie',
  mixins: [ChartEventMixins],
  props: {
    title: {
      type: String,
      default: ''
肖超群 authored
22
    },
肖超群 authored
23
24
25
    height: {
      type: Number,
      default: 254
肖超群 authored
26
    },
肖超群 authored
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
    dataSource: {
      type: Array,
      default: () => [
        {item: '示例一', count: 40},
        {item: '示例二', count: 21},
        {item: '示例三', count: 17},
        {item: '示例四', count: 13},
        {item: '示例五', count: 9}
      ]
    }
  },
  data() {
    return {
      scale: [{
        dataKey: 'percent',
        min: 0,
        formatter: '.0%'
      }],
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      labelConfig: ['percent', {
        formatter: (val, item) => {
          return item.point.item + ': ' + val
        }
      }]
    }
  },
  computed: {
    data() {
      let dv = new DataSet.View().source(this.dataSource)
      // 计算数据百分比
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
      })
      return dv.rows
肖超群 authored
67
68
    }
  }
肖超群 authored
69
}
肖超群 authored
70
</script>