| | |
| | | </div> |
| | | </div> |
| | | <div class="sub-tab" v-show="peopletype == 0"> |
| | | <div |
| | | class="tab3" |
| | | :class="{ 'select-on-tab': tabType == 0 }" |
| | | @click="personTabClick(0)" |
| | | > |
| | | <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> |
| | | <div class="num">164.57万人</div> |
| | | <div class="type">户籍人口</div> |
| | | </div> |
| | | <div |
| | | class="tab3" |
| | | :class="{ 'select-on-tab': tabType == 1 }" |
| | | @click="personTabClick(1)" |
| | | > |
| | | <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)"> |
| | | <div class="num">17.52万人</div> |
| | | <div class="type">流动人口</div> |
| | | </div> |
| | | <div |
| | | class="tab3" |
| | | :class="{ 'select-on-tab': tabType == 2 }" |
| | | @click="personTabClick(2)" |
| | | > |
| | | <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)"> |
| | | <div class="num">91995人</div> |
| | | <div class="type">境外人口</div> |
| | | </div> |
| | | </div> |
| | | <div id="PersonEcharts" class="echarts-box"></div> |
| | | <div |
| | | class="back" |
| | | title="返回上一级" |
| | | v-show="dataDeep == 2 && peopletype == 0" |
| | | @click="backBegin" |
| | | ></div> |
| | | <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div> |
| | | </div> |
| | | <div class="house-box"> |
| | | <div class="title">现有房屋</div> |
| | | <div class="sub-tab"> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeTwo == 0 }" |
| | | @click="houseTabClick(0)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> |
| | | <div class="tab-title-small">实有房屋:</div> |
| | | <div class="tab-title-small">182万户</div> |
| | | </div> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeTwo == 1 }" |
| | | @click="houseTabClick(1)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)"> |
| | | <div class="tab-title-small">关注场所:</div> |
| | | <div class="tab-title-small">634个</div> |
| | | </div> |
| | |
| | | <div class="land-box"> |
| | | <div class="title">现有地</div> |
| | | <div class="sub-tab"> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeThree == 0 }" |
| | | @click="landTabClick(0)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> |
| | | <div class="tab-title-small">小区:</div> |
| | | <div class="tab-title-small">634个</div> |
| | | </div> |
| | | <div |
| | | class="tab" |
| | | :class="{ 'select-on-tab': tabTypeThree == 1 }" |
| | | @click="landTabClick(1)" |
| | | > |
| | | <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)"> |
| | | <div class="tab-title-small">责任区:</div> |
| | | <div class="tab-title-small">634个</div> |
| | | </div> |
| | |
| | | |
| | | initLandOptions (xDate, yDate) { |
| | | return { |
| | | grid: { |
| | | top: '4%', |
| | | left: '12%', |
| | | right: '4%', |
| | | bottom: '18%' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: params => { |
| | |
| | | }, |
| | | } |
| | | ], |
| | | grid: { |
| | | x: 40, |
| | | y: 10, |
| | | x2: 20, |
| | | y2: 20 |
| | | }, |
| | | // zoomData: [ // 有滚动条 平移 |
| | | dataZoom: [ // 有滚动条 平移 |
| | | { |
| | |
| | | color: #fff; |
| | | } |
| | | |
| | | & > div:nth-of-type(2) { |
| | | &>div:nth-of-type(2) { |
| | | font-size: 14px; |
| | | } |
| | | } |
| | |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | |
| | | & > div { |
| | | &>div { |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |