<template>
  <div>
    <div class="label">报建用户分布</div>
    <div id="applyuser"></div>
  </div>
</template>

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

  export default {
    name: "inspec-distri",
    props: {
      listenheight: String,
    },
    data() {
      return {
        xc: '',
        resdata: [],
        ecdata: [],
        totaluser: '',

      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('applyuser'))
        var scale = 0.8;
        let echartData = []
        let lengname = []
        let ecdatastr = []
        this.ecdata.forEach(function (s) {
          ecdatastr.push(DataSql.dataunit(s.value))
          echartData.push(s)
          lengname.push(s.name)
        })
        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: 10 * scale,
            padding: [11, 0, 11, 0]
          },
          blue: {
            color: '#15dce2',
            fontSize: 14 * scale,
            align: 'center',
            padding: [10, 0]
          }
        }
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          total += value.value;
        });
        this.xc.setOption({
          title: [
            {
              text: '总用户数',
              left: '38%',
              top: '38%',
              textStyle: {
                color: '#ffffff',
                fontSize: 14 * scale,

              }
            },
            {
              text: total,
              left: '38%',
              top: '47%',
              padding: [10 * scale, 10 * scale],
              textStyle: {
                color: '#00e2ea',
                fontSize: 14 * scale,
              }
            }],
          legend: {
            orient: 'horizontal',
            icon: 'circle',
            x: '15%',
            bottom: '2%',
            right: '1%',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 12 * scale,
              padding: [0, 0, 0, 4 * scale],
              color: '#ffffff'
            },
            data: lengname
          },
          series: [
            {
              name: 'Line 1',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['30%', '31%'],
              center: ['46%', '49%'],
              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
                    }
                  }
                }
              }]
            },
            {
              name: '总用户数',
              type: 'pie',
              radius: ['35%', '50%'],
              center: ['46%', '49%'],
              minAngle: 15,//最小角度
              startAngle: 60, //起始角度
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f', '#e5e280', '#6e93e0'],
              label: {
                normal: {
                  borderWidth: 20 * scale,
                  borderRadius: 4 * scale,
                  formatter: function (params, ticket, callback) {
                    var total = 0; //用户总数量
                    var percent = 0;
                    echartData.forEach(function (value, index, array) {
                      total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{blue|' + params.name + '}{blue|' + params.value + '}\n\n';
                  },
                  padding: [0, -86 * scale],
                  rich: rich,
                }
              },

              labelLine: {
                normal: {
                  length: 20 * scale,
                  length2: 80 * scale,
                  lineStyle: {
                    formatter: function (params, ticket, callback) {
                      var total = 0; //用户总数量
                      var percent = 0; //用户占比
                      echartData.forEach(function (value, index, array) {
                        total += value.value;
                      });
                      percent = ((params.value / total) * 100).toFixed(1);
                      return '{white|     ' + params.name + '}\n{hr|}\n{yellow|     ' + params.value + '}\n{blue|    ' + percent + '%}';
                    },
                  }
                }
              },
              data: echartData
            }, {
              name: 'Line 2',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['54%', '55%'],
              center: ['46%', '49%'],
              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) {
          for (var i = 0; i < this.resdata.length; i++) {
            let item = {}
            if (this.resdata[i].name == null) {
              item.name = '未确定'
              item.value = this.resdata[i].value
            } else {
              item.name = this.resdata[i].name
              item.value = this.resdata[i].value
            }
            this.ecdata.push(item)
          }
          this.setBar()
          this.$parent.loaddata++
        }
      }
    },
    ready() {
      let getdata = DataSql.getData(this,  'apply',{}, 'resdata')
      co(getdata)
    }
  }
</script>

<style scoped>

  .label {
    font-size: 0.85em;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }

  #applyuser {
    height: 89%;
    width: 100%;
  }


</style>
