<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"
          ></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'
  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:{
          color: [
            "#3D4969",
            "#32c5e9",
            "#9fe6b8",
            "#0097EE",
            "#35CEBA",
            "#54FEFE",
            "#213B7A",
            "#8378ea"
          ],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show: true
          },
          calculable: true,
          legend: {
            type: 'scroll',
            orient: "vertical",
            icon: "circle",
            top: 0,
            right:0,
            // data: ["rose1", "rose2"],
            textStyle: {
              color: "#fff"
            }
          },
          series: [
            {
                    type: 'pie',
                    radius: ["16%", "17%"],
                    hoverAnimation: false,
                    center: ["40%", "45%"],
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B4A6B"
                            }
                        }
                    }]
                },{
                    type: 'pie',
                    radius: ["0%", "13%"],
                    hoverAnimation: false,
                    center: ["40%", "45%"],
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#3A496D"
                            }
                        }
                    }]
                },
            {
              name: "",
              type: "pie",
              radius: ["25%", '65%'],
              roseType: "area",
              label: {
                normal: {
                   position: 'inner',
                   show : false
                }
              },
              center: ["40%", "45%"],
              data: [{ value: 10, name: "汉" },
                      { value: 9, name: "回" },
                      { value: 15, name: "壮" },
                      { value: 7, name: "藏" },
                      { value: 3, name: "土家" },
                      { value: 9, name: "彝族" },
                      { value: 5, name: "蒙古" },
                      ]
            }, {
                type: 'pie',
                radius: ["68%", "70%"],
                hoverAnimation: false,
                center: ["40%", "45%"],
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                name: "",
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#0B4A6B"
                        }
                    }
                }]
            },
          ]
        },
        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(26,92,215,.3)'
                                  }, {
                                      offset: 1,
                                      color: 'rgba(26,92,215,1)'
                                  }]),
                             },
                         },
                         data: [100,300,200,50,100,200]
                     },


                 ]
        }
      }
    }
  }
</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>
