| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="person-box"> |
| | | <div class="person-box" style="position: relative;"> |
| | | <div class="title"> |
| | | <div class="title-tab"> |
| | | <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/ |
| | |
| | | </div> |
| | | <div id="PersonEcharts" class="echarts-box"></div> |
| | | <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div> |
| | | |
| | | <svg viewBox="0 0 412 318" width="100%" height="100%" style="position: absolute; top: 0; left: 0;"> |
| | | <path class="mypath" d="M405.09,274c5.12,7.31,5,9.67,5,9c0.08,11.9,0.04,11.37,0,28c-0.4,3.71-3.02,6.38-7,7 |
| | | c-8.96,0.04-8.98,0.02-17,0c-13,0-6,0-19,0c-2.94-1.33-7.88-6.6-9-10c-22,0-46,0-68,0c-0.88,4.03-4.72,8.32-8,10 |
| | | c-62.33,0-126.67,0-189,0c-30.33,0-28.67,0-59,0c-9.38,0,0,0-26,0c-4.46,0.38-8.33-3.92-8-8c0-14,0-14,0-28 |
| | | c0.01-6.31,0.03-6.11,0-17c-0.15-11.16-0.08-0.09,0-11c-0.09-1.9,5.85-7.66,7-7c0.01-30.52,0.03-49.4,0-68 |
| | | c-0.03-20.37,0.05-18.8,0-28c-2.73-2.26-4.43-3.86-7-7c0-3.33,0-5.67,0-9c0-9.33,0-9.67,0-19c0-35.33,0-76.67,0-112 |
| | | c0.23-1.72,1.53-4,3-4c129.17-0.01,110.27,0,167,0c3.91,0.82,10.18,7.27,11,10c16.67,0,33.34,0,50,0c57.66,0,114.34,0,172,0 |
| | | c3.71,0.55,5.63,2.19,7,6c0.16,21.48,0,49.56,0,71c0,43,0.08,90.17,0,133c0.08,6.67,0-4.75,0,7c-0.33,0-0.42,5.75-5,7 |
| | | c0.04,13.79-0.08,10.66,0,19C405.09,266.07,405.11,261,405.09,274" /> |
| | | </svg> |
| | | </div> |
| | | <div class="house-box"> |
| | | <div class="house-box" style="position: relative;"> |
| | | <div class="title">现有房屋</div> |
| | | <div class="sub-tab"> |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> |
| | |
| | | </div> |
| | | </div> |
| | | <div id="houseEcharts" class="echarts-box"></div> |
| | | <svg viewBox="0 0 412 318" width="100%" height="100%" style="position: absolute; top: 0; left: 0;"> |
| | | <path class="mypath" d="M405.09,274c5.12,7.31,5,9.67,5,9c0.08,11.9,0.04,11.37,0,28c-0.4,3.71-3.02,6.38-7,7 |
| | | c-8.96,0.04-8.98,0.02-17,0c-13,0-6,0-19,0c-2.94-1.33-7.88-6.6-9-10c-22,0-46,0-68,0c-0.88,4.03-4.72,8.32-8,10 |
| | | c-62.33,0-126.67,0-189,0c-30.33,0-28.67,0-59,0c-9.38,0,0,0-26,0c-4.46,0.38-8.33-3.92-8-8c0-14,0-14,0-28 |
| | | c0.01-6.31,0.03-6.11,0-17c-0.15-11.16-0.08-0.09,0-11c-0.09-1.9,5.85-7.66,7-7c0.01-30.52,0.03-49.4,0-68 |
| | | c-0.03-20.37,0.05-18.8,0-28c-2.73-2.26-4.43-3.86-7-7c0-3.33,0-5.67,0-9c0-9.33,0-9.67,0-19c0-35.33,0-76.67,0-112 |
| | | c0.23-1.72,1.53-4,3-4c129.17-0.01,110.27,0,167,0c3.91,0.82,10.18,7.27,11,10c16.67,0,33.34,0,50,0c57.66,0,114.34,0,172,0 |
| | | c3.71,0.55,5.63,2.19,7,6c0.16,21.48,0,49.56,0,71c0,43,0.08,90.17,0,133c0.08,6.67,0-4.75,0,7c-0.33,0-0.42,5.75-5,7 |
| | | c0.04,13.79-0.08,10.66,0,19C405.09,266.07,405.11,261,405.09,274" /> |
| | | </svg> |
| | | </div> |
| | | <div class="land-box"> |
| | | <div class="land-box" style="position: relative;"> |
| | | <div class="title">现有地</div> |
| | | <div class="sub-tab"> |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> |
| | |
| | | </div> |
| | | </div> |
| | | <div id="landEcharts" class="echarts-box"></div> |
| | | <svg viewBox="0 0 412 318" width="100%" height="100%" style="position: absolute; top: 0; left: 0;"> |
| | | <path class="mypath" d="M405.09,274c5.12,7.31,5,9.67,5,9c0.08,11.9,0.04,11.37,0,28c-0.4,3.71-3.02,6.38-7,7 |
| | | c-8.96,0.04-8.98,0.02-17,0c-13,0-6,0-19,0c-2.94-1.33-7.88-6.6-9-10c-22,0-46,0-68,0c-0.88,4.03-4.72,8.32-8,10 |
| | | c-62.33,0-126.67,0-189,0c-30.33,0-28.67,0-59,0c-9.38,0,0,0-26,0c-4.46,0.38-8.33-3.92-8-8c0-14,0-14,0-28 |
| | | c0.01-6.31,0.03-6.11,0-17c-0.15-11.16-0.08-0.09,0-11c-0.09-1.9,5.85-7.66,7-7c0.01-30.52,0.03-49.4,0-68 |
| | | c-0.03-20.37,0.05-18.8,0-28c-2.73-2.26-4.43-3.86-7-7c0-3.33,0-5.67,0-9c0-9.33,0-9.67,0-19c0-35.33,0-76.67,0-112 |
| | | c0.23-1.72,1.53-4,3-4c129.17-0.01,110.27,0,167,0c3.91,0.82,10.18,7.27,11,10c16.67,0,33.34,0,50,0c57.66,0,114.34,0,172,0 |
| | | c3.71,0.55,5.63,2.19,7,6c0.16,21.48,0,49.56,0,71c0,43,0.08,90.17,0,133c0.08,6.67,0-4.75,0,7c-0.33,0-0.42,5.75-5,7 |
| | | c0.04,13.79-0.08,10.66,0,19C405.09,266.07,405.11,261,405.09,274" /> |
| | | </svg> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | this.inithouseEcharts() |
| | | this.clickPeopleChart() |
| | | this.clickLandChart() |
| | | |
| | | |
| | | this.$nextTick(() => { |
| | | window.addEventListener("resize", this.echartsResize) |
| | |
| | | overflow-x: hidden !important; |
| | | } |
| | | } |
| | | |
| | | .mypath { |
| | | stroke: #05D380; |
| | | stroke-width: 2; |
| | | stroke-dasharray: 666; |
| | | stroke-dashoffset: 666; |
| | | fill: none; |
| | | animation: go 4s linear infinite forwards; |
| | | } |
| | | |
| | | @keyframes go { |
| | | 0% { |
| | | stroke-dashoffset: 666; |
| | | } |
| | | |
| | | 100% { |
| | | stroke-dashoffset: 0; |
| | | } |
| | | } |
| | | </style> |