<template>
  <div>
    <div class="label">安检隐患分布图</div>
    <div id="latentdanger"></div>
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'


  export default {
    name: "LatentDanger",
    data() {
      return {
        xc: '',
        resdata: [],
        totaluser: '',
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('latentdanger'))
        var scale = 0.8;
        let echartData = this.resdata
        var rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#ffc72b",
            fontSize: 10 * scale,
            align: 'center'
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 12 * scale,
            padding: [4, 0]
          },
          blue: {
            color: '#f7cb32',
            fontSize: 12 * scale,
            align: 'center',
            padding: [8, 0]
          },
          hr: {
            borderColor: '#64d8d4',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
        }
        var legendname=[]
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          legendname.push(value.name)
          total += value.value;
        });
        this.xc.setOption({
          title: [],
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            bottom: '2%',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 12 * scale,
              padding: [0, 0, 0, 4 * scale],
              color: '#ffffff'
            },
            data:legendname
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              console.log(params)
              return   params.marker+params.name + ':  ' + params.value + ''
            },
            extraCssText: 'width: auto;height: auto;'
          },
          series: [
            {
              name: 'Line 1',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['15%', '16%'],
              center: ['50%', '20%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }]
            },
            {
              name: '总隐患数',
              type: 'pie',
              radius: ['20%', '30%'],
              center: ['50%', '20%'],
              minAngle: 20,//最小角度
              startAngle: 300, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f','#38dcad','#d9e186','#e9a937','#6869e1'],
              label: {
                normal: {
                  show:false,
                  borderWidth: 1,
                  borderRadius: 4,
                  backgroundColor:'#004b5c',
                  borderColor:'#64d8d4',
                }
              },
              labelLine: {
                normal: {
                  length: 10 ,
                  length2: 18 ,
                }
              },
              data: echartData
            }, {
              name: 'Line 2',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['34%', '35%'],
              center: ['50%', '20%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
              ]
            }
          ]
        }, true)
      },
    },
    watch: {

      'resdata':{
        deep:true,
        handler(val){
          this.setBar()
        }
      },
    },
    ready() {

      let getdata=DataSql.getData(this,'danger',{startDate:DataSql.toBeforeDate(365*2),endDate:DataSql.toBeforeDate(0)},'resdata')
      co(getdata)
    }
  }
</script>

<style scoped>
  .label {
    font-size: 0.85em;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }
  #latentdanger{
    height: 91%;
    width: 100%;
  }
</style>
