<template>
  <div id="cmp1">
    <div class="item">
      <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>
      <Echart
        :options="options"
        id="cmp1"
        style="position: absolute;top: .4rem;"
      ></Echart>
    </div>
    <div class="item">
      <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>
      <dv-capsule-chart :config="config" style="width: 100%;position: absolute;top: .4rem;"/>
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  import centerRight2 from "../../components/centerRight2";
  export default{
    components:{
      Echart,
      centerRight2
    },
    data(){
      return{
        options:{},
        config: {
          data: [
            {
              name: "服务工单",
              value: 167
            },
            {
              name: "服务老人数",
              value: 1167
            },
            {
              name: "服务人员数",
              value: 56
            },
            {
              name: "待处理异常事件",
              value: 55
            },
            {
              name: "待处理紧急事件",
              value: 98
            }
          ]
        },
      }
    },
    mounted() {
      this.initPie()
    },
    methods:{
      initPie(){
        var img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAYAAACEYr13AAABWklEQVQ4jZXTsUscURTF4W91xBTRxsLOQhJJZWVlaZHGxsZGRLEJCYQkRcBCxMbC1kJIoY0gIhamSQIhhZV/Qap0KQJBEmKIFnFnVnnsQ53ZGXf3NsO78Dv3vDvn1aa/ftBlPcU5TgKWNBo9neIJ1vEcwzfNrNHbCTyCfUxiF/+7EZjBNobi+TBnK80qBfqxgdeoxd4ZPucEsiwpg0dxgIlC/wiXBQctArPR8mCJ8GGxkdRvBR5gE88qrvQbX1oE0rQvfJ9Ey+MVcKj3qJc5WMAWHt4DiwNaqvb407ey/hz22gie4mWSpi1LDI21NnAI1Sv8SupZX9n0sQrwJ17EfTSnFRyEw2oFHCL8Bn9yQD2fg3k8KoA/4q/9WKZ6N0jF6VfYwVv8rXCVE1iMEQ71PU7N5b5UIGs+prDJlTj1HZbxrx3cFGg+56UIT+G4E/CuQLjDQIzxRTcwXAMcrFZXC2wO/wAAAABJRU5ErkJggg==';

        var trafficWay = [{
            name: '80岁以上',
            value: 1564
        },{
            name: '60岁以上',
            value: 5210
        },{
            name: '40岁以上',
            value: 8310
        }];

        var data = [];
        var color = ['#f9b40f','#00fdff','#00b3f3'];
        for (var i = 0; i < trafficWay.length; i++) {
            data.push({
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        color:color[i]
                    }
                }
            });

        }
        var seriesOption = [{
            name: '1',
            type: 'pie',
            clockWise: false,
            radius: ['60%', '70%'],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        lineHeight:18,
                        color: '#ddd',
                        formatter: params => {
                            return (
                                params.name +'\n' + params.percent.toFixed(0) + '%'
                            );
                        },
                        textStyle: {
                                rich: {
                                    title: {
                                        fontSize: 12,
                                        color: "#fff"
                                    },
                                    value: {
                                        fontSize: 12,
                                        color: "#009afe"
                                    }
                                }
                            },
                    },
                    labelLine: {
                        length:10,
                        length2:20,
                        show: true,
                        color:'#00ffff'
                    }
                }
            },
            data: data
        },{
            name: '3',
            type: 'pie',
            clockWise: false,
            radius: ['28%', '40%'],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {show: false},
                    labelLine: { show:false}
                }
            },
            data: [
                {value: 4,itemStyle: {normal: {label: {show: false},labelLine: {show: false},color:'rgba(0,154,254,0.6)'}}},
                {value: 2,name: '',itemStyle: {normal: {label: {show: false},labelLine: {show: false},color: 'rgba(0, 0, 0, 0)',}}},
                {value: 2,itemStyle: {normal: {label: {show: false},labelLine: {show: false},color:'rgba(0,154,254,0.6)'}}},
                {value: 3,name: '',itemStyle: {normal: {label: {show: false},labelLine: {show: false},color: 'rgba(0, 0, 0, 0)',}}},
                {value: 5,itemStyle: {normal: {label: {show: false},labelLine: {show: false},color:'rgba(0,154,254,0.6)'}}},
                {value: 2,name: '',itemStyle: {normal: {label: {show: false},labelLine: {show: false},color: 'rgba(0, 0, 0, 0)',}}},
                {value: 2,itemStyle: {normal: {label: {show: false},labelLine: {show: false},color:'rgba(0,154,254,0.6)'}}},
                {value: 3,name: '',itemStyle: {normal: {label: {show: false},labelLine: {show: false},color: 'rgba(0, 0, 0, 0)',}}},
            ]
        },{
            name: '2',
            type: 'pie',
            radius: ['52%', '55%'],
            hoverAnimation: false,
            animation:false,
            itemStyle: {
                normal: {
                    label: {show: false},
                    labelLine: { show:false},
                    color:'rgba(2,154,254,0.6)',
                }
            },
            data: [1]
        },{
            name: '4',
            type: 'pie',
            radius: ['22%', '24%'],
            hoverAnimation: false,
            animation:false,
            itemStyle: {
                normal: {
                    label: {show: false},
                    labelLine: { show:false},
                    color:'rgba(2,154,254,0.6)',
                }
            },
            data: [{
                    value: 0,
                    name: '',
                    tooltip: {
                        show:false,     //取消鼠标放上去时会显示信息的样式
                    },
                    label: {
                        normal: {
                            formatter: '{c| }'+'\n' +'{b|}',
                            position: 'center',  //让文字居中
                            show: true,
                            rich: {
                                c: {
                                    backgroundColor: {
                                        // image: img,
                                    },
                                    offset:10,
                                    width:16,
                                    height:20,
                                    left:'center'  //让图片居中
                                },
                                b:{
                                    lineHeight:28,
                                },
                            }
                        },
                    }
                }]
        }];
                var colorList = ["#503EFF","#733DFF","#966EFF","#3E6DFF","#536EBF","#6E93FF","#5FEBFF","#8AF1FF","#8AF1FF"];
        let option = {

            title: {
                text: '',
                top: '50%',
                left: "center",
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: '400'
                }
            },
            tooltip: {
                show: false
            },
            legend: {
                show:false
            },
            toolbox: {
                show: false
            },
            center: ["50%", "50%"],
            series: seriesOption
        };
        this.options = option
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp1{
    width: 100%;
    height: 33.33%;
    display: flex;
    .item{
      width: 50%;
      height:100%;
      position:relative
    }
  }
</style>
