<template>
  <div id="node2"/>
</template>

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

export default {
  mounted() {
    this.rander()
  },
  methods: {
    rander() {
      var data = [{
        item: '报修单一',
        count: 40,
        percent: 0.4
      }, {
        item: '报修单二',
        count: 21,
        percent: 0.21
      }, {
        item: '报修单三',
        count: 17,
        percent: 0.17
      }, {
        item: '报修单四',
        count: 13,
        percent: 0.13
      }]
      var chart = new G2.Chart({
        container: 'node2',
        forceFit: true,
        height: 282,
        padding: [40, 'auto', 'auto', 'auto']
      })
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            val = val * 100 + '%'
            return val
          }
        }
      })
      chart.coord('theta', {
        radius: 0.75
      })
      chart.guide().html({
        position: ['50%', '-15%'],
        html: '<div class="chart2-title"><p class="title">今日新增工单</p></div>'
      })
      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', function(val) {
        if (val === '报修单一') {
          return '#53F9FF'
        } else if (val === '报修单二') {
          return '#83BB41'
        } else if (val === '报修单三') {
          return '#FFC400'
        } else if (val === '报修单四') {
          return '#454D54'
        }
      }).label('percent', {
        formatter: function formatter(val, item) {
          return item._origin.item + ': ' + val
        },
        textStyle: {
          fill: '#a4b6c5', // 文本的颜色
          fontSize: '12' // 文本大小
        }
      }).tooltip('item*percent', function(item, percent) {
        percent = percent * 100 + '%'
        return {
          name: item,
          value: percent
        }
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      })
      chart.render()
    }
  }
}
</script>

<style lang="scss">
.chart2-title {
  .title {
    font-size: 16px;
    color: #a4b6c5;
  }
}
</style>
