图例

src/components/Lengend/Lengend.vue

@@ -11,7 +11,7 @@
           <div class="item">
             <div class="circle" :style="{ 'background-color': item }"></div>
             <label>
-              {{ showLabel(range[index - 1], range[index]) }}
+              {{ showLabel(range, index) }}
             </label>
           </div>
         </div>
@@ -23,35 +23,34 @@
 <script>
 export default {
   data() {
-    return {};
+    return {}
   },
   props: {
     title: {
-      type: String,
+      type: String
     },
     colors: {
-      type: Array,
+      type: Array
     },
     range: {
-      type: Array,
-    },
+      type: Array
+    }
   },
   computed: {
     showLabel() {
-      return function (min, max) {
-        if (max && min) {
-          return `${min} - ${max}`;
+      return function (range, index) {
+        console.log(range, index)
+        if (index == 0) {
+          return `< ${range[0]}`
+        } else if (index === range.length) {
+          return `> ${range[index - 1]} `
+        } else {
+          return `${range[index - 1]} - ${range[index]}`
         }
-        if (max && !min) {
-          return `< ${max}`;
       }
-        if (!max && min) {
-          return `${min} <`;
     }
-      };
-    },
-  },
-};
+  }
+}
 </script>
 
 <style lang="less" scoped>