<template>
  <div>
    <div class="label">安检</div>
    <div class="f2">
      <div id="unfinished" class="he1"></div>
      <div id="untreated"  class="he1"></div>
    </div>
    <div class="f1">
      <table>
        <tr>
          <td class="td1"><img src="../../../../static/ManageHomePic/图层11.png"></td>
          <td>安检总户数<br/>&nbsp;<span class="s1">22万户</span></td>
        </tr>
        <tr>
          <td class="td1"><img src="../../../../static/ManageHomePic/图层1343.png"></td>
          <td>正常户数<br/>&nbsp;<span class="s2">1125</span></td>
        </tr>
        <tr>
          <td class="td1"><img src="../../../../static/ManageHomePic/椭圆8拷贝6.png"></td>
          <td>隐患户数<br/>&nbsp;<span class="s3">213</span></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PlanStatistics",
    data() {
      return {
        safedata: [{value: 6000, name: '已完成'}, {value: 1000, name: '未完成'}],
        safeerrordata: [{value: 6000, name: '已完成'}, {value: 1000, name: '未完成'}],
      }
    },
    methods: {
      setBar(id, iddata) {
        this.xc = this.$echarts.init(document.getElementById(id))
        var scale = 0.8
        var color = ["#e7c83c", "#2f3f2b"]
        var center = [66, 82]
        if (id == 'untreated') {
          color = ["#69d8d2", "#013e48"]
          center = [66, 82]
        }
        this.xc.setOption({
          color: color,
          series: [
            {
              name: 'demo',
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['30%', '45%'],
              minAngle: 15,//最小角度
              startAngle: 90, //起始角度
              avoidLabelOverlap: false,
              hoverAnimation: false,
              label: {
                normal: {
                  formatter: function (params, ticket, callback) {
                    if (id == 'unfinished') {
                      return '{a|' + params.name + '}{a|' + params.value + '}\n';
                    }
                    return '{b|' + params.name + '}{b|' + params.value + '}\n';
                  },
                  borderWidth: 20 * scale,
                  borderRadius: 4 * scale,
                  padding: [0, -80 * scale],
                  rich: {
                    a: {
                      color: '#f3c832',
                      fontSize: 12 * scale,
                    },
                    b: {
                      fontSize: 12 * scale,
                      color: '#6fd9d0'
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 10 * scale,
                  length2: 80 * scale,
                  lineStyle: {
                    color: color[0]
                  }
                }
              },
              data: iddata
            }
          ]
        })
      },
    },
    ready() {
      this.setBar('unfinished', this.safedata)
      this.setBar('untreated', this.safeerrordata)
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    float: left;
    color: #fff;
    height: 8%;
    width: 100%;
    text-align: left;
  }
  table {
    width: 100%;
    height: 100%;
  }
  td {
    height: 30%;
    color: #ffffff;
    font-size: 0.85em;
  }
  .td1 {
    width: 40%;

  }
  .f1 {
    padding: 0% 0% 0% 5%;
    height: 90%;
    width: 40%;
    float: left;
  }
  .f2 {
    height: 90%;
    width: 60%;
    float: right;
  }
  .s1 {
    color: #f3c832;
    font-size: 1.35em;
  }
  .s2 {
    color:#5d89e4;
    font-size: 1.35em;
  }
  .s3 {
    color: #05c3c7;
    font-size: 1.35em;
  }
  img {
    width: 80%;
  }
  .he1 {
    height: 50%;
  }
</style>
