<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div class="height300" id="pieChart" ref="pieChart" />
  </div>
</template>
<script>
import {
  computed,
  defineComponent,
  onMounted,
  ref,
} from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'

var echartData = [
  {
    value: 335,
    legendname: '优秀',
    name: '优秀',
    itemStyle: { color: '#40ABFE' },
  },
  {
    value: 335,
    legendname: '合格',
    name: '合格',
    itemStyle: { color: '#EEAA3F' },
  },
  {
    value: 335,
    legendname: '不合格',
    name: '不合格',
    itemStyle: { color: '#FF2222' },
  },
]

var total_datas = 0
for (var i = 0; i < echartData.length; i++) {
  total_datas += Number(echartData[i].value)
  console.log(typeof echartData[i].value)
}

export default defineComponent({
  name: 'PieChart',
  setup() {
    const store = useStore()

    // 总数
    const total = computed(() => store.state.Home.worksChartData.total)
    // num
    const num = computed(() => store.state.Home.worksChartData.num)

    // 读取数据 func
    const loading = ref(true)
    const getData = async () => {
      // loading.value = true;
      // await store.dispatch("Home/queryWorksChartData");
      loading.value = false
    }

    onMounted(() => {
      getData()
      let myChart = echarts.init(document.getElementById('pieChart'))
      // 绘制图表
      myChart.setOption({

        // grid: {
        //   left: '20',
        //   right: '40',
        //   top: '0',
        //   bottom: '20',
        //   containLabel: true,
        // },
        title: [
          {
            text: '' + total_datas,
            subtext: '共计回路',
            textStyle: {
              fontSize: 24,
              color: 'black',
            },
            subtextStyle: {
              fontSize: 16,
              color: 'black',
            },
            textAlign: 'center',
            left: '49%',
            top: '40%',
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            var str =
              parms.seriesName +
              '</br>' +
              parms.marker +
              '' +
              parms.data.legendname +
              '</br>' +
              '数量：' +
              parms.data.value +
              '</br>' +
              '占比：' +
              parms.percent +
              '%'
            return str
          },
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: '0%',
          align: 'left',
          // top:'middle',
          textStyle: {
            color: '#8C8C8C',
          },
          height: 250,
        },
        series: [
          {
            name: '标题',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '60%'],

            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            // label: {
            //   show: false,
            // },
            // labelLine: {
            //   show: false,
            // },
            data: echartData,
          },
        ],
      })
      window.onresize = function () {
        // 自适应大小
        myChart.resize()
      }
    })

    return {
      loading,
      total,
      num,
    }
  },
})
</script>
<style lang="scss" scoped>
.homeBoxCard {
  margin-bottom: 24px;
  ::v-deep(.el-card__header) {
    padding-left: 12px;
    padding-right: 12px;
  }
  ::v-deep(.el-card__body) {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5715;
  }
  ::v-deep(.el-divider) {
    margin: 8px 0;
  }
  .num {
    font-size: 30px;
    color: #515a6e;
  }
  .height300 {
    height: 80%;
  }
}
</style>