<template>
  <div class="right-2">
    <cmpTitle title="手机用户分析" ></cmpTitle>
    <div style="display: flex;height: .8rem;">
      <div v-for="item in headData" style="width: 50%;display: flex;align-items: center;box-sizing: border-box;padding: 0 .7rem;">
        <div style="width: 1.5rem;font-size: 14px;">{{item.title}}</div>
        <dv-digital-flop :config="item.number" />
      </div>
    </div>
    <div style="display: flex;">
      <Echart
          :options="levelOpt"
          id="cmp2"
          width="50%"
        ></Echart>
      <Echart
          :options="monthChargeOpt"
          id="cmp2"
          width="50%"
        ></Echart>
    </div>
    <div style="display: flex;">
      <Echart
          :options="flowOpt"
          id="cmp2"
          width="50%"
        ></Echart>
      <Echart
          :options="voiceOpt"
          id="cmp2"
          width="50%"
        ></Echart>
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  import cmpTitle from "../../common/cmpTitle.vue"
  export default{
    components:{
      Echart,
      cmpTitle
    },
    data(){
      return{
        levelOpt:null,
        monthChargeOpt:null,
        flowOpt:null,
        voiceOpt:null,
        headData:[{
          title:'平均网龄',
            number: {
              number: [5],
              // toFixed: 1,
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#07fcfd',
            fontWeigth:'bold',
            fontSize:40
              }
            },

        },{
          title:'平均积分',
            number: {
              number: [40],
              // toFixed: 1,
              content: "{nt}",
              textAlign:'center',
              style:{
                fill:'#07fcfd',
            fontWeigth:'bold',
            fontSize:40
              }
            },

        }],
        options2:{
          title:{
            text:'',
            right:0,
            textStyle:{
              fontSize:12,
              color:'#fff'
            }
          },
         grid: {
              top:'5%',
              bottom:'30%',
              left: '20%',
              right:0
             },
             xAxis: {
               data: [],
                  axisLabel:{
                    fontSize:9,
                    color:'#b4b4b5',
                    rotate:-45
                  }
             },
             yAxis: {
               type: 'value',
                  axisLabel:{
                    fontSize:9,
                    color:'#b4b4b5'
                  }
             },
             tooltip: {
                 trigger: 'axis',
             },
             series: [
                 {
                   name: '闭合式',
                   type: 'bar',
                   barWidth: '10px',
                   stack: 'sum',
                   data: [],
                   itemStyle: {
                       normal: {
                        barBorderRadius:[5,5,0,0],
                        color:'#67e0e3'
                       },
                   },
                 },
             ]
        },
      }
    },
    created() {
      this.levelOpt = this.options2
      this.monthChargeOpt = this.options2
      this.flowOpt = this.options2
      this.voiceOpt = this.options2
    },
    mounted() {
      this.init1()
      this.init2()
      this.init3()
      this.init4()
    },
    methods:{
      deepClone(obj) {
        let _obj = JSON.stringify(obj)
        return JSON.parse(_obj);
      },
      init1(){
        let opt = this.deepClone(this.options2)
        opt.xAxis.data = ["一星","二星","三星","四星","五星"]
        opt.title.text = "等级"
        opt.series[0].name = "等级"
        opt.series[0].data = ["423","485","621","525","200"]
        opt.series[0].itemStyle.normal.color = '#09dbfe'
        this.levelOpt = opt;
      },
      init2(){
        let opt = this.deepClone(this.options2)
        opt.xAxis.data = ["79","125","189","215","388"]
        opt.title.text = "月费"
        opt.series[0].name = "月费"
        opt.series[0].data = ["423","415","521","125","310"]
        opt.series[0].itemStyle.normal.color = '#8378ea'
        this.monthChargeOpt = opt;
      },
      init3(){
        let opt = this.deepClone(this.options2)
        opt.xAxis.data = ["10GB","20GB","30GB","50GB","100GB"]
        opt.title.text = "流量"
        opt.series[0].name = "流量"
        opt.series[0].data = ["223","485","321","525","120"]
        opt.series[0].itemStyle.normal.color = '#37a2da'
        this.flowOpt = opt;
      },
      init4(){
        let opt = this.deepClone(this.options2)
        opt.xAxis.data = ["200分钟","300分钟","400分钟","500分钟","不限"]
        opt.title.text = "语音"
        opt.series[0].name = "语音"
        opt.series[0].data = ["423","485","521","125","100"]
        opt.series[0].itemStyle.normal.color = '#67e0e3'
        this.voiceOpt = opt;
      },
    }
  }
</script>

<style lang="less" scoped="scoped">
  .right-2{
    width: 100%;
    height: 8rem;
  }
</style>
