| | |
| | | <div class="main_content"> |
| | | <div class="type_wrap"> |
| | | <div class="title">全年入园人员趋势</div> |
| | | <div class="echart1" ref="typeRef" v-if="info.cumulativeDataList"></div> |
| | | <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-else> |
| | | <div class="echart1" ref="typeRef" v-show="info.cumulativeDataList"></div> |
| | | <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="!info.cumulativeDataList"> |
| | | <img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | placeholder="请选择"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div class="echart2" ref="deptRef" v-if="listZB.length > 0"></div> |
| | | <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-else> |
| | | <div id="echart2" v-show="listZB.length > 0"></div> |
| | | <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="listZB.length === 0"> |
| | | <img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | getRataList({ dateStr: this.value, isGroupBy: this.isGroupBy, type: 1 }) |
| | | .then(res => { |
| | | this.listZB = res |
| | | this.$nextTick(() => { |
| | | // this.$nextTick(() => { |
| | | // this.initDept() |
| | | // }) |
| | | setTimeout(() => { |
| | | this.initDept() |
| | | }) |
| | | }, 1000) |
| | | }) |
| | | }, |
| | | // 基础数据 |
| | | getData() { |
| | | getInParkUserData({ isGroupBy: this.isGroupBy, type: 1 }).then(res => { |
| | | this.info = res |
| | | this.$nextTick(() => { |
| | | // this.$nextTick(() => { |
| | | // this.initType() |
| | | // }) |
| | | setTimeout(() => { |
| | | this.initType() |
| | | }) |
| | | }, 1000) |
| | | }) |
| | | }, |
| | | // 全年入园车辆趋势 |
| | |
| | | data: names |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true |
| | | } |
| | | }, |
| | | graphic: { |
| | | elements: [ |
| | | { |
| | | type: 'text', |
| | | left: 'left', |
| | | top: 'top', |
| | | style: { |
| | | text: '人员数', |
| | | textAlign: 'center', |
| | | fill: '#333' |
| | | } |
| | | } |
| | | ] |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | initDept() { |
| | | if (!this.listZB) return |
| | | |
| | | const myChart = echarts.init(document.querySelector('.echart2')) |
| | | const dom = document.getElementById('echart2') |
| | | console.log(dom) |
| | | const myChart = echarts.init(dom) |
| | | |
| | | let data = this.listZB.map(item => { |
| | | return { |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | height: 400px; |
| | | height: 350px; |
| | | |
| | | .title { |
| | | font-weight: 500; |
| | |
| | | .echart1 { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin-top: 18px; |
| | | } |
| | | } |
| | | |
| | |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | margin-left: 10px; |
| | | .echart2 { |
| | | #echart2 { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |