<template>
  <div id="centerCmp3">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">外省流入人口年龄分布图</span>
      </div>
    <div class="content">
      <Echart
        :options="options"
        id="cmp1"
        style="width: 50%;height: 100%;"
      ></Echart>
      <div class="up">
        <div class="item" v-for="item in titleItem" :key="item.title">
            <p class="ml-3 colorBlue fw-b title">{{item.title}} : </p>
            <dv-digital-flop :config="item.number" style="display: block;width:50%;height:100%;" />
            <p class="colorBlue title2">人</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  var timer = null;
  import Echart from '../../common/echart'
  export default{
    components:{
      Echart
    },
    data(){
      return{
        titleItem: [
          {
            title: "1-16岁",
            number: {
              number: [453],
              content: "{nt}",
              textAlign:'right',
              style: {
                fontSize: 30,
                fontWeight:'bold',
                fill: '#3de7c9',
              }
            }
          },{
            title: "17-30岁",
            number: {
              number: [250],
              content: "{nt}",
              textAlign:'right',
              style: {
                fontSize: 30,
                fontWeight:'bold',
                fill: '#32c5e9'
              }
            }
          },{
            title: "31-61岁",
            number: {
              number: [134],
              content: "{nt}",
              textAlign:'right',
              style: {
                fontSize: 30,
                fontWeight:'bold',
                fill: '#67e0e3'
              }
            }
          },{
            title: "大于60岁",
            number: {
              number: [60],
              content: "{nt}",
              textAlign:'right',
              style: {
                fontSize: 30,
                fontWeight:'bold',
                fill: '#8378ea'
              }
            }
          }
      ],
        options:{},
      }
    },
    mounted() {
      this.initLine()
    },
    methods:{
      initLine(){
        //职称结构取数
        var getname = ['1-16岁', '17-30岁', '31-61岁', '大于60岁'];
        var getvalue = [453, 250, 134, 60];
        var data = [];
        for (var i = 0; i < getname.length; i++) {
            data.push({
                name: getname[i],
                value: getvalue[i]
            })
        }
        var colorList = ['#01fff5', '#32c5e9', '#8378ea', '#9fe6b8'];
        var rich = {
            name: {
                color: "#FFF",
                fontSize: 12,
                padding: [0, 0, 0, 0],
                fontWeight: '400',
                align: 'left'
            },
            value: {
                color: "#FFF",
                fontSize: 12,
                padding: [0, 10, 0, 10],
                fontWeight: '500',
                align: 'right'
            },
            percent: {
                color: "#FFF",
                align: 'right',
                fontSize: 15,
                fontWeight: '500',
                //padding: [0, 5]
            },
            hr: {
                width: '100%',
                height: 0,
            },
            cir: {
                fontSize: 26,
            }
        }
        //职称结构图表

        let option = {
            tooltip: {
                trigger: 'axis',
            },
            series: [{
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return params.name + '：' + params.value + '人<br>占比：' + params.percent.toFixed(2) + '%'
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#0A1934',
                        borderWidth: 5,
                        color: function(params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                type: 'pie',
                radius: ['50%', '70%'],
                center: ["50%", "50%"],
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: params => {
                            return (
                                '{percent|' + params.percent.toFixed(0) + '%}'
                            );
                        },
                        rich: rich,
                    }
                },
                data: data
            }]
        };
        this.options = option
      }
    },

  }
</script>

<style lang="less" scoped="scoped">
  #centerCmp3{
        width: 100%;
        height: 3.5rem;
        position: relative;
        .content{
          width: 100%;
          display: flex;
          align-items: center;
          position: absolute;
          top: .4rem;
          bottom: 0;
        }
        .up {
          width: 50%;
          box-sizing: border-box;
          .item {
            display: flex;
            align-items: center;
            border-radius: 0.0625rem;
            height: 0.6rem;
            margin-left: .25rem;
            .title{
              width: 4rem;
              font-size: .2rem;
            }
            .title2{
              width: 4rem;
              margin-left: .1rem;
              font-size: .2rem;
            }
          }
        }
  }
</style>
