<script >
import * as echarts from 'echarts'
import { defineComponent, ref, getCurrentInstance, reactive, onMounted } from "@vue/composition-api";
export default defineComponent({
  props: ['d'],
  setup(props) {
    const d = props.d
    const chartRef = ref()
    onMounted(() => {
      echarts.init(chartRef.value).setOption({
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b}: {c} ({d}%)',
        // },
        // legend: {
        //   top: '5%',
        //   left: 'center',
        // },
        color: ['#0036ff', '#c2c2c2'],
        series: [
          {
            type: 'pie',
            radius: ['40px', '86px'],
            avoidLabelOverlap: false,
            label: {
              color: '#000',
              formatter: (params) => {
                // console.log('params :>> ', params);
                return `${params.data.name}: ${params.data.value} (${params.percent}%)\n${d[params.data.type].reduce((p, { name }) => p += `${name}\n`, '')}`
              },
              lineHeight:18
            },
            // labelLine: {
            //   show: true,
            //   length: 10,
            // },
            data: [
              { value: d.finish.length, name: '已提交单位', type: 'finish' },
              { value: d.unfinish.length, name: '未提交单位', type: 'unfinish' },
            ],
          },
        ],
      })
    })

    return {
      chartRef
    }
  }
})


</script>

<template>
  <div ref="chartRef" class="w-full h-full " />
</template>
