fix: 地图图例

app/src/router/index.js

@@ -98,6 +98,16 @@ const router = new VueRouter({
       path: "/h5",
       name: "h5",
       component: H5
+    },
+    {
+      path: "/test/three",
+      name: "three",
+      component: () => import('@/views/Test/three.vue')
+    },
+    {
+      path: "/test/menu",
+      name: "menu",
+      component: () => import('@/views/Test/menu.vue')
     }
   ],
 });

app/src/views/Home/components/MapCharts.vue

@@ -1,5 +1,18 @@
 <template>
-  <div class="map-box" ref="map"></div>
+  <div style=" position: relative;width: 100%;height: 632px;">
+    <div class="map-box" ref="map"></div>
+    <div class="legend" :style="{
+      right: `${right}px`
+    }">
+      <div  v-for="(item, index) in legend" :key="index"
+      class="legend-item">
+      <div class="name">{{item.name}}</div>
+      <div :class="`color color-${index}`">
+      </div>
+      <div class="count">{{item.count}}个区县</div>
+    </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -28,6 +41,16 @@ export default {
     right: {
       type: Number,
       default: 50
+    },
+    legend: {
+      type: Array,
+      default: () => [
+        {name: '高风险', count: 0 },
+        {name: '较高风险', count: 0 },
+        {name: '中风险', count: 0 },
+        {name: '较低风险', count: 0 },
+        {name: '低风险', count: 0 },
+      ]
     }
   },
   data() {
@@ -249,13 +272,18 @@ export default {
               // max: this.calcMaxData(val),
               pieces: (() => {
                 const maxData = this.calcMaxData(val)
-                const intData = toInt(Math.ceil(maxData / 4))
+                const intData = toInt(Math.ceil(maxData / 5))
                 return [
+                  {min: intData*4, max: intData * 5},
                   {min: intData*3, max: intData * 4},
                   {min: intData*2, max: intData * 3},
                   {min: intData , max: intData * 2},
-                  {min: 1, max: intData},
-                  {min: 0, max: 0},
+                  {min: 0, max: intData},
+                  // {min: intData*3, max: intData * 3},
+                  // {min: intData*2, max: intData * 2},
+                  // {min: intData, max: intData * 2},
+                  // {min: 0 , max: intData},
+                  // {min: 0, max: 0},
                 ]
               })()
             }
@@ -409,18 +437,18 @@ export default {
           borderWidth: 0,
         },
         visualMap: {
-          show: true,
+          show: false,
           type: 'piecewise',
           bottom: 20,
           right: this.right,
           max: this.calcMaxData(data),
           inRange: {
             color: [
-              '#313695',
-              '#4575b4',
-              '#74add1',
-              '#abd9e9',
-              '#e0f3f8'
+              '#ff0b0b',
+              '#ff833d',
+              '#fbff3d',
+              '#35c2ff',
+              '#5aed9f'
             ].reverse(),
             // symbolSize: [60, 200]
           },
@@ -436,8 +464,13 @@ export default {
               {min: intData*4, max: intData * 5},
               {min: intData*3, max: intData * 4},
               {min: intData*2, max: intData * 3},
-              {min: 1, max: intData * 2},
-              {min: 0, max: 0 },
+              {min: intData , max: intData * 2},
+              {min: 0, max: intData},
+              // {min: intData*3, max: intData * 3},
+              // {min: intData*2, max: intData * 2},
+              // {min: intData, max: intData * 2},
+              // {min: 0 , max: intData},
+              // {min: 0, max: 0},
             ]
           })()
         },
@@ -550,6 +583,44 @@ export default {
 };
 </script>
 <style scoped>
