<template>
  <!-- 数据总览图表 -->
  <div class="dataScreeningChart" id="dataScreeningChart-box">

  </div>
</template>

<script>
  import {
    securityIndexStatisticsProportionChart,
  } from '@/api/safetyCheck/index'
  import echarts from 'echarts'
  export default {
    name: 'dataScreeningChart',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{},
      }
    },
    created(){

    },
    mounted(){
      this.securityIndexStatisticsProportionChart();
    },
    methods: {
      securityIndexStatisticsProportionChart(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsProportionChart(obj).then(response => {
          this.$set(this,'newData',response.data);
          this.$nextTick(()=>{
            this.eCharts(this.newData);
          })
        });
      },
      eCharts(newData){
        let myChart = this.$echarts.init(document.getElementById('dataScreeningChart-box'));
        let data = [
          {
            name: "隐患数"+newData.hazardNum+" 个",
            value: newData.hazardRatio,
          },
          {
            name: "已整改"+newData.rectifiedNum+" 个",
            value: newData.rectifiedRatio,
          },
          {
            name: "暂无法整改"+newData.unableRectifyNum+" 个",
            value: newData.unableRectifyRatio,
          },
          {
            name: "多次整改未完成"+newData.notFinishedNum+" 个",
            value: newData.notFinishedRatio,
          },
          {
            name: "复查通过"+newData.inspectionPassedNum+" 个",
            value: newData.inspectionPassedRatio,
          },
        ];

        let titleArr = [],
          seriesArr = [];
        let colors = [
          ["#FFA60C","#FF7B00", "#F5F5F5"],
          ["#0183FA","#00E4F4", "#F5F5F5"],
          ["#FFA60C","#FF7B00", "#F5F5F5"],
          ["#FD0000","#FFB2B2", "#F5F5F5"],
          ["#A0F1A2","#02BC34", "#F5F5F5"],
        ];
        data.forEach(function (item, index) {
          titleArr.push({
            text: item.name,
            left: index * 20 + 10 + "%",
            top: "75%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "12",
              color: '#333333',
              textAlign: "center",
            },
          });
          seriesArr.push({
            name: item.name,
            type: "pie",
            clockWise: false,
            radius: [24, 32],

            itemStyle: {

              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colors[index][0],
                  },
                  {
                    offset: 1,
                    color: colors[index][1],
                  },
                ]),
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: [index * 20 + 10 + "%", "40%"],
            data: [
              {
                value: item.value,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "500",
                      color:"#333333",
                    },
                  },
                },
              },
              {
                value: 100 - item.value,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: colors[index][2],
                  },
                  emphasis: {
                    color: colors[index][2],
                  },
                },
              },
            ],
          });
        });
        let option =  {
          title: titleArr,
          series: seriesArr,
        };
        myChart.setOption(option);
      },
    }
  }
</script>

<style scoped lang="scss">
  .dataScreeningChart{
    width: 581px;
    height: 138px;

  }

</style>
