<template>
  <div>
    <div class="hiddenDangerStatisticsEcharts" id="hiddenDangerStatisticsEcharts-box" v-if="eChartsList[0]"></div>
    <p v-if="!eChartsList[0]" style="color:#999;text-align: center;line-height:330px;">暂无数据</p>
  </div>
</template>

<script>
  import {
    securityIndexStatisticsHazardScatter,
  } from '@/api/safetyCheck/index'
  import echarts from 'echarts'
  export default {
    name: 'hiddenDangerStatisticsEcharts',
    props:{
      propsData:{},
    },
    data(){
      return{
        hdLevel:1,
        userFlg:true,
        nullType:false,
        eChartsList:[],
      }
    },
    created(){

    },
    mounted(){
      this.securityIndexStatisticsHazardScatter();
    },
    methods:{
      securityIndexStatisticsHazardScatter(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsHazardScatter(obj).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            list.push({
              name:response.data[i].oneLevelName,
              value:response.data[i].ratio,
            })
          }
          this.$set(this,'eChartsList',list[0]?list:[]);
          this.$nextTick(()=>{
            this.schoolEcharts(this.eChartsList);
          })
        });
      },
      schoolEcharts(list){
        let myChart = this.$echarts.init(document.getElementById('hiddenDangerStatisticsEcharts-box'));
        let option = {
          legend: {
            show:false,
          },
          tooltip: {
            confine: true,
            trigger: 'item',
             formatter: '{b} : {c}'
          },
          series: [
            {
              avoidLabelOverlap: false,
              type: 'pie',
              left:20,
              right:20,
              roseType: 'area', // 玫瑰图
              center: ['50%', '50%'],
              radius: ['0%', '40%'],
              label: {
                normal: {
                  formatter: function(params) {
                    let name = params.name;
                    let percent = params.percent+'%';
                    if (name.length > 10) {
                      name = name.substring(0, 10) + '...';
                    }
                    return name+percent;
                  },
                  textStyle: {
                    fontSize: 12,
                    color: '#333'
                  },
                }
              },
              data: list,
              itemStyle: {
                normal: {
                  color: function (colors) {
                    var colorList = ['#0183FA', '#FF5E86', '#FFE019', '#2758E0', '#41BE26', '#009DFF', '#FF2A00', '#39DBED', '#FFA200', '#7DD947', '#A069FF'];
                    return colorList[colors.dataIndex];
                  }
                },
              }
            }
          ]
        };
        myChart.setOption(option);
      },

    }
  }
</script>

<style scoped lang="scss">
  .hiddenDangerStatisticsEcharts{
    height:330px;
  }
</style>