+
+.legend {
+  position: absolute;
+  bottom: 30px;
+  right: 20px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  .count {
+    color: #fff;
+  }
+  .name {
+    width: 60px;
+    text-align: right;
+  }
+  .color {
+    width: 10px;
+    height: 40px;
+    &.color-0 {
+    background-color: #ff0b0b;
+    }
+    &.color-1 {
+      background-color: #ff833d;
+    }
+    &.color-2 {
+      background-color: #fbff3d;
+    }
+    &.color-3 {
+      background-color: #35c2ff;
+    }
+    &.color-4 {
+      background-color: #5aed9f;
+    }
+  }
+}
+
 .map-box {
   width: 100%;
   /* height: 98%; */

app/src/views/Home/components/NewMapChartsCategory.vue

@@ -0,0 +1,634 @@
+<template>
+  <div style="position: relative; width: 100%; height: 95%;">
+    <div class="map-box" ref="map"></div>
+    <img class="imgs" src="../../../assets/images/dd_wh.png" alt="" @click="getShoeInfo('whFxModal')">
+    <basic-modal top="30px" ref="whFxModal" name="区域高层建筑消防安全风险分色判定标准" width="90%">
+
+        <div style="display: flex; justify-content: center;">
+          <img  src="../../../assets/images/map-tip.png" />
+        </div>
+    </basic-modal>
+    <div class="legend">
+      <div  v-for="(item, index) in legend" :key="index"
+      class="legend-item">
+      <div class="name">{{item.name}}</div>
+      <div :class="`color color-${index}`">
+      </div>
+      <div class="count">{{item.count}}个区县</div>
+    </div>
+    </div>
+  </div>
+  <!-- 风险问号弹窗 -->
+</template>
+
+<script>
+import * as echarts from "echarts";
+import jsonCq from "@/assets/json/cq.json";
+import toolUtils from "@/utils/echartsTooltip";
+import { toInt } from '@/utils'
+
+
+export default {
+  name: "MapCharts",
+  props: {
+    qx: String,
+    mapHeatData: {
+      type: Array,
+      default: () => []
+    },
+    formatter: {
+      type: Function,
+      default: function (params) {
+        let res = params.name + "<br/>";
+        res += `隐患<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+        return res;
+      }
+    },
+    legend: {
+      type: Array,
+      default: () => [
+        {name: '高风险', count: 0 },
+        {name: '较高风险', count: 0 },
+        {name: '中风险', count: 0 },
+        {name: '较低风险', count: 0 },
+        {name: '低风险', count: 0 },
+      ]
+    }
+  },
+  data() {
+    return {
+      timed: null,
+      mapName: "chongqing",
+      mapData: {
+        北碚: [106.5, 29.81],
+        城口: [108.6520475, 31.90676506],
+        大足: [105.7692868, 29.65392091],
+        垫江: [107.4004904, 30.24903189],
+        丰都: [107.7461781, 29.91492542],
+        奉节: [109.3758974, 30.98202119],
+        合川: [106.2833096, 30.09766756],
+        江北: [106.6214893, 29.64821182],
+        江津: [106.2647885, 28.98483627],
+        开州: [108.1818518, 31.29466521],
+        南岸: [106.6379653, 29.47704825],
+        南川: [107.1406799, 29.12047319],
+        彭水: [108.2573507, 29.36444557],
+        綦南: [106.8036647, 28.96872774],
+        黔江: [108.7559876, 29.44290625],
+        石柱: [108.2438988, 30.07512144],
+        市区: [106.4377397, 29.52648606],
+        市辖区: [106.4377397, 29.52648606],
+        铜梁: [106.0616035, 29.81036286],
+        潼南: [105.811692, 30.13795513],
+        万州: [108.0828876, 30.73353669],
+        巫山: [109.8779184, 31.09568937],
+        巫溪: [109.2970739, 31.48090521],
+        武隆: [107.6831317, 29.36831708],
+        秀山: [108.9997005, 28.49462861],
+        永川: [105.8347961, 29.41042605],
+        酉阳: [108.7911679, 28.88330557],
+        云阳: [108.7533957, 30.96025875],
+        长寿: [107.24, 29.95],
+        忠县: [107.9279014, 30.33522658],
+        川东: [107.3488646, 29.68233099],
+      },
+      activeMap: jsonCq,
+      activeArea: "",
+      activeName: "重庆市",
+      activeMapData: [],
+      // 区块图
+      heatData: [
+        {
+          name: "万州区",
+          value: 0
+        },
+        {
+          name: "涪陵区",
+          value: 0,
+        },
+        {
+          name: "渝中区",
+          value: 0,
+        },
+        {
+          name: "大渡口区",
+          value: 0,
+        },
+        {
+          name: "江北区",
+          value: 0,
+        },
+        {
+          name: "沙坪坝区",
+          value: 0,
+        },
+        {
+          name: "九龙坡区",
+          value: 0,
+        },
+        {
+          name: "南岸区",
+          value: 0,
+        },
+        {
+          name: "北碚区",
+          value: 0,
+        },
+        {
+          name: "綦江区",
+          value: 0,
+        },
+        {
+          name: "大足区",
+          value: 0,
+        },
+        {
+          name: "渝北区",
+          value: 0,
+        },
+        {
+          name: "巴南区",
+          value: 0,
+        },
+        {
+          name: "黔江区",
+          value: 0,
+        },
+        {
+          name: "长寿区",
+          value: 0,
+        },
+        {
+          name: "江津区",
+          value: 0,
+        },
+        {
+          name: "合川区",
+          value: 0,
+        },
+        {
+          name: "永川区",
+          value: 0,
+        },
+        {
+          name: "南川区",
+          value: 0,
+        },
+        {
+          name: "璧山区",
+          value: 0,
+        },
+        {
+          name: "铜梁区",
+          value: 0,
+        },
+        {
+          name: "潼南区",
+          value: 0,
+        },
+        {
+          name: "荣昌区",
+          value: 0,
+        },
+        {
+          name: "开州区",
+          value: 0,
+        },
+        {
+          name: "梁平区",
+          value: 0,
+        },
+        {
+          name: "武隆区",
+          value: 0,
+        },
+        {
+          name: "城口县",
+          value: 0,
+        },
+        {
+          name: "丰都县",
+          value: 0,
+        },
+        {
+          name: "垫江县",
+          value: 0,
+        },
+        {
+          name: "忠县",
+          value: 0,
+        },
+        {
+          name: "云阳县",
+          value: 0,
+        },
+        {
+          name: "奉节县",
+          value: 0,
+        },
+        {
+          name: "巫山县",
+          value: 0,
+        },
+        {
+          name: "巫溪县",
+          value: 0,
+        },
+        {
+          name: "石柱土家族自治县",
+          value: 0,
+        },
+        {
+          name: "秀山土家族苗族自治县",
+          value: 0,
+        },
+        {
+          name: "酉阳土家族苗族自治县",
+          value: 0,
+        },
+        {
+          name: "彭水苗族土家族自治县",
+          value: 0,
+        },
+      ],
+      mapChart: null,
+      mapType: {
+        '红色': '#ff0b0ba0',
+        '橙色': '#ff833d',
+        '黄色': '#fbff3d',
+        '蓝色': '#35c2ff',
+        '绿色': '#5aed9f'
+      }
+    };
+  },
+  watch: {
+    qx(val) {
+      this.mapChart.dispatchAction({
+        type: "select",
+        name: val
+      })
+    },
+    mapHeatData: {
+      handler(val) {
+      if (val.length > 0) {
+          this.mapChart.setOption({
+            series: [
+              {
+                data: this.convertMapData(val)
+              }
+            ],
+            visualMap: {
+              max: this.calcMaxData(val),
+              pieces: (() => {
+                const maxData = this.calcMaxData(val)
+                const intData = toInt(Math.ceil(maxData / 5))
+                return [
+                  {min: intData*4, max: intData * 5, label: '高风险'},
+                  {min: intData*3, max: intData * 4, label: '较高风险'},
+                  {min: intData*2, max: intData * 3, label: '中风险'},
+                  {min: intData, max: intData * 2, label: '较低风险'},
+                  {min: 0, max: intData, label: '低风险'},
+                ]
+              })()
+            }
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    const array = [];
+    const _data = this.mapData;
+    for (const key in _data) {
+      array.push({
+        name: key,
+        value: _data[key],
+      });
+    }
+    this.activeMapData = array;
+  },
+  mounted() {
+    this.drawMap();
+  },
+  methods: {
+    convertMapData(data) {
+      // const maxValue = (this.calcMaxData(data) / 5)
+      // const intData = toInt(maxValue)
+      return data.map(item => ({...item,
+          label: {
+            color:  '#000'
+          }
+        }))
+    },
+    calcMaxData(data) {
+      return Math.max(...data.map(item => item.value))
+    },
+    drawMap() {
+      const mapChart = this.$refs.map;
+      echarts.registerMap("chongqing", this.activeMap);
+      let data = this.heatData
+
+      const { mapName } = this;
+
+      const zoom = 1.27;
+      const aspectScale = 1.1;
+
+      const option = {
+        title: {
+          top: 0,
+          subtext: "",
+          x: "center",
+          textStyle: {
+            color: "#ccc",
+          },
+        },
+        geo: [
+          {
+            map: mapName,
+            zlevel: -1,
+            zoom,
+            aspectScale,
+            silent: true,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "100%",
+            roam: false,
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(192,245,249,.8)",
+                borderWidth: 3,
+                shadowColor: "#6FFDFF",
+                shadowOffsetY: 0,
+                shadowBlur: 10,
+              },
+            },
+          },
+          {
+            show: true,
+            map: mapName,
+            zoom,
+            aspectScale,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "100%",
+            blur: {
+              label: { show: true, color: "#000" },
+            },
+            roam: false, // 是否开启鼠标滚轮缩放
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                color: "#fff",
+                borderColor: "#32CBE0",
+                borderWidth: 1.5,
+                areaColor: '#aaaaaa88'
+              },
+            },
+          },
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -2,
+            zoom,
+            aspectScale,
+            layoutCenter: ["50%", "51.4%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(35, 161, 184,0.5)",
+                shadowColor: "rgba(35, 161, 184,0.8)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "#257AB2",
+              },
+            },
+          },
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -3,
+            zoom,
+            aspectScale,
+            layoutCenter: ["50%", "52.4%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(7, 65, 117,0.5)",
+                shadowColor: "rgba(7, 65, 117,0.8)",
+                shadowOffsetY: 15,
+                shadowBlur: 8,
+                areaColor: "#0A2763",
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+          position: "top",
+          backgroundColor: "rgba(0, 0, 0, 0.82)",
+          formatter: this.formatter,
+          textStyle: {
+            color: "#33F0FF",
+          },
+          extraCssText: `z-index: 1000;margin:0px;padding:0px;
+  border: 1px solid rgba(61, 115, 255, 0.72);`,
+          borderWidth: 0,
+        },
+        visualMap: {
+          show: false,
+          type: 'piecewise',
+          bottom: 20,
+          right: 50,
+          max: this.calcMaxData(data),
+          inRange: {
+            color: [
+              '#ff0b0b',
+              '#ff833d',
+              '#fbff3d',
+              '#35c2ff',
+              '#5aed9f'
+            ].reverse(),
+          },
+          calculable: true,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          pieces: (() => {
+            const maxData = this.calcMaxData(data)
+            const intData = toInt(Math.ceil(maxData / 5))
+            return [
+              {min: intData*4, max: intData * 5, label: '高风险'},
+              {min: intData*3, max: intData * 4, label: '较高风险'},
+              {min: intData*2, max: intData * 3, label: '中风险'},
+              {min: intData, max: intData * 2, label: '较低风险'},
+              {min: 0, max: intData, label: '低风险'},
+            ]
+          })()
+        },
+        series: [
+          {
+            name: "总览",
+            type: "map",
+            label: {
+              position: [0, 0],
+              normal: {
+                show: true,
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+              emphasis: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              color: "#fff",
+            },
+            select: {
+              label: {
+                // 选中区域的label(文字)样式
+                color: "#fff",
+              },
+              itemStyle: {
+                areaColor: "#9f5aed",
+                borderColor: "#fff",
+                shadowColor: "#5a9cdd",
+                shadowBlur: 0,
+                shadowOffsetX: 0,
+                shadowOffsetY: 10,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#fff",
+                borderColor: "#75b9da", // 地图边缘线颜色
+                borderWidth: 2
+              },
+
+              emphasis: {
+                label: {
+                  fontSize: 24,
+                  textBorderColor: "#393523",
+                  textBorderWidth: 2,
+                },
+                borderColor: "#fff",
+                shadowColor: "#5a9cdd",
+                shadowBlur: 0,
+                shadowOffsetX: 0,
+                shadowOffsetY: 10,
+                areaColor: {
+                  type: "linear-gradient",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#06969d", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#1daedc",
+                    },
+                  ],
+                },
+              },
+            },
+            aspectScale, // 长宽比
+            zoom,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "100%",
+            map: mapName, // 使用
+            data: this.convertMapData(data),
+          },
+        ],
+      };
+      this.mapChart = echarts.init(mapChart, "light");
+      this.mapChart.setOption(option);
+    toolUtils.autoHover(this.mapChart, option, 24, 10 * 1000);
+      // 图表对象响应式设置
+      window.addEventListener("resize", () => {
+        this.mapChart.resize();
+      });
+      //
+      this.mapChart.on("click", (params) => {
+        if(params.seriesType === 'map'){
+          if (params.name !== this.activeArea) {
+            this.activeArea = params.name
+            this.$emit('selectArea', params.name)
+          } else {
+            if (this.activeArea === "") {
+            this.activeArea = params.name
+            this.$emit('selectArea', params.name)
+            } else {
+              this.activeArea = ""
+              this.$emit('selectArea', "重庆市")
+            }
+          }
+        }
+      });
+    },
+    getShoeInfo(name){
+      this.showModal(name);
+    },
+  },
+};
+</script>
+<style scoped>
+.legend {
+  position: absolute;
+  bottom: 30px;
+  right: 20px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  .count {
+    color: #fff;
+  }
+  .name {
+    width: 60px;
+    text-align: right;
+  }
+  .color {
+    width: 10px;
+    height: 40px;
+    &.color-0 {
+    background-color: #ff0b0b;
+    }
+    &.color-1 {
+      background-color: #ff833d;
+    }
+    &.color-2 {
+      background-color: #fbff3d;
+    }
+    &.color-3 {
+      background-color: #35c2ff;
+    }
+    &.color-4 {
+      background-color: #5aed9f;
+    }
+  }
+}
+.map-box {
+  width: 100%;
+  /* height: 98%; */
+  height: 632px;
+  /* background: blue; */
+}
+.imgs{
+ position: absolute;
+ right: 63px;
+ bottom: 0px;
+ cursor: pointer;
+}
+</style>

app/src/views/Home/index.vue

@@ -108,7 +108,7 @@ import BasicInfo from "./components/BasicInfo.vue";
 import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics/index.vue";
 import AutonomousManagement from "./components/AutonomousManagement/index.vue";
 import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
-import MapChartsCategory from "./components/MapChartsCategory.vue";
+import MapChartsCategory from "./components/NewMapChartsCategory.vue";
 import RiskWarning from "./components/RiskWarning.vue";
 import WisdomFire from "./components/WisdomFire.vue";
 import FireIndex from "./components/FireIndex/index.vue";
@@ -167,9 +167,9 @@ export default {
       queryParams: {
         glxs: "", //管理形式
         wbxs: "", //维保形式
-        dxjj: "", //大修基金
-      },
-    };
+        dxjj: "" //大修基金
+      }
+    }
   },
   watch: {
     qy() {

app/src/views/Test/menu.vue

@@ -0,0 +1,237 @@
+<script>
+import { defineComponent, ref, unref, onMounted, getCurrentInstance } from 'vue'; 
+import * as echarts from 'echarts';
+import 'echarts-gl';
+import cq from '@/assets/json/cq.json';
+import bg from '@/assets/images/bg1.jpg';
+import { formatCityData } from '@/utils'
+
+export default defineComponent({
+  name: 'MapChart1',
+  setup() {
+    const mapChart = ref()
+    const area = ref()
+
+    const { proxy } = getCurrentInstance()
+
+
+    onMounted(() => {
+      mapChart.value = echarts.init(proxy.$refs.mapDom)
+      echarts.registerMap('chongqing', cq)
+      const option = {
+          tooltip: {
+            trigger: "item",
+            position: "top",
+            backgroundColor: "rgba(0, 0, 0, 0.82)",
+            textStyle: {
+              color: "#33F0FF",
+            },
+            extraCssText: `z-index: 1000;margin:0px;padding:0px;
+    border: 1px solid rgba(61, 115, 255, 0.72);`,
+            borderWidth: 0,
+          },
+        geo3D: [
+          {
+            show: true,
+            map: 'chongqing',
+            regions: [
+            ],
+            regionHeight: 5,
+            shading: 'realistic',
+            realisticMaterial: {
+              detailTexture: ((bg) => {
+                const img = document.createElement('img')
+                img.src = bg
+                return img
+              })(bg),
+              textureTiling: 1,
+            },
+            light: {
+              //光照阴影
+              main: {
+                color: "#fff", //光照颜色
+                intensity: .7, //光照强度
+                shadow: true, //是否显示阴影
+                alpha: 60,
+                beta: 10
+              },
+              ambient: {
+                intensity: 0.6
+              }
+            },
+            viewControl: {
+              distance: 150,
+              maxDistance: 150,
+              alpha: 50
+            },
+            emphasis: {
+              label: {
+                formatter: function (params) {
+                  area.value=params.name;
+                  return "";
+                },
+                show: true
+              }
+            },
+          },
+        ],
+        series: [
+        {
+            type: 'map3D',
+            show: true,
+            map: 'chongqing',
+            regionHeight: 5,
+            itemStyle: {
+              color: '#00000020',
+              opacity: 1,
+              borderWidth: 2,
+              borderColor: "#aaa"
+            },
+            label: {
+              show: true,
+              textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                fontWeight: 'bold'
+              },
+            },
+            viewControl: {
+              distance: 150,
+              maxDistance: 150,
+              alpha: 50
+            },
+            data: formatCityData([]).map((item, index) => ({
+                ...item,
+              itemStyle: {
+                color: ['#ff000076', '#ffff0076', '#ffaa0076', '#00ff0076', '#0000ff76'][index % 5]
+              },
+            }))
+          }
+        ]
+      }
+      // bg
+      unref(mapChart).setOption(option)
+      unref(mapChart).off('click');
+      // 点击事件
+      unref(mapChart).getZr().on("click",  (params) => {
+        mapChart.value.setOption({
+          tooltip: {
+            trigger: "item",
+            position: "top",
+            backgroundColor: "rgba(0, 0, 0, 0.82)",
+            textStyle: {
+              color: "#33F0FF",
+            },
+            extraCssText: `z-index: 1000;margin:0px;padding:0px;
+    border: 1px solid rgba(61, 115, 255, 0.72);`,
+            borderWidth: 0,
+          },
+          geo3D: [
+          {
+            show: true,
+            map: 'chongqing',
+            regions: [
+            ],
+            regionHeight: 5,
+            shading: 'realistic',
+            realisticMaterial: {
+              detailTexture: ((bg) => {
+                const img = document.createElement('img')
+                img.src = bg
+                return img
+              })(bg),
+              textureTiling: 1,
+            },
+            light: {
+              //光照阴影
+              main: {
+                color: "#fff", //光照颜色
+                intensity: .7, //光照强度
+                shadow: true, //是否显示阴影
+                alpha: 60,
+                beta: 10
+              },
+              ambient: {
+                intensity: 0.6
+              }
+            },
+            viewControl: {
+              distance: 150,
+              maxDistance: 150,
+              alpha: 50
+            },
+            emphasis: {
+              label: {
+                formatter: function (params) {
+                  area.value=params.name;
+                  return '';
+                },
+                show: true
+              }
+            },
+          },
+        ],
+          series: [
+            {
+            type: 'map3D',
+            show: true,
+            map: 'chongqing',
+            regionHeight: 5,
+            itemStyle: {
+              color: '#00000020',
+              opacity: 1,
+              borderWidth: 2,
+              borderColor: "#aaa"
+            },
+            label: {
+              show: true,
+              textStyle: {
+                color: '#fff',
+                fontSize: 14,
+                fontWeight: 'bold'
+              },
+            },
+            viewControl: {
+              distance: 150,
+              maxDistance: 150,
+              alpha: 50
+            },
+              data: formatCityData([]).map((item, index) => ({
+                ...item,
+              itemStyle: {
+                color: ['#ff000076', '#ffff0076', '#ffaa0076', '#00ff0076', '#0000ff76'][index % 5]
+              },
+              })).map((item, index) => item.name === area.value ? ({
+          ...item,
+          itemStyle: {
+            color:  ['#ff0000', '#ffff00', '#ffaa00', '#00ff00', '#0000ff'][index % 5]
+          }
+        }) : item)
+            }
+          ]
+        })
+      }, {
+        notMerge: true
+      })
+    })
+
+    return {
+
+    }
+  }
+})
+</script>
+
+<template >
+  <div class="map-charts" ref="mapDom"></div>
+</template>
+
+<style lang='less'>
+body,html {
+  // background-color: aliceblue;
+}
+.map-charts {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

package.json

@@ -22,6 +22,7 @@
     "@vue/test-utils": "^1.3.0",
     "@zhgkpt/utils": "workspace:^1.0.0",
     "core-js": "3",
+    "echarts-gl": "^2.0.9",
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^9.0.0",
     "jsdom": "^20.0.0",
@@ -38,7 +39,6 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "cesium": "^1.106.1",
     "echarts": "^5.4.2",
-    "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.9",
     "moment": "^2.29.4",
     "vue": "^2.7.8",