<template>
  <div id="cmp5">
    <div class="left">
      <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="up">
        <div class="item" v-for="item in titleItem" :key="item.title">
            <p class="ml-3 colorBlue fw-b">{{item.title}} : </p>
            <dv-digital-flop :config="item.number" style="display: block;width:1.5rem;height:100%;" />
        </div>
      </div>
    </div>
    <div class="right">
      <Echart
        :options="options"
        id="cmp1"
        style="width: 100%;height: 100%;"
      ></Echart>
    </div>
  </div>
</template>

<script>
  var timer = null;
  import Echart from '../../common/echart'
  export default{
    components:{
      Echart
    },
    data(){
      return{
        titleItem: [
          {
            title: "涉老金融",
            number: {
              number: [8],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#3de7c9',
              }
            }
          },{
            title: "涉老用品",
            number: {
              number: [270],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#32c5e9'
              }
            }
          },{
            title: "涉老服务",
            number: {
              number: [200],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#67e0e3'
              }
            }
          },{
            title: "涉老地产",
            number: {
              number: [12],
              content: "{nt}",
              textAlign:'left',
              style: {
                fontSize: 20,
                fontWeight:'bold',
                fill: '#8378ea'
              }
            }
          }
      ],
        options:{},
      }
    },
    mounted() {
      this.initLine()
    },
    methods:{
      initLine(){
        //职称结构取数
        var getname = ['信托类', '证券类', '储蓄类', '保险类','房地产类','基金类','组合型'];
        var getvalue = [300, 200, 100, 50,51,21,10];
        var data = [];
        for (var i = 0; i < getname.length; i++) {
            data.push({
                name: getname[i],
                value: getvalue[i]
            })
        }
        var colorList = ['#37a2da', '#32c5e9', '#8378ea', '#9fe6b8','#503EFF', '#3E82FF',"#966EFF"];
        var rich = {
            name: {
                color: "#FFF",
                fontSize: 10,
                padding: [0, 0, 0, 0],
                fontWeight: '400',
                align: 'left'
            },
            value: {
                color: "#FFF",
                fontSize: 10,
                padding: [0, 10, 0, 10],
                fontWeight: '500',
                align: 'right'
            },
            percent: {
                color: "#FFF",
                align: 'right',
                fontSize: 10,
                fontWeight: '500',
                //padding: [0, 5]
            },
            hr: {
                width: '100%',
                height: 0,
            },
            cir: {
                fontSize: 26,
            }
        }
        //职称结构图表

        let option = {
            tooltip: {
                trigger: 'axis',
            },
            title:{
              text:'老龄金融产品占比',
              bottom:0,
              left:'center',
              textStyle:{
                fontSize:10
              }
            },
            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: ['40%', '60%'],
                center: ["50%", "50%"],
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: params => {
                            return (
                                '{name|' + params.name + '}{percent|' + params.percent.toFixed(0) + '%}'
                            );
                        },
                        
                        rich: rich,
                    }
                },
                data: data
            }]
        };
        this.options = option
      }
    },

  }
</script>

<style lang="less" scoped="scoped">
  #cmp5{
    width: 100%;
        height: 100%;
        display: flex;
        .left,.right{
          height:100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .left{
          width: 40%;
        }
        .right{
          width: 60%;
        }
        .up {
          width: 100%;
          box-sizing: border-box;
          .item {
            display: flex;
            align-items: center;
            border-radius: 0.0625rem;
            height: 0.6rem;
            margin-left: .25rem;
          }
        }
  }
</style>
