starlist组件

src/components/e-charts/starlist.vue

+<template>
+  <div>
+    <ul class="star_list">
+      <li
+        class="item_list"
+        v-for="(option, index) in options"
+        :key="'star_info_' + index"
+      >
+        <el-rate
+          class="item-rate"
+          :colors="['#8890a7', '#8890a7', '#8890a7']"
+          :value="option.star"
+          disabled
+          disabled-void-color="transparent"
+        >
+        </el-rate>
+        <el-progress
+          class="item-progress"
+          :percentage="getPercent(option.count)"
+          :show-text="false"
+          color="#e56600"
+        ></el-progress>
+        <span class="item-text" v-text="option.count + '个'"></span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [
+        {
+          star: 5,
+          count: 5,
+          unit: "个",
+        },
+        {
+          star: 4,
+          count: 4,
+          unit: "个",
+        },
+        {
+          star: 3,
+          count: 3,
+          unit: "个",
+        },
+        {
+          star: 2,
+          count: 10002,
+          unit: "个",
+        },
+        {
+          star: 1,
+          count: 1,
+          unit: "个",
+        },
+      ],
+    },
+    total: {
+      type: Number,
+      default: () => 10015,
+    },
+  },
+  methods: {
+    getPercent(value) {
+      return Math.min((value / this.total) * 100, 100);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.star_list {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.item_list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 12px;
+}
+.item-rate {
+  flex-shrink: 0;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  align-items: center;
+  margin-right: 10px;
+}
+.item-progress {
+  flex-grow: 1;
+  max-width: 200px;
+  margin-right: 10px;
+}
+.item-text {
+  flex-shrink: 0;
+  width: 60px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #242c43;
+  text-align: right;
+}
+</style>
+
+<style>
+.item-rate .el-rate {
+  height: 14px;
+}
+.item-rate .el-rate__icon {
+  font-size: 14px;
+  margin-right: 0;
+}
+.item-progress .el-progress-bar__outer {
+  background: #e2e3ed;
+}
+</style>

src/components/e-charts/toplist.vue

@@ -16,12 +16,12 @@
             </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>
+          <el-progress
+            class="item_progress"
+            :percentage="getPercent(option.value)"
+            :show-text="false"
+            color="#e56600"
+          ></el-progress>
         </div>
       </li>
     </ul>
@@ -77,8 +77,8 @@ export default {
     },
   },
   methods: {
-    getBarWidth(value) {
-      return Math.min((value / this.targetValue) * 100, 100) + "%";
+    getPercent(value) {
+      return Math.min((value / this.targetValue) * 100, 100);
     },
   },
 };
@@ -94,6 +94,7 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  margin-right: 10px;
   margin-bottom: 18px;
 }
 .item_index {
@@ -122,7 +123,6 @@ export default {
 }
 .item_detail {
   flex-grow: 1;
-  margin-right: 10px;
 }
 .item_info > span:first-child {
   flex-grow: 1;
@@ -137,16 +137,6 @@ export default {
   color: #0d1847;
 }
 .item_progress {
-  height: 5px;
-  border-radius: 2px;
-  overflow: hidden;
-  background-color: #c9cedd;
-  margin-top: 7px;
-}
-.item_progress > .item_progress_bar {
-  height: inherit;
-  border-radius: inherit;
-  overflow: inherit;
-  background-color: #e56600;
+  margin-top: 6px;
 }
 </style>

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

@@ -46,7 +46,9 @@
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <starlist></starlist>
+            </block-radius>
           </el-col>
         </el-row>
       </el-col>
@@ -67,11 +69,13 @@
 import BlockRadius from "@/components/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
 import Toplist from "@/components/e-charts/toplist";
+import Starlist from "@/components/e-charts/starlist";
 export default {
   components: {
     BlockRadius,
     Dashboard,
-    Toplist
+    Toplist,
+    Starlist
   },
   data: () => ({
     navList: []