<template> <div v-loading="loading" element-loading-text="数据加载中"> <VBar1 :data="data" style="width: 100%;" max-height="700" v-if="isFlag" /> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="year" label="年份" align="center" width="100" /> <el-table-column prop="number" label="设施数量" align="center" /> <el-table-column prop="maximum" label="最大调蓄容积" align="center" /> <el-table-column prop="resources" label="雨水资源利用量" align="center" /> <el-table-column prop="resourcesRate" label="雨水资源利用率" align="center" /> </el-table> </div> </template> <script> import { runoffrateData } from '@/services'; import VBar1 from './VBar1'; export default { name: 'runoffrate', components: { VBar1 }, data() { return { isFlag: false, loading: false, tableData: [], data: { yTitle: '利用率', title: '雨水资源利用率', xData: [], data: [] } } }, methods: { async getData() { this.loading = true; let res = await runoffrateData(); this.loading = false; if (res.code === 200) { if (res.code === 200) { let _xData = []; let _data = []; this.tableData = res.data; res.data.length && res.data.map(item => { _xData.push(item.year); _data.push(parseFloat(item.resourcesRate)) }) this.data = { xData: _xData, data: _data } } this.isFlag = true } } }, mounted() { this.getData(); } } </script>