<template>
  <div id="cmp1">
    <div class="top">
      <div v-if="numberConfig">
        {{numberConfig.title}}
        <dv-digital-flop :config="numberConfig" class="number" />
      </div>
      <div v-if="numberConfig1">
        {{numberConfig1.title}}
        <dv-digital-flop :config="numberConfig1" class="number" />
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-content">
        <Echart
        width="40%"
        height="100%"
          :options="options"
          id="cmp1circle"
        ></Echart>
        <Echart
        width="60%"
        height="100%"
          :options="options2"
          id="cmp2circle"
        ></Echart>
      </div>
      <Label-Tag class="Label-Tag" :config="labelConfig" />
    </div>
  </div>
</template>

<script>
    var timerId = null;
  import Echart from '../../common/echart'
  import LabelTag from '../LabelTag'
  export default{
    components:{
      LabelTag,
      Echart
    },
    props:{
      count1:{
        type:String,
        default:''
      },
      count2:{
        type:String,
        defalut:''
      },
      labelData:{
        type:Array
      }
    },
    data(){
      return{
        labelConfig: {
          colors:['#A098FC','#4386FA','#4FADFD','#0CD3DB','#646CF9'],
          data: ['空置', '居住','出租','商用','其它']
        },
        numberConfig:{
          title:'房屋总量',
          number: [3946],
          content: '{nt}房',
          style:{
            fontSize:18,
            fill:'#37a2da',
          },
        },
        numberConfig1:{
          title:'入住率',
          number: [85],
          content: '{nt}%',
          style:{
            fontSize:18,
            fill:'#37a2da',
          },
        },
        options:{},
        options2:{
          grid:{
            top:'10%',
            bottom:'18%',
            left:'20%',
            right:'5%'
          },
              xAxis: {
                  data: ['2015', '2016', '2017', '2018', '2019', '2020'],
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          color: 'rgba(255, 129, 109, 0.1)',
                          width: 1 //这里是为了突出显示加上的
                      }
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#999',
                          fontSize: 9
                      }
                  }
              },
              yAxis: [{
                  splitNumber: 5,
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          color: 'rgba(255, 129, 109, 0.1)',
                          width: 1 //这里是为了突出显示加上的
                      }
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#999',
                          fontSize:9
                      }
                  },
                  splitArea: {
                      areaStyle: {
                          color: 'rgba(255,255,255,.5)'
                      }
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(255, 129, 109, 0.1)',
                          width: 0.5,
                          type: 'dashed'
                      }
                  }
              }],
                series: [
                  {
                    name: 'hill',
                    type: 'pictorialBar',
                    barCategoryGap: '0%',
                    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                    // label: {
                    //     show: true,
                    //     position: 'top',
                    //     distance: 15,
                    //     color: '#b73a35',
                    //     fontWeight: 'bolder',
                    //     fontSize: 12,
                    // },
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#5433f7' //  0%  处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#f24c44' //  100%  处的颜色
                                    }
                                ],
                                global: false //  缺省为  false
                            }
                        },
                        emphasis: {
                            opacity: 1
                        }
                    },
                    data: [12322, 12332, 12231, 51465, 55554, 93121],
                    z: 10
                  }
                ]
        },
      }
    },
    mounted() {
      this.drawFun()
    },
     methods:{
          drawFun(){
            var data = [];
                     var trafficWay = [{
                         name: '空置',
                         value: 158951
                     }, {
                         name: '居住',
                         value: 395452
                     }, {
                         name: '出租',
                         value: 105256
                     },{
                         name: '商用',
                         value: 315210
                     },{
                         name: '其它',
                         value: 254565
                     }];
            var color = ['#A098FC','#4386FA','#4FADFD','#0CD3DB','#646CF9','#173164']
            for (var i = 0; i < trafficWay.length; i++) {
              data.push({
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                    normal: {
                        // borderWidth: 5,
                        shadowBlur: 10,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
              })
            }
            let _this = this;
             let angle = 0; //角度，用来做简单的动画效果的
             let value = 80;
             let options = {
                  name:'',
                  color,
                 // title: {
                 //     text: '{a|' + value + '}{c|%}',
                 //     x: 'center',
                 //     y: 'center',
                 //     textStyle: {
                 //         rich: {
                 //             a: {
                 //                 fontSize: 12,
                 //                 color: '#29EEF3'
                 //             },

                 //             c: {
                 //                 fontSize: 10,
                 //                 color: '#ffffff',
                 //                 // padding: [5,0]
                 //             }
                 //         }
                 //     }
                 // },

                 series: [{
                         name: "ring5",
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             return {
                                 type: 'arc',
                                 shape: {
                                     cx: api.getWidth() / 2,
                                     cy: api.getHeight() / 2,
                                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.9,
                                     startAngle: (0 + angle) * Math.PI / 180,
                                     endAngle: (90 + angle) * Math.PI / 180
                                 },
                                 style: {
                                     stroke: "#8383FA",
                                     fill: "transparent",
                                     lineWidth: 1.5,
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     }, {
                         name: "ring5", //紫点
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             let x0 = api.getWidth() / 2;
                             let y0 = api.getHeight() / 2;
                             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.9;
                             let point = getCirlPoint(x0, y0, r, (90 + angle))
                             return {
                                 type: 'circle',
                                 shape: {
                                     cx: point.x,
                                     cy: point.y,
                                     r: 2
                                 },
                                 style: {
                                     stroke: "#8450F9", //绿
                                     fill: "#8450F9"
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     },
                     // 蓝色

                     {
                         name: "ring5",
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             return {
                                 type: 'arc',
                                 shape: {
                                     cx: api.getWidth() / 2,
                                     cy: api.getHeight() / 2,
                                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.9,
                                     startAngle: (180 + angle) * Math.PI / 180,
                                     endAngle: (270 + angle) * Math.PI / 180
                                 },
                                 style: {
                                     stroke: "#4386FA",
                                     fill: "transparent",
                                     lineWidth: 1.5
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     },
                     {
                         name: "ring5", // 蓝色
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             let x0 = api.getWidth() / 2;
                             let y0 = api.getHeight() / 2;
                             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.9;
                             let point = getCirlPoint(x0, y0, r, (180 + angle))
                             return {
                                 type: 'circle',
                                 shape: {
                                     cx: point.x,
                                     cy: point.y,
                                     r: 2
                                 },
                                 style: {
                                     stroke: "#4386FA", //绿
                                     fill: "#4386FA"
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     },

                     {
                         name: "ring5",
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             return {
                                 type: 'arc',
                                 shape: {
                                     cx: api.getWidth() / 2,
                                     cy: api.getHeight() / 2,
                                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                                     startAngle: (270 + -angle) * Math.PI / 180,
                                     endAngle: (40 + -angle) * Math.PI / 180
                                 },
                                 style: {
                                     stroke: "#0CD3DB",
                                     fill: "transparent",
                                     lineWidth: 1.5
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     },
                     // 橘色

                     {
                         name: "ring5",
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             return {
                                 type: 'arc',
                                 shape: {
                                     cx: api.getWidth() / 2,
                                     cy: api.getHeight() / 2,
                                     r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                                     startAngle: (90 + -angle) * Math.PI / 180,
                                     endAngle: (220 + -angle) * Math.PI / 180
                                 },
                                 style: {
                                     stroke: "#FF8E89",
                                     fill: "transparent",
                                     lineWidth: 1.5
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     }, {
                         name: "ring5",
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             let x0 = api.getWidth() / 2;
                             let y0 = api.getHeight() / 2;
                             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8;
                             let point = getCirlPoint(x0, y0, r, (90 + -angle))
                             return {
                                 type: 'circle',
                                 shape: {
                                     cx: point.x,
                                     cy: point.y,
                                     r: 2
                                 },
                                 style: {
                                     stroke: "#FF8E89", //粉
                                     fill: "#FF8E89"
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     }, {
                         name: "ring5", //绿点
                         type: 'custom',
                         coordinateSystem: "none",
                         renderItem: function(params, api) {
                             let x0 = api.getWidth() / 2;
                             let y0 = api.getHeight() / 2;
                             let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8;
                             let point = getCirlPoint(x0, y0, r, (270 + -angle))
                             return {
                                 type: 'circle',
                                 shape: {
                                     cx: point.x,
                                     cy: point.y,
                                     r: 2
                                 },
                                 style: {
                                     stroke: "#0CD3DB", //绿
                                     fill: "#0CD3DB"
                                 },
                                 silent: true
                             };
                         },
                         data: [0]
                     }, {
                         name: '2',
                         type: 'pie',
                         // radius: ['52%', '40%'],
                         radius: ['52%', '70%'],
                         startAngle: 90,
                         zlevel: 10,
                         hoverAnimation: false,
                         label: {
                             normal: {
                                 position: "center",
                                  show:false,
                                  formatter: params => {
                                      return (
                                          params.name + '\n' + params.percent.toFixed(0) + '%'
                                      );
                                  },
                             },
                         },
                         emphasis: {
                             label: {
                                 show: true,
                                 fontSize: '12',
                                 fontWeight: 'bold',
                                 position:'center'
                             },
                         },
                         data
                     },
                     {
                         name: '',
                         type: 'pie',
                         radius: ['45%', '42%'],
                         silent: true,
                         clockwise: true,
                         startAngle: 270,
                         z: 0,
                         zlevel: 0,
                         label: {
                             normal: {
                                 position: "center",
                             }
                         },
                         data: [{
                                 value: value,
                                 name: "",
                                 itemStyle: {
                                     normal: {
                                         color: { // 完成的圆环的颜色
                                             colorStops: [{
                                                 offset: 0,
                                                 color: '#00EDF3' // 0% 处的颜色
                                             }, {
                                                 offset: 1,
                                                 color: '#646CF9' // 100% 处的颜色
                                             }]
                                         },
                                     }
                                 }
                             },
                             {
                                 value: 100 - value,
                                 name: "",
                                 label: {
                                     normal: {
                                         show: false
                                     }
                                 },
                                 itemStyle: {
                                     normal: {
                                         color: "#173164"
                                     }
                                 }
                             }
                         ]
                     },]
             };

             //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
             function getCirlPoint(x0, y0, r, angle) {
                 let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                 let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                 return {
                     x: x1,
                     y: y1
                 }
             }
            function draw(){
                options.name = angle
                angle = angle+3
                _this.options = options
            }
            if(timerId){
              clearInterval(timerId);
            }
            timerId = setInterval(function() {
                //用setInterval做动画感觉有问题
                draw()
            }, 100);

          },

        },
        destroyed() {
          clearInterval(timerId)
        }
  }
</script>

<style lang="less" scoped>
  #cmp1{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .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: .6rem;
      bottom: 0;
      box-sizing: border-box;
    }
    .bottom-content{
      box-sizing: border-box;
      position: absolute;
      top: 0;
      bottom: .4rem;
      width: 100%;
      display: flex;
    }
    .bottom-left{
      width: 40%;
      height: 70%;
    }
    .dv-charts{
      width: 60%;
    }
    .Label-Tag{
      position: absolute;
      left: .5rem;
      bottom: .1rem;
    }
  }
</style>
