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

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

export default {
  props: [
    'data',
  ],
  data () {
    return {
      chart: undefined,
    }
  },
  mounted() {
    this.rander()
  },
  watch: {
    data() {
      this.rander()
    }
  },
  methods: {
    rander() {
      const _self = this

      if (this.chart) {
        this.chart.clear();
      } else {
        this.chart = new G2.Chart({
          container: 'node2',
          forceFit: true,
          height: 282,
          padding: [40, 'auto', 'auto', 'auto']
        })
      }

      const chart = this.chart;

      chart.source(this.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.legend(false);

      chart.intervalStack().position('percent').color('item').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: _self.data.filter(({ item: it }) => (it == item))[0].count,
        }
      })

      chart.render()
    }
  }
}
</script>

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