使用element-ui写百分比条效果图如下下载element-ui npm i element-ui 在main.j

效果图如下

下载element-ui

npm i element-ui

在main.js注册

微信截图_20220712163616.png

App.vue中的代码设置尺寸

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  mounted() {
    this.autofit();
    window.onresize = this.autofit;
  },
  methods: {
    autofit() {
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      const w = 1920; //设计稿规定分辨率
      const H = 1080;
      const scalew = width / w;
      const scaleH = height / H;
      // console.log(width, height);
      // console.log(scalew, scaleH);
      const scale = scalew > scaleH ? scaleH : scalew;
      const $app = document.getElementById("app");
      $app.style.transform = `scale(${scale})`;
      $app.style.transformOrigin = "0% 0%";
      $app.style.position = "absolute";
      if (scalew > scaleH) {
        $app.style.left = `${(width - scale * w) / 2}px`;
      } else {
        $app.style.top = `${(height - scale * H) / 2}px`;
      }
    },
  },
};
</script>
<style lang="less">
html,
body {
  margin: 0px;
  overflow: hidden;
  background-color: black;
}

#app {
  width: 1920px;
  height: 1080px;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

p {
  margin: 0;
}
</style>

展示页的代码

关于element进度条el-progress的一些属性设置直接看这个

Progress 进度条 (组件) - Element UI 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云 (tencent.com)

<template>
  <div class="attackSource">
    <!-- 总攻击次数 -->
    <p>总数{{ totalSumAll }}</p>

    <div class="myChart">
      <!-- 进度百分比条模块 -->
      <!-- 有5个随机数 ， 随机数相加等于 顶部右边数值，每个随机数除以总数 得到每个百分比 -->
      <div class="line line1">
        <p>
          TOP1.<i>{{ data[0].ip }}</i
          ><i>{{ data[0].name }}</i
          ><i>{{ data[0].num }}</i>
        </p>
        <el-progress
          class="mgt"
          :stroke-width="7"
          :percentage="re[0]"
          :show-text="false"
        ></el-progress>
      </div>

      <div class="line line2">
        <p>
          TOP2.<i>{{ data[1].ip }}</i
          ><i>{{ data[1].name }}</i
          ><i>{{ data[1].num }}</i>
        </p>
        <el-progress
          class="mgt"
          :text-inside="false"
          :stroke-width="7"
          :percentage="re[1]"
          :show-text="false"
        ></el-progress>
      </div>

      <div class="line line3">
        <p>
          TOP3.<i>{{ data[2].ip }}</i
          ><i>{{ data[2].name }}</i
          ><i>{{ data[2].num }}</i>
        </p>
        <el-progress
          class="mgt"
          :text-inside="false"
          :stroke-width="7"
          :percentage="re[2]"
          :show-text="false"
        ></el-progress>
      </div>

      <div class="line line4">
        <p>
          TOP4.<i>{{ data[3].ip }}</i
          ><i>{{ data[3].name }}</i
          ><i>{{ data[3].num }}</i>
        </p>
        <el-progress
          class="mgt"
          :text-inside="false"
          :stroke-width="7"
          :percentage="re[3]"
          :show-text="false"
        ></el-progress>
      </div>

      <div class="line line5">
        <p>
          TOP5.<i>{{ data[4].ip }}</i
          ><i>{{ data[4].name }}</i
          ><i>{{ data[4].num }}</i>
        </p>
        <el-progress
          class="mgt"
          :text-inside="false"
          :stroke-width="7"
          :percentage="re[4]"
          :show-text="false"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { ip: "207.226.141.205", name: "美国", num: 0 },
        { ip: "96.255.85.160", name: "美国", num: 0 },
        { ip: "104.191.108.168", name: "美国", num: 0 },
        { ip: "185.185.122.6", name: "俄罗斯", num: 0 },
        { ip: "178.47.131.242", name: "俄罗斯", num: 0 },
        { ip: "148.233.178.30", name: "墨西哥", num: 0 },
        { ip: "221.113.227.148", name: "日本", num: 0 },
        { ip: "221.121.196.136", name: "日本", num: 0 },
        { ip: "221.124.43.180", name: "中国香港", num: 0 },
        { ip: "202.102.79.141", name: "中国南京", num: 0 },
        { ip: "203.86.91.118", name: "中国北京", num: 0 },
        { ip: "203.88.202.118", name: "中国广州", num: 0 },
      ],
      randomNumber: 0, //随机数
      totalSumAll: 0, //添加随机数后的数据
      re: [], //百分比数组
      timerId: null,
    };
  },

  mounted() {
    this.addNumToData();
    this.compare();
    this.percentage();
    this.startInterval();
  },
  destroyed() {
    clearInterval(this.timerId);
  },
  methods: {
    //根据最小值和最大值产生一个随机数
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },

    // 在data中添加随机数值 使得数据一直有变化，如果是实际项目应该监听websocket的数据
    addNumToData() {
      this.data.map((item, index) => {
        this.randomNumber = this.getRandom(300, 1000); //生成随机整数
        item.num = this.randomNumber;
      });
    },

    //比较随机数 得出右上角总和
    compare() {
      this.data.sort((a, b) => {
        return b.num - a.num;
      });
      // console.log(this.data);
      let topResult = this.data.slice(0, 5);
      this.totalSumAll = 0;
      topResult.map((item) => {
        this.totalSumAll += item.num;
      });
      return this.totalSumAll;
    },

    //求出每个值 和 每个值的百分比数组
    percentage() {
      let topResult = this.data.slice(0, 5);
      topResult.map((item, index) => {
        let baifenbi = Math.round((item.num / this.totalSumAll) * 100);
        this.re.push(baifenbi); //百分比数组
      });
    },

    //计时器
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.addNumToData();
        this.compare();
        this.percentage();
      }, 3000);
    },
  },
};
</script>

