toplist组件

src/components/e-charts/toplist.vue

+<template>
+  <div class="top_list">
+    <ul>
+      <li class="item_list" v-for="(option, index) in options" :key="index">
+        <div class="item_index">
+          <span v-text="'TOP' + (index + 1)"></span>
+        </div>
+        <div class="item_logo">
+          <el-avatar shape="square" :size="32" fit="cover" :src="option.logo" />
+        </div>
+        <div class="item_detail">
+          <p class="item_info">
+            <span v-text="option.name"></span>
+            <span v-text="option.value + (option.unit || '次')"></span>
+          </p>
+          <div class="item progress">
+            <div
+              class="item_progress_bar"
+              :style="{ width: getBarWidth(option.value) }"
+            ></div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [
+        {
+          name: "报警服务",
+          value: 2031,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "数据服务",
+          value: 2201,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "消息队列服务",
+          value: 1901,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "档案中心服务",
+          value: 1400,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+        {
+          name: "哈哈服务",
+          value: 1280,
+          logo:
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          unit: "次",
+        },
+      ],
+    },
+    targetValue: {
+      type: Number,
+      default: () => 2400,
+    },
+  },
+  methods: {
+    getBarWidth(value) {
+      return (value / this.targetValue) * 100 + "%";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.item_list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.item_index {
+  width: 35px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  font-size: 12px;
+}
+</style>

src/pages/data-analysis/my-service.vue

@@ -38,7 +38,9 @@
       <el-col :span="6" class="in_right">
         <el-row>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <toplist></toplist>
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block"></block-radius>
@@ -64,10 +66,12 @@
 <script>
 import BlockRadius from "@/components/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
+import Toplist from "@/components/e-charts/toplist";
 export default {
   components: {
     BlockRadius,
-    Dashboard
+    Dashboard,
+    Toplist
   },
   data: () => ({
     navList: []
@@ -80,7 +84,7 @@ export default {
 .in_analysis {
   padding: 0 10px 10px;
   height: 100%;
-  min-width: 1700px;
+  /* min-width: 1700px; */
 }
 .in_l {
 }