| | |
| | | <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> |
| | | |
| | | <el-card> |
| | | <div class="chart-container" ref="chart"></div> |
| | | <el-card v-loading="loading"> |
| | | <div class="chart-container" ref="lineChart" v-show="!isNoData"></div> |
| | | <el-empty v-show="isNoData" :image-size="200" /> |
| | | </el-card> |
| | | |
| | | </el-main> |
| | | </el-container> |
| | | </div> |
| | |
| | | <script> |
| | | import * as echarts from 'echarts' |
| | | |
| | | import axiosInstance from '../../../utils/request.js' |
| | | import axiosInstanceInstance from '../../../utils/request.js' |
| | | export default { |
| | | data() { |
| | | return { |
| | | isNoData:false, |
| | | chart:null, |
| | | loading:false, |
| | | chartData: [], //保存查询的结果 |
| | | //devId:'', //设备编号 |
| | | begin:'2023-05-01', //开始时间 |
| | |
| | | mounted(){ |
| | | // 默认加载付小姐在成都 5月1号到15号的 |
| | | this.fetchData() |
| | | window.addEventListener('resize',this.updateChart) |
| | | }, |
| | | methods: { |
| | | |
| | |
| | | if(this.end){ |
| | | params['end'] = this.end |
| | | } |
| | | |
| | | axiosInstance.get('/data/id',{params:params}) |
| | | this.loading = true |
| | | axiosInstanceInstance.get('/data/id',{params:params}) |
| | | .then(response => { |
| | | this.chartData = response.data.data |
| | | this.loading = false |
| | | if(response.data.data.length==0){ |
| | | alert('该时段无数据') |
| | | this.isNoData = true |
| | | return |
| | | } |
| | | // 移除空数据状态 |
| | | this.isNoData = false |
| | | this.drawChart() |
| | | }) |
| | | }, |
| | |
| | | keyExceeding.push(item.keyExceedingRate.slice(0,-1)) |
| | | }) |
| | | |
| | | let chart = echarts.init(this.$refs.chart) |
| | | chart.setOption({ |
| | | this.chart = echarts.init(this.$refs.lineChart) |
| | | this.chart.setOption({ |
| | | title: { |
| | | text: '比率', |
| | | //left: 'center' |
| | |
| | | type: 'line', |
| | | data: keyExceeding |
| | | }, |
| | | |
| | | |
| | | |
| | | ] |
| | | |
| | | }) |
| | | }, |
| | | updateChart(){ |
| | | this.chart.resize() |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style scoped> |
| | | .el-card { |
| | | margin-top: 40px; |
| | | margin-top: 50px; |
| | | width:90%; |
| | | border-radius: 9px; |
| | | } |
| | | .chart-container { |
| | | width: 100%; |
| | | height: 600px; |
| | | |
| | | width:100%; |
| | | height: 540px; |
| | | } |
| | | .el-header { |
| | | background-color: #010408; |
| | | color: #333; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | :deep().el-form .el-form-item__label{ |
| | | color: #000000; |
| | | font-weight: bold; |
| | | } |
| | | </style> |