<template>
  <div>
        <h1 class="bt_h1">人口管理</h1>
        <div id="myEchart" style="width:100%;height:380px"></div>
         <div id="myldrkEchart" style="width:100%;height:380px"></div>
        
    </div> 
  </div>
</template>

<script>
  module.exports = {
        data: function() {
            return {
              
            }
        }, 
        props:[],
        methods:{

        },
        mounted(){//挂载的时候执行
            getByAjax("../rest/year",function(data){
               initchart(data[0]);
            });

             getByAjax("../business/ldrktjBybuilding",function(data){
               initbuldingchart(data);
            });
        }
  }

function initchart(data){
    var temp=[];
    console.log(data);
    for(var item in data){
         temp.push({value:data[item],name:item});
    }
    console.log(temp);
    var echart = echarts.init(document.getElementById("myEchart"));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} {b}: {c}<br/> ({d}%)"
        },
        title: {
            text: '人口按年龄占比',
            left: 'center',
            textStyle: {
                color: 'white',
                fontSize: '12',
            },
        },
        color: ['#1CBCD6', '#FF4500', 'yellow', '#FFEFD5','#A52A2A','#71C671'],
        series: [
            {
//                name: '年龄段',
                type: 'pie',
                radius: ['30%', '60%'],
              
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: temp
            }
        ]
    };
    echart.setOption(option);
}

function initbuldingchart(data){
 
  var temprk=[];
    console.log(data);

    $.each(data, function (index, item) {
         console.log(item);
               temprk.push({value:item.total,name:item.name});
            });

    console.log(temprk);
    var echartrk = echarts.init(document.getElementById("myldrkEchart"));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b}:<br/> {c} ({d}%)"
        },
        title: {
            text: '流动人口小区占比',
            left: 'center',
            textStyle: {
                color: 'white',
                fontSize: '12',
            },
        },
        color: ['#1CBCD6', '#FF4500', 'yellow', '#FFEFD5','#A52A2A','#71C671'],
        series: [
            {
               // name: '小区',
                type: 'pie',
                radius: ['40%', '60%'],
              
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: temprk
            }
        ]
    };
    echartrk.setOption(option);
}
</script>
 
<style scoped>
    .bt_h1{
        text-align: center;
        font-size: 20px;
        color: white;
        font-weight: 500;
        margin-top: 8px;
    }
    .table-a table{border:1px solid #F00} 
    .bg_tr tr:hover{
        background-color: #ece5e500 ! important;
    }
    .bg_tr{
        color: #fff;
    }
    .bg_tr td{
       text-align: center;
    }
    .tr_th{
        background: linear-gradient(#415dc0, #9aaab5);
    }
    .tr_th th{
        text-align: center;
    }

</style>

