修改雨量分区颜色

src/utils/getcolor.js

@@ -9,31 +9,24 @@
 const getColorVal = (val)=>{
     let color;
     switch (true) {
-        case val >= 0 && val < 1:
-            color = "#fffdff";
+        case val >= 0 && val < 0.5:
+            color = "#fff";
             break;
-        case val >= 1 && val <= 9.9:
-            color = "#a6f28e";
+        case val >= 0.5 && val <= 2.67:
+            color = "#7d8fbb";
             break;
-        case val >= 10 && val <= 24.9:
-            color = "#3db93d";
+        case val >= 2.67 && val <= 4.83:
+            color = "#638cc9";
             break;
-        case val >= 25 && val <= 49.9:
-            color = "#61b8ff";
-            break;
-        case val >=50&&val<=99.9:
-            color = "#0000fe";
-            break;
-        case val >=100&&val<=250:
-            color = "#f900fb";
+        case val >= 4.83 && val <= 7:
+            color = "#3660bd";
             break;
         case val >250:
-            color = "#81013d";
+            color = "#fff";
             break;
         default:
-            color = "#eaeaea";
+            color = "#fff";
             break;
-
     }
     return color
 }

src/views/map/Map.vue

@@ -309,14 +309,19 @@ export default defineComponent({
       });
     };
     const colors = [
-    { min: 2000, max: 99999, color: "#ffffff" },
-    { min: 250, max: 2000, color: "#84003f" },
-    { min: 100, max: 250, color: "#fa00fa" },
-    { min: 50, max: 100, color: "#0000fe" },
-    { min: 25, max: 50, color: "#61b8ff" },
-    { min: 10, max: 25, color: "#3db93d" },
-    { min: 1, max: 10, color: "#a6f28e" },
-    { min: 0, max: 1, color: "rgb(234, 234, 234)" },
+    { min: 7, max: 999, color: "rgba(0,0,0,0)" },
+    { min: 4.83, max: 7, color: "#3660bd" },
+    { min: 2.67, max: 4.83, color: "#638cc9" },
+    { min: 0.5, max: 2.67, color: "#7d8fbb" },
+    { min: 0, max: 0.5, color: "rgba(0,0,0,0)" },
+    // { min: 2000, max: 99999, color: "#ffffff" },
+    // { min: 250, max: 2000, color: "#84003f" },
+    // { min: 100, max: 250, color: "#fa00fa" },
+    // { min: 50, max: 100, color: "#0000fe" },
+    // { min: 25, max: 50, color: "#61b8ff" },
+    // { min: 10, max: 25, color: "#3db93d" },
+    // { min: 1, max: 10, color: "#a6f28e" },
+    // { min: 0, max: 1, color: "rgb(234, 234, 234)" },
     ]
     // 更新面雨量分布图
     const uprainAreaLayer = () => {

src/views/map/changeMap.vue

@@ -95,7 +95,7 @@
     <div class="class-legend" v-show="mapLgendShow">
       <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">mm</div>
       <div v-for="item in rainLegendNow" :style="item.style">{{ item.value }}</div>
-      <div style="border-radius: 0 0 25px 25px ;background-color: #eaeaea;color: #000;font-size: 12px;">无数据</div>
+      <div style="border-radius: 0 0 25px 25px ;background-color: #fff;color: #000;font-size: 12px;">0</div>
     </div>
     <div class="class-legendtwo" v-show="mapLgendShow2">
       <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">℃</div>
@@ -161,33 +161,17 @@ eventBus.on('wdLegend', (e) => {
     });
 const rainLegendNow=ref()
 const rainLegend = reactive([
-{
-    style: 'background:#fffdff',
-    value: '0~1',
-  },
-  {
-    style: 'background:#a6f28e',
-    value: '1~9.9',
-  },
-  {
-    style: 'background:#3db93d',
-    value: '10~24.9',
-  },
-  {
-    style: 'background:#61b8ff',
-    value: '25~49.9',
-  },
   {
-    style: 'background:#0000fe',
-    value: '50~99.9',
+    style: 'background:#7d8fbb',
+    value: '0.5~2.67',
   },
   {
-    style: 'background:#fa00fa',
-    value: '100~250',
+    style: 'background:#638cc9',
+    value: '2.67~4.83',
   },
   {
-    style: 'background:#810041',
-    value: '>250',
+    style: 'background:#3660bd',
+    value: '4.83~7',
   },
 ]);
 const wdLegendNow=ref([])