<template>
  <div class="left-1">
    <cmpTitle title="手机号使用分析" ></cmpTitle>
    <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;">
      <Echart
      :options="options"
      id="cmp1"
      style="width: 80%;height: 80%;margin: .1rem auto 0;">
      </Echart>
      <div class="up">
        <div class="item" v-for="item in titleItem" :key="item.title">
            <p class="ml-3 colorBlue fw-b">{{item.title}} : </p>
            <dv-digital-flop :config="item.number" style="display: block;width:1rem;height:100%;" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Echart from '../../common/echart'
  import cmpTitle from "../../common/cmpTitle.vue"
  export default{
    components:{
      Echart,
      cmpTitle
    },
    data(){
      return{
        options:null,
        titleItem: [
          {
            title: "电信用户",
            number: {
              number: [710],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#3de7c9',
              }
            }
          },{
            title: "移动用户",
            number: {
              number: [311],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#32c5e9'
              }
            }
          },{
            title: "联通用户",
            number: {
              number: [289],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#67e0e3'
              }
            }
          },{
            title: "其他",
            number: {
              number: [12],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#8378ea'
              }
            }
          }
        ],
      }
    },
    created() {
      this.init()
    },
    mounted() {
    },
    methods:{
      init(){
        this.options = {
            color: ['#2966b6', '#7460EE'],
            tooltip: {},
            radar: {
                nameGap: 6, // 图中工艺等字距离图的距离
                // splitNumber: 6, //指示器轴的分割段数
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                indicator: [{
                        name: '系统',
                        max: 150
                    },
                    {
                        name: '性能',
                        max: 150
                    },
                    {
                        name: '外观',
                        max: 150
                    },
                    {
                        name: '屏幕',
                        max: 150
                    },
                    {
                        name: '内存',
                        max: 150
                    },
                    {
                        name: '地图',
                        max: 150
                    }
                ],
                axisLine: { //指向外圈文本的分隔线样式
                    lineStyle: {
                        color: '#1c368f'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#1c368f',
                        // width: 2,
                        // type: 'dotted'
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: '#141845'
                    }
                }
            },
            series: [{
                name: '',
                type: 'radar',
                data: [{
                    value: [134, 100, 80, 76, 60, 46, 37, 28],
                    name: '',
                    lineStyle: {
                        // width: 5
                    },
                    areaStyle: {
                        // color:'red'
                    }
                }]
            }]
        };
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .left-1{
    height: 4rem;
    .up {
      width: 50%;
      box-sizing: border-box;
      .item {
        display: flex;
        align-items: center;
        border-radius: 0.0625rem;
        height: 0.6rem;
        margin-left: .25rem;
      }
    }
  }
</style>
