热力图底色修改

src/pages/all/components/hotMapComponents/hotMap.vue

@@ -39,7 +39,6 @@ const props = defineProps({
 watch(() => props.data, (newVal) => {
     // // updateChart();
     setTimeout(() => {
-
         initChart();
     }, 0)
 
@@ -78,22 +77,19 @@ const data = computed(() => {
         }
         // console.log('y', y)
         y.forEach(y => {
-
             const { value, GridCode } = y
             result.push({
-
                 code: GridCode,
                 count: value,
-
             })
             // console.log('item', item)
         })
     })
     result = result.sort((pre, next) => pre.count - next.count)
     maxValue.value = result[result.length - 1]?.count || 0
-
     result = mergeData(result, appStore.gridInfoList)
-   
+    console.log(result, '热力图对比');
+
     return result
 
 })
@@ -205,8 +201,8 @@ function initChart() {
                 textBorderWidth: 1,
             },
             itemStyle: {
-                areaColor: "#163C7A", // 地图底色
-                borderColor: "#2a6ea6", // 国界线
+                areaColor: "#282a31", // 地图底色
+                borderColor: "#575a61", // 国界线
                 borderWidth: 1,
             },
             emphasis: {

src/pages/all/components/hotMapComponents/index.vue

@@ -9,6 +9,9 @@
     <!-- 标题文本 -->
     <div class="hot-title">
       <div class="hot-title-text">{{ props.title }}</div>
+      <el-select v-model="selectedValue" placeholder="切换热力图" class="selects" clearable>
+        <el-option v-for="(building, index) in props.legendName" :key="building" :label="building" :value="index" />
+      </el-select>
       <div class="hot-title-enlarge">
         <svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
@@ -23,12 +26,12 @@
     </div>
     <!-- 核心数据指标 -->
     <div class="container">
-      <div class="flex-box flex-left">
-        <hotMap :title="props.legendName[0]" :data="props.data[0]"></hotMap>
+      <div class="flex-box ">
+        <hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap>
       </div>
-      <div class="flex-box flex-right">
+      <!-- <div class="flex-box flex-right">
         <hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -36,7 +39,6 @@
 <script setup>
 import { ref } from 'vue';
 import hotMap from './hotMap.vue'
-
 const props = defineProps({
   slogan: {
     type: String,
@@ -54,13 +56,9 @@ const props = defineProps({
     type: Array,
     default: () => []
   }
-
-
 })
-console.log(props.data, '热力图数据')
-console.log(props.legendName[0], 'props.legendName')
-
-const componentProps = ref({})
+const selectedValue = ref(0)//热力图下拉框
+console.log(props, '热力图数据')
 </script>
 
 <style scoped>
@@ -148,4 +146,8 @@ const componentProps = ref({})
 /* .flex-left {
   background-color: rgb(180, 180, 180);
 } */
+.selects {
+  width: 140px;
+  border-radius: 0px !important;
+}
 </style>
\ No newline at end of file