<template>
  <div id="userdata2"></div>
</template>


<script>
  import Input from "vue-strap/src/Input";
  import co from 'co'
  import {HttpResetClass} from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
      load.load("POST",self.url,
        {data: self.sqlcondition},
        {resolveMsg: null, rejectMsg: null})
        .then((res) => {
          self.result=res.data
        })
  }
  export default {
    components: {
      Input
    },
    name: "user",
    title: "user",
    data() {
      return {
        xc:'',
        result:[],
        url:'',
        sqlcondition:{},
      }

    },
    methods: {
      setBar(id, param, data, type, formatter) {
        this.xc = this.$echarts.init(document.getElementById(id))
        let legendname=[]
        for(var i=0;i<data.length;i++){
          legendname.push(data[i]["name"])
        }
        let itemStyle = {
          normal: {
            color: function () {
              return "#" + ("0000000000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
            },
            label:{
              show: true,
//	                            position:'inside',
              formatter: '{b} : {c} ({d}%)'
            }
          }
        }
        if (type == 'sunburst') {
          itemStyle = {normal: {}}
        }
        this.xc.setOption({
          title: {
            text: param,
            textStyle: {
              fontSize: 14,
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: formatter,
            position: function (p) {                //其中p为当前鼠标的位置
              return [p[0] + 10, p[1] - 10];
            },
            extraCssText: 'width:160px;height:80px;'
          },
          legend: {
            x: 'left',
            y: '90%',
            data: legendname
          },
          series: [
            {
              name: '',
              type: type,
              radius: ['0%', '90%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              barWidth: '20%',
              itemStyle: itemStyle,
              emphasis: {},
              label: {
                normal: {
                  textStyle: {
                    fontSize: '10',
                  },
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: data                       //饼状图数据
            },
          ]
        }, true)
      },
      searchdata(){
        let sqldata=getData(this)
        co(sqldata)
        setTimeout(()=>{
          this.setBar('userdata2', '非民用用户比例', this.result,  'pie', '{b}: {c} ({d}%)')
        },100)
      },
    },

    ready() {
      this.url='rs/sql/singleTable_Final'
      var items='f_user_type as name,count(f_user_type) as value'
      var tablename='t_userinfo'
      var condition="f_user_state='正常' and f_user_type is not null and f_user_type!=''"
      var groupitem='f_user_type'
      var orderitem='f_user_type'
      this.sqlcondition={items:items,tablename:tablename,condition:condition,groupitem:groupitem,orderitem:orderitem}
      this.searchdata()


    }
  }
</script>

<style scoped>
  div{
    height: 100%;width: 100%;
  }
</style>

