<template>
  <div
    id="topLeftTwoChart"
    class="echart"
    :style="{
      width: '100%',
      height: '100%'
    }"
  />
</template>

<script>
import {
  coverageRateView1,
  coverageRateView2,
  coverageRateView3,
  coverageRateView4
} from '@/api/allApi/index.js'
import * as echarts from 'echarts'
export default {
  name: 'PostCheckWebTopLeftTwoChart',
  props: {
    type: {
      type: Number,
      default: 1
    },
    queryParams: {
      type: Object,
      default: {}
    },
    selType:{
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dataObj :{}
    }
  },

  mounted() {
    this.initList()
  },

  methods: {
    async initList() {
      this.queryParams.selType = this.selType
      if (this.type == 1) {
        const res = await coverageRateView1(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.dataObj = res.data
      }
      if (this.type == 2) {
        const res = await coverageRateView2(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.dataObj = res.data
      }
      setTimeout(() => {
        this.initTopLeftTwoChart()
      }, 100)
    },
    initTopLeftTwoChart() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            avoidLabelOverlap: false,
            radius: '65%',
            label: {
              show: false,
              position: 'center',
              normal: {
                formatter: '{b}：{d}%',
                position: 'inner'
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.dataObj.postTolat, name: '岗位总数量' },
              { value: this.dataObj.cpostTolat, name: '检查岗位数量' }
            ]
          }
        ]
      }
      const topLeftTwoChart = echarts.init(
        document.getElementById('topLeftTwoChart')
      ) // 图标初始化
      topLeftTwoChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        topLeftTwoChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>