zmc
2023-08-15 9bfdf6ecef01397978c140aa4fbd8c4840d894fb
src/views/analysis/graph/AllRate.vue
@@ -1,10 +1,6 @@
<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">
@@ -45,9 +41,11 @@
     </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>
@@ -56,10 +54,13 @@
<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',         //开始时间
@@ -192,6 +193,7 @@
  mounted(){
    //  默认加载付小姐在成都 5月1号到15号的
      this.fetchData()
      window.addEventListener('resize',this.updateChart)
    },
  methods: {
    
@@ -215,10 +217,18 @@
      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()
        })
    },
@@ -271,8 +281,8 @@
        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'
@@ -394,12 +404,12 @@
          type: 'line',
          data: keyExceeding
        },
      ]
      })
    },
    updateChart(){
      this.chart.resize()
    }
  }
}
@@ -407,17 +417,21 @@
<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>