<template>
  <div>
  <div><h2 style="text-align: center">稽核完成情况图</h2></div>
  <div v-if="data.length">
    <v-chart
      :forceFit="true"
      height="400"
      :data="data"
      padding="auto"
    >
      <v-tooltip></v-tooltip>
      <v-facet
        type="rect"
        :fields="['type']"
        :padding="20"
        :showTitle="false"
        :eachView="eachView"
      />
    </v-chart>
  </div>
  </div>
</template>

<script>
import dateFormat from "@comp/jeecg/JEasyCron/format-date";
import {getAction} from "@api/manage";

const data = [{
  type: '基本信息稽核通过率',
  value: 37.5
}, {
  type: '规范信息稽核通过率',
  value: 50
},{
  type: '附加材料稽核通过率',
  value: 75
}];

const eachView = function (view, facet) {
  var data = facet.data;
  var color = void 0;

    color = '#0a9afe';

  data.push({
    type: '其他',
    value: 100 - data[0].value
  });
  view.source(data);
  view.coord('theta', {
    radius: 0.8,
    innerRadius: 0.5
  });
  view.intervalStack().position('value').color('type', [color, '#e01437']);
  view.guide().html({
    position: ['50%', '50%'],
    html: '<div class="g2-guide-html"><p class="title">' + data[0].type + '</p></div>'
  });
}
export default {
  created() {
    this.dataSource()
  },
  mounted(){
    this.setStyle();
  },
  methods:{
    setStyle(){
      const id = 'legend-html';
      if (document.getElementById(id)) {
        return;
      }
      const styleTxt = `
        .g2-guide-html {
            width: 50px;
            height: 50px;
            vertical-align: middle;
            text-align: center;
            line-height: 1.5
        }

        .g2-guide-html .title {
            font-size: 12px;
            color: #8c8c8c;
            font-weight: 300;
        }

        .g2-guide-html .value {
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
      `;
      const style = document.createElement('style');
      style.setAttribute('id', id);
      style.innerHTML = styleTxt;
      document.getElementsByTagName('head')[0].appendChild(style);
    }
  },
  data() {
    return {
      sourceData:[],
      queryParam:{},
      data: data,
      eachView
    }
  }
};
</script>

