<template>
  <div id="cmp1">
    <div class="bottom">
      <div class="bottom-content">
        <Echart
              :options="options"
              id="cmp2"
              width="50%"
            ></Echart>
        <div class="bottom-left">
          <Echart
            :options="options2"
            id="cmp2circle"
            width="100%"
          ></Echart>
          <!-- <dv-active-ring-chart style="width: 100%;height: 100%;" :config="config1" /> -->
          <!-- <Label-Tag class="Label-Tag" :config="numberConfig.labelConfig" /> -->
        </div>
      </div>
      <div style="width: 100%;display: flex;position: absolute;bottom: 10px;">
        <div style="flex:1;text-align: center;">年龄结构</div>
        <div style="flex:1;text-align: center;">男女比例</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  import LabelTag from '../LabelTag'
  var img = 'data:image/png;base64,[encoded data, 7360 characters]';
  export default{
    components:{
      Echart,
      LabelTag,
    },
    props:{
      count1:{
        type:String,
        default:''
      },
      count2:{
        type:String,
        defalut:''
      },
      labelData:{
        type:Array
      }
    },
    data(){
      return{
        numberConfig:{
          title:'111',
          labelConfig: {
            data: ['绑定', '未绑定',]
          },
          number: [100],
          style:{
            fontSize:18,
            fill:'#37a2da',
          },
        },
        parking: false,
        options2:{

        },
        options:{
             grid: {
                      top:10,
                      bottom:40,
                      left: 60
                 },
                 xAxis: {
                     type: 'value',
                      axisLabel:{
                        fontSize:9,
                        color:'#b4b4b5'
                      }
                 },

                 yAxis: {
                     data: ['60以上','51-60','41-50','31-40','21-30','20以下'],
                      axisLabel:{
                        fontSize:9,
                        color:'#b4b4b5'
                      }
                 },
                 tooltip: {
                     trigger: 'axis',

                 },
                 series: [

                     {
                        barWidth:10,
                         name: '',
                         type: 'bar',
                         stack: 'test1',
                         itemStyle: {
                             normal: {
                                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                      offset: 0,
                                      color: 'rgba(80,227,194,.3)'
                                  }, {
                                      offset: 1,
                                      color: 'rgba(80,227,194,1)'
                                  }]),
                             },
                         },
                         data: [100,300,200,50,100,200]
                     },


                 ]
        }
      }
    },
    mounted() {
      this.initOptions2()
    },
    methods:{
      initOptions2(){
        var trafficWay = [{
            name: '男',
            value: 20
        }, {
            name: '女',
            value: 10
        }];
        var data = [];
        var color = ['#00ffff','#ffe000']
        for (var i = 0; i < trafficWay.length; i++) {
            data.push({
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
        this.options2 = {
          color,
              graphic: {
                elements: [{
                    type: "image",
                    z: 3,
                    style: {
                        image: img,
                        width: 70,
                        height: 70
                    },
                    left: '23%',
                    top:  '23%',
                    position: [100, 100]
                }, {
                    type: 'image',
                    z: 3,
                    style: {
                        image: require("../../assets/man.png"),
                        width: 30,
                        height: 30
                    },
                    left: '25%',
                    top: '35%'
                },
                {
                    type: 'image',
                    z: 3,
                    style: {
                        image: require("../../assets/woman.png"),
                        width: 30,
                        height: 30
                    },
                    right: '45%',
                    top: '35%'
                }]
              },
              tooltip: {
                  show: false
              },
              legend: {
                          type: 'scroll',
                          orient: "vertical",
                          icon: "circle",
                          top: 0,
                          right:0,
                          data: ["男", "女"],
                          textStyle: {
                            color: "#fff"
                          }
                        },
              toolbox: {
                  show: false
              },

              series: [{
                name: '',
                    type: 'pie',
                    clockWise: false,
                    radius: ['65%', '70%'],
                    hoverAnimation: false,
                    label: {
                      normal: {
                         position: 'inner',
                         show : false
                      }
                    },
                    center: ["40%", "45%"],
                    data
              }]
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  #cmp1{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    .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: .2rem;
      bottom: 0;
    }
    .bottom-content{
      position: absolute;
      top: 0;
      bottom: .2rem;
      width: 100%;
      display: flex;
    }
    .bottom-left{
      width: 50%;
      height: 70%;
      display: flex;
    }
    .dv-charts{
      width: 60%;
    }
    .Label-Tag{
      position: absolute;
      right: .1rem;
      top: .1rem;
      display: block;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
</style>