<style lang="less" >

.attackSource {
  width: 1007px;
  height: 627px;
  p {
    position: absolute;
    left: 649px;
    top: 26px;
    font-size: 42px;
    font-family: "DINPro-Regular";
    color: #ffffff;
  }
}

.myChart {
  position: absolute;
  left: 107px;
  top: 118px;
  margin-bottom: 15px;
  margin-left: 20px;
  width: 700px;
  height: 490px;
  // background-color: violet;

  .line {
    position: absolute;
    width: 700px;
    top: 0px;
    left: 0px;
    p {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 700px;
      height: 50px;
      font-size: 36px;
      font-family: "DINPro-Bold";
      color: #fe8c26;

      i {
        font-style: normal;
      }

      & > i:nth-child(1) {
        font-size: 36px;
        font-family: "DINPro-Bold";
        color: #ffffff;
      }

      & > i:nth-child(2) {
        position: absolute;
        bottom: 0;
        font-size: 30px;
        font-family: "SourceHanSansCN-Regular";
        color: #ffffff;
        margin-left: 20px;
        line-height: 50px;
      }

      & > i:nth-child(3) {
        position: absolute;
        right: 0;
        font-size: 36px;
        font-family: "DINPro-Bold";
        color: #ff8920;
      }
    }
    .mgt {
      margin-top: 55px;
    }
  }

  .line1 {
    .el-progress-bar__outer {
      background-color: rgba(254, 140, 38, 0.2);
    }

    .el-progress-bar__inner {
      background-color: #fe8c26;
    }
  }

  .line2 {
    position: absolute;
    width: 700px;
    top: 90px;
    .el-progress-bar__outer {
      background-color: rgba(254, 140, 38, 0.2);
    }
    .el-progress-bar__inner {
      background-color: #fe8c26;
    }
  }

  .line3 {
    position: absolute;
    width: 700px;
    top: 180px;
    .el-progress-bar__outer {
      background-color: rgba(254, 140, 38, 0.2);
    }
    .el-progress-bar__inner {
      background-color: #fe8c26;
    }
  }

  .line4 {
    position: absolute;
    width: 700px;
    top: 270px;
    p {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 700px;
      height: 50px;
      font-size: 36px;
      font-family: "DINPro-Bold";
      color: #00fff0;

      i {
        font-style: normal;
      }

      & > i:nth-child(1) {
        font-size: 36px;
        font-family: "DINPro-Bold";
        color: #ffffff;
      }

      & > i:nth-child(2) {
        position: absolute;
        bottom: 0;
        font-size: 30px;
        font-family: "SourceHanSansCN-Regular";
        color: #ffffff;
        margin-left: 20px;
        line-height: 50px;
      }

      & > i:nth-child(3) {
        position: absolute;
        right: 0;
        font-size: 36px;
        font-family: "DINPro-Bold";
        color: #00fff0;
      }
    }
    .el-progress-bar__outer {
      background-color: rgba(37, 133, 255, 0.2);
    }

    .el-progress-bar__inner {
      background-color: #014eb0;
    }
  }

  .line5 {
    position: absolute;
    width: 700px;
    top: 360px;
    p {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 700px;
      height: 50px;
      font-size: 36px;
      font-family: "DINPro-Bold";
      color: #00fff0;

      i {
        font-style: normal;
      }

      & > i:nth-child(1) {
        font-size: 36px;
        font-family: "DINPro-Bold";
        color: #ffffff;
      }

      & > i:nth-child(2) {
        position: absolute;
        bottom: 0;
        font-size: 30px;
        font-family: "SourceHanSansCN-Regular";
        color: #ffffff;
        margin-left: 20px;
        line-height: 50px;
      }

      & > i:nth-child(3) {
        position: absolute;
        right: 0;
        font-size: 36px;
        font-family: "DINPro-Bold";
        color: #00fff0;
      }
    }

    .el-progress-bar__outer {
      background-color: rgba(37, 133, 255, 0.2);
    }

    .el-progress-bar__inner {
      background-color: #014eb0;
    }
  }
}
</style>