| | |
| | | <template> |
| | | <div> |
| | | <el-container> |
| | | <!-- <el-header style="text-align:right; font-size:15px "> |
| | | <i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i> |
| | | <span style="color:rgb(226,207,207);">百分比数据</span> |
| | | </el-header> --> |
| | | |
| | | <el-main> |
| | | <el-form :inline="true" class="demo-form-inline"> |
| | |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button type="primary" @click="fetchData">展示图</el-button> |
| | | <el-button type="primary" :loading="button.showChartButton" @click="fetchData">展示图</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | button:{ |
| | | // 展示图的按钮 |
| | | showChartButton:false, |
| | | }, |
| | | isNoData:false, |
| | | chart:null, |
| | | loading:false, |
| | |
| | | params['end'] = this.end |
| | | } |
| | | this.loading = true |
| | | this.button.showChartButton = true |
| | | axiosInstanceInstance.get('/data/id',{params:params}) |
| | | .then(response => { |
| | | this.chartData = response.data.data |
| | | this.loading = false |
| | | this.button.showChartButton = false |
| | | if(response.data.data.length==0){ |
| | | alert('该时段无数据') |
| | | this.isNoData = true |
| | |
| | | |
| | | this.chart = echarts.init(this.$refs.lineChart) |
| | | this.chart.setOption({ |
| | | title: { |
| | | text: '比率', |
| | | //left: 'center' |
| | | }, |
| | | |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | |
| | | |
| | | legend: { |
| | | data: ['净化器开启率','超标率','数据有效率','日在线率','中午在线率','晚上在线率','重点时段在线率','中午有效率','晚上有效率','重点时段有效率','中午开启率','晚上开启率','重点时段开启率','中午超标率','晚上超标率','重点时段超标率'], |
| | | //type: "scroll" |
| | | |
| | | }, |
| | | toolbox: { //工具栏 |
| | | top:20, |
| | |
| | | color: #333; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | :deep().el-form .el-form-item__label{ |
| | | color: #000000; |
| | | font-weight: bold; |
| | | } |
| | | </style> |