admin/src/components/pieDiagram/index.vue

<template>
  <div class="component">
    <h6 class="title">{{data.title}}</h6>
    <div :id="'pieDiagram' + index" ref="box"></div>
  </div>
</template>

<script>
import G2 from '@antv/g2'

export default {
  name: '',
  props: ['data', 'index'],
  data () {
    return {
    }
  },
  components: {
    G2,
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  methods: {
    init () {
      var _that = this
      var chart = new G2.Chart({
        container: 'pieDiagram' + _that.index,
        forceFit: true,
        width: _that.$refs.box.clientWidth,
        height: 400
      })
      chart.source(_that.data.list, {
        percent: {
          formatter: function formatter (val) {
            val = val * 100 + '%'
            return val
          }
        }
      })
      chart.coord('theta', {
        radius: 0.75
      })
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      chart.intervalStack().position('percent').color('item').label('percent', {
        formatter: (val, item) => {
          return item.point.item + ': ' + val
        }
      }).tooltip('item*percent', function (item, percent) {
        percent = percent * 100 + '%'
        return {
          name: item,
          value: percent
        }
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      })
      chart.render()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>