nyyzt/src/components/loadding/index.vue

<template>
  <!-- v-show="this.randomVal !=100" -->
  <div class="loadding"  v-show="show">
     <div id="fourth"></div>
  </div>
</template>

<script>
export default {
  props:['loaddingShow'],
  data() {
    return {
      option:null,
      timer:null,
      myChart:null,
      randomVal:20,
      show:true,
    };
  },
  watch:{
    loaddingShow(newVal){
      this.randomVal =newVal
      this.option.series[0].data[0].value = this.randomVal;//定时更新圆环1数值
      this.option.series[0].data[1].value = 100 - this.randomVal;//圆环1无颜色填充区域占比
      this.option.series[1].data[0].value = this.randomVal;//定时更新圆环2数值
      this.option.series[1].data[1].value = 100 - this.randomVal;//圆环2无颜色填充区域占比
      this.myChart.setOption(this.option, true);
      setTimeout(() => {
        this.show =false
      }, 200);
  
    },
    randomVal(newVal){
      if(newVal ==100){
        setTimeout(() => {
          this.show =false
        }, 200);
      }
    }
  },
  mounted() {
    this.drawCharts();
  },
  methods: {
    drawCharts() {
      this.myChart = this.$echarts.init(document.getElementById("fourth"));
      this.option =this.getOption();
      this.myChart.setOption(this.option);
      this.settInterval();
    },
    getRandomVal(){
      var maxVal = 100;//圆环极大值
      var randomVal = (Math.random() * 100).toFixed(2) - 0;
      return ((randomVal / maxVal) * 100).toFixed(2);
    },
    /**
     * @author wg
     * @protected 设置时间
     * @param
     */
    settInterval(){
      let _this= this;
      this.timer = setInterval(function () {//定时调用刷新
        if(_this.randomVal >=90){
            clearInterval(_this.timer) 
            _this.timer =null;
          }
          let math = Math.random()
          _this.randomVal += math.toFixed(1)*15
          _this.option.series[0].data[0].value = _this.randomVal;//定时更新圆环1数值
          _this.option.series[0].data[1].value = 100 - _this.randomVal;//圆环1无颜色填充区域占比
          _this.option.series[1].data[0].value = _this.randomVal;//定时更新圆环2数值
          _this.option.series[1].data[1].value = 100 - _this.randomVal;//圆环2无颜色填充区域占比
          _this.myChart.setOption(_this.option, true);
     
      },1000);
    },
    /**
     * @author wg
     * @protected 得到echart参数
     * @param
     */
    getOption(){
      let _this = this;
      var maxVal = 100;//圆环极大值
      var textStyle={
          "fontSize": 16,
          "fontWeight": "bold",
          "fontFamily":'华文细黑'
      }
      
      var itemStyle={
          "normal": {
              "label": {
                  "show": false
              },
              "labelLine": {
                  "show": false
              },
              "color": 'rgba(0,0,0,0)',
              "borderColor": 'rgba(0,0,0,0)',
              "borderWidth": 0
          },
          "emphasis": {
              "color": 'rgba(0,0,0,0)',
              "borderColor": 'rgba(0,0,0,0)',
              "borderWidth": 0
          }
      };
      return  {
          "title": {
              "text": '数据加载中，请稍等。。。',
              x: 'center',
              y: '75%',
              "textStyle": {
                  "fontSize": 16,
                  "color": 'rgba(255,255,255,1)'
              }
          },
          "tooltip": {
              "trigger": 'item',
              "formatter": "{a} : {d}%"
          },
          "series": [
            {
              "name": '负载',
              "center": ["50%","50%"],
              "radius": ["28%","30%"],
              "clockWise": false,
              "hoverAnimation": false,
              "type": "pie",
              "data": [{
                  "value": _this.randomVal,
                  "label": {
                      "normal": {
                          "show": true,
                          "formatter": '{d}%',
                          "textStyle":textStyle,
                          "position": "center",
                          "color": 'rgba(255,255,255,1)'
                      }
                  },
                  "labelLine": {
                      "show": false
                  },
                  "itemStyle": {
                      "normal": {
                          "color": "#5886f0",
                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#00a2ff'
                          }, {
                              offset: 1,
                              color: '#70ffac'
                          }]),
                          "borderWidth": 15
                      },
                      "emphasis": {
                          "color": "#5886f0",
                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#85b6b2'
                          }, {
                              offset: 1,
                              color: '#6d4f8d'
                          }]),
                          "borderWidth": 15
                      }
                  }
              }, {
                  "value": maxVal - _this.randomVal,
                  "itemStyle": itemStyle
              }]
          }, {
              "name": '负载',
              "center": [ "50%","50%"],
              "radius": ["40%","43%"],
              "clockWise": false,
              "hoverAnimation": false,
              "type": "pie",
              "data": [{
                  "value": _this.randomVal,
                  "label": {
                      "normal": {
                          "show": false,
                          "formatter": '',
                          "textStyle": textStyle,
                          "position": "center"
                      }
                  },
                  "labelLine": {
                      "show": false
                  },
                  "itemStyle": {
                      "normal": {
                          "color": "#5886f0",
                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#00a2ff'
                          }, {
                              offset: 1,
                              color: '#70ffac'
                          }]),
                          "borderWidth": 2
                      },
                      "emphasis": {
                          "color": "#5886f0",
                          "borderColor": new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#85b6b2'
                          }, {
                              offset: 1,
                              color: '#6d4f8d'
                          }]),
                          "borderWidth": 2
                      }
                  }
              }, {
                  "value": maxVal - _this.randomVal,
                  "itemStyle": itemStyle
              }]
          }]
      };
    },
  },
};
</script>
<style>
#fourth{
  position: relative;
  z-index: 3000;
  width:  50vw;
  height:  50vh;
  /* background: wheat; */
  top: 25vh;
  left: 25vw;

}
.loadding{
  position: fixed;
  width: 100vw;
  height: 100vh;
  text-align: center;
  z-index: 3000;
  top: 0;
  left: 0;
  background: #000000d4;
}
</style>