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

<script>
import G2 from '@antv/g2'
import DataSet from '@antv/data-set'
import $ from 'jquery'

export default {
  mounted() {
    this.rander()
  },
  methods: {
    rander() {
      var data = [{
        type: '未解决',
        percent: 0.3
      }, {
        type: '已解决',
        percent: 0.7
      }]
      var sum = 200
      var ds = new DataSet()
      var dv = ds.createView().source(data)
      dv.transform({
        type: 'map',
        callback: function callback(row) {
          row.value = parseInt(sum * row.percent)
          return row
        }
      })
      var chart = new G2.Chart({
        container: 'node1',
        forceFit: true,
        height: 282,
        // height: window.innerHeight / 3 - 50,
        padding: [30, 'auto', 'auto', 'auto']
      })
      chart.source(dv)
      chart.tooltip(false)
      // chart.legend({
      //   position: 'right-center',
      //   offsetX: -100
      // })
      chart.coord('theta', {
        radius: 0.75,
        innerRadius: 0.6
      })
      chart.intervalStack().position('percent').color('type', ['#53F9FF', '#1A1E22']).opacity(1).label('percent', {
        offset: -18,
        textStyle: {
          fill: 'white',
          fontSize: 12,
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, .45)'
        },
        rotate: 0,
        autoRotate: false,
        formatter: function formatter(text, item) {
          return String(parseInt(item.point.percent * 100)) + '%'
        }
      })
      chart.guide().html({
        position: ['50%', '50%'],
        html: '<div class="g2-guide-html"><p class="title">总计</p><p class="value">200</p></div>'
      })
      chart.guide().html({
        position: ['50%', '-10%'],
        html: '<div class="g2-guide-title"><p class="title">昨日工单解决情况200单</p></div>'
      })
      chart.on('interval:mouseenter', function(ev) {
        var data = ev.data._origin
        $('.g2-guide-html').css('opacity', 1)
        $('.g2-guide-html .title').text(data.type)
        $('.g2-guide-html .value').text(data.value)
      })

      chart.on('interval:mouseleave', function() {
        $('.g2-guide-html .title').text('总计')
        $('.g2-guide-html .value').text(200)
      })
      chart.render()
    }
  }
}
</script>

<style lang="scss">
#node1 {
  .g2-guide-html {
    color: #a4b6c5;
    .title {
      text-align: "ceter";
    }
    .value {
      text-align: center;
    }
  }
  .g2-guide-title {
    color: #a4b6c5;
    .title {
      font-size: 16px;
    }
  }
}
</style>
