admin/src/components/ringChart/index.vue

<template>
  <div class="component">
    <h6 class="title">{{data.title}}</h6>
    <div id="ringChart" ref="box"></div>
  </div>
</template>

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

export default {
  name: '',
  props: ['data'],
  data () {
    return {
    }
  },
  components: {
    G2,
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  methods: {
    init () {
      var _that = this
      var chart = new G2.Chart({
        container: 'ringChart',
        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,
        innerRadius: 0.6
      })
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      var num = 0
      for (var n = 0; n < _that.data.list.length; n++) {
        num += _that.data.list[n].count
      }
      // 辅助文本
      chart.guide().html({
        position: ['50%', '50%'],
        html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">' + _that.data.title + '<br><span style="color:#8c8c8c;font-size:20px">' + num + '</span></div>',
        alignX: 'middle',
        alignY: 'middle'
      })
      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
        formatter: function 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()
      interval.setSelected(_that.data.list[0])
    },
  }
}
</script>

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