<template>
  <div id="cmp1">
    <div class="top">
      <div v-if="numberConfig">
        {{numberConfig.title}}
        <dv-digital-flop :config="numberConfig" class="number" />
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-content">
        <dv-active-ring-chart class="bottom-left" :config="config1" />
        <dv-charts :option="option2" class="dv-charts"/>
      </div>
      <Label-Tag class="Label-Tag" :config="labelConfig" />
    </div>
  </div>
</template>

<script>
  import LabelTag from '../LabelTag'
  export default{
    components:{
      LabelTag
    },
    props:{
      count1:{
        type:String,
        default:''
      },
      count2:{
        type:String,
        defalut:''
      },
      labelData:{
        type:Array
      }
    },
    data(){
      return{
        labelConfig: {
          colors:['#00baff', '#3de7c9','#9fe6b8','#96bfff','#8378ea','#ff9f7f'],
          data: ['外地', '本地','出租车','其它']
        },
        numberConfig:{
          title:'汽车总量',
          number: [19873],
          content: '{nt}辆',
          style:{
            fontSize:18,
            fill:'#37a2da',
          },
        },
        parking: false,
        config1: {
          data: [
            {
              name: '外地',
              value: 6000
            },
            {
              name: '本地',
              value: 15000
            },{
              name: '出租车',
              value: 6000
            },
            {
              name: '其它',
              value: 500
            }
          ],
          color: ['#00baff', '#3de7c9','#9fe6b8','#96bfff','#8378ea','#ff9f7f'],
          radius: '92%',
          activeRadius: '87%',
          lineWidth: 10,
          digitalFlopStyle: {
             fontSize: 12
           }
        },
        option2:{
          grid:{
            left:'20%',
            top:'10%',
            bottom:'27%',
            right:'5%'
          },
                xAxis: {
                  data: ['2015', '2016', '2017', '2018', '2019', '2020'],
                  axisLine: {
                    style: {
                      stroke: '#999'
                    }
                  },
                  axisLabel: {
                    style: {
                      fill: '#b4b4b5'
                    }
                  },
                  axisTick: {
                    show: false
                  }
                },
                yAxis: {
                  splitNumber:4,
                  min:0,
                  data: 'value',
                  splitLine: {
                    show: false
                  },
                  axisLine: {
                    style: {
                      stroke: '#b4b4b5'
                    }
                  },
                  axisLabel: {
                    style: {
                      fill: '#b4b4b5'
                    }
                  },
                  axisTick: {
                    show: false
                  },
                },
                series: [
                  {
                    data: [
                      112130, 225654, 311315, 406565,506165, 1215562
                    ],
                    type: 'line',
                    name: '',
                    lineArea: {
                      show: true,
                      gradient: ['rgba(55, 162, 218, 0.8)', 'rgba(55, 162, 218, 0.2)']
                    },
                    lineStyle: {
                      stroke: '#67e0e3'
                    },
                    linePoint: {
                      radius: 3,
                      style: {
                        fill: '#67e0e3',
                        stroke: 'transparent'
                      }
                    }
                  }
                ]
        },
      }
    }
  }
</script>

<style lang="less" scoped>
  #cmp1{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .top{
      width: 100%;
      height: .6rem;
      display: flex;
      padding: 0 .3rem;
      div{
        width: 50%;
        height: .6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .number{
        flex:1;
        padding-top: .05rem;
      }
    }
    .bottom{
      width: 100%;
      position: absolute;
      top: .6rem;
      bottom: 0;
    }
    .bottom-content{
      position: absolute;
      top: 0;
      bottom: .2rem;
      width: 100%;
      display: flex;
    }
    .bottom-left{
      width: 40%;
      height: 80%;
    }
    .dv-charts{
      width: 60%;
    }
    .Label-Tag{
      position: absolute;
      left: .5rem;
      bottom: .1rem;
    }
  }
</style>
