1

src/components/echarts/EchartsMap.vue

@@ -1,164 +1,159 @@
 <template>
-  <div style="position: relative; width: 100%; height: 73%">
-    <div id="areaChart" class="map"></div>
-  </div>
+  <div id="areaChart" class="map"></div>
 </template>
 
 <script>
-  import 'echarts-gl';
-  // import { mapState } from 'vuex';
-  export default {
-    name: 'EchartsMap',
-    components: {},
-    props: {
-      mapData: {
-        type: Object,
-        default: () => {
-          return {};
-        },
+import "echarts-gl";
+// import { mapState } from 'vuex';
+export default {
+  name: "EchartsMap",
+  components: {},
+  props: {
+    mapData: {
+      type: Object,
+      default: () => {
+        return {};
       },
-      regionLevel: {
-        type: String,
-        default: '',
-      },
-    },
-    data() {
-      return {
-        zoomed: false, // 地图是否下钻标识
-        evenstList: [],
-        eventValue: 0,
-        mapQuarterData: [],
-        inverse: false,
-        textColor: '#ffffff',
-        List: [],
-        reverseBack: false,
-        option: {},
-        chart: null,
-        oldGeoJson: {},
-      };
     },
-    computed: {
-      // ...mapState({
-      //   user: (state) => (Object.keys(state.userInfo).length > 0 ? state.userInfo : JSON.parse(sessionStorage.getItem('userInfo'))),
-      // }),
+    regionLevel: {
+      type: String,
+      default: "",
     },
-    mounted() {
-      this.init();
+  },
+  data() {
+    return {
+      zoomed: false, // 地图是否下钻标识
+      evenstList: [],
+      eventValue: 0,
+      mapQuarterData: [],
+      inverse: false,
+      textColor: "#ffffff",
+      List: [],
+      reverseBack: false,
+      option: {},
+      chart: null,
+      oldGeoJson: {},
+    };
+  },
+  computed: {
+    // ...mapState({
+    //   user: (state) => (Object.keys(state.userInfo).length > 0 ? state.userInfo : JSON.parse(sessionStorage.getItem('userInfo'))),
+    // }),
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    init() {
+      this.$echarts.registerMap("YICHUN", this.mapData);
+      this.initChart();
     },
-    beforeDestroy() {
-      if (!this.chart) {
-        return;
-      }
-      this.chart.dispose();
-      this.chart = null;
-    },
-    methods: {
-      init() {
-        this.$echarts.registerMap('YICHUN', this.mapData);
-        this.initChart();
-      },
-      initChart() {
-        let that = this;
-        that.chart = this.$echarts.init(document.getElementById('areaChart'));
-        that.option = {
-          series: [
-            {
-              type: 'map3D',
-              map: 'YICHUN',
-              roam: false,
-              boxDepth: 150, //地图倾斜度
-              regionHeight: 6, //地图高度
-              viewControl: {
-                distance: 160, //地图视角 控制初始大小
-                rotateSensitivity: 0, //禁止旋转
-                zoomSensitivity: 0, //禁止缩放
+    initChart() {
+      let that = this;
+      that.chart = this.$echarts.init(document.getElementById("areaChart"));
+      that.option = {
+        series: [
+          {
+            type: "map3D",
+            map: "YICHUN",
+            roam: false,
+            boxDepth: 150, //地图倾斜度
+            regionHeight: 6, //地图高度
+            viewControl: {
+              distance: 160, //地图视角 控制初始大小
+              rotateSensitivity: 0, //禁止旋转
+              zoomSensitivity: 0, //禁止缩放
+            },
+            label: {
+              show: true, // 是否显示市
+              textStyle: {
+                color: "#fff", //文字颜色
+                fontSize: 16, //文字大小
+                backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                textShadowColor: "#0940E7",
+                textShadowBlur: 5,
+                textShadowOffsetX: 2,
+                textShadowOffsetY: 2,
               },
+            },
+            //光照阴影
+            light: {
+              //光照阴影
+              main: {
+                color: "#47E8F4", //光照颜色
+                intensity: 0.6, //光照强度
+                //shadowQuality: 'high', //阴影亮度
+                shadow: true, //是否显示阴影
+              },
+              ambient: {
+                intensity: 0.6,
+              },
+            },
+            itemStyle: {
+              // color: '', //地图颜色
+              borderWidth: 2, //分界线wdith
+              borderColor: "#47E8F4", //分界线颜色,
+              color: "#26BCF6",
+            },
+            emphasis: {
               label: {
-                show: true, // 是否显示市
+                show: true, //是否显示高亮
                 textStyle: {
-                  color: '#fff', //文字颜色
-                  fontSize: 16, //文字大小
-                  backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
-                  textShadowColor: '#0940E7',
-                  textShadowBlur: 5,
-                  textShadowOffsetX: 2,
-                  textShadowOffsetY: 2,
-                },
-              },
-              //光照阴影
-              light: {
-                //光照阴影
-                main: {
-                  color: '#47E8F4', //光照颜色
-                  intensity: 0.6, //光照强度
-                  //shadowQuality: 'high', //阴影亮度
-                  shadow: true, //是否显示阴影
-                },
-                ambient: {
-                  intensity: 0.6,
+                  color: "#fff", //高亮文字颜色
+                  fontSize: 20, //文字大小
                 },
               },
               itemStyle: {
-                // color: '', //地图颜色
-                borderWidth: 2, //分界线wdith
-                borderColor: '#47E8F4', //分界线颜色,
-                color: '#26BCF6',
-              },
-              emphasis: {
-                label: {
-                  show: true, //是否显示高亮
-                  textStyle: {
-                    color: '#fff', //高亮文字颜色
-                    fontSize: 20, //文字大小
-                  },
-                },
-                itemStyle: {
-                  color: '#47E8F4', //地图高亮颜色
-                },
+                color: "#47E8F4", //地图高亮颜色
               },
             },
-          ],
-        };
-        // 渲染地图
-        that.chart.setOption(that.option);
-        // 单击区域下钻
-        that.chart.on('click', (param) => {
-          if (that.mapData.features[param.event.target.dataIndex].properties.level !== '4') {
-            that.chart.dispose();
-            that.option.series[0].label = false;
-            that.$emit('mapClick', param.event);
-          } else {
-            that.$emit('mapClicker', param.event);
-          }
-        });
-      },
+          },
+        ],
+      };
+      // 渲染地图
+      that.chart.setOption(that.option);
+      // 单击区域下钻
+      that.chart.on("click", (param) => {
+        if (
+          that.mapData.features[param.event.target.dataIndex].properties
+            .level !== "4"
+        ) {
+          that.chart.dispose();
+          that.option.series[0].label = false;
+          that.$emit("mapClick", param.event);
+        } else {
+          that.$emit("mapClicker", param.event);
+        }
+      });
     },
-    watch: {
-      mapData: {
-        handler(newVal, oldVal) {
-          if (newVal) {
-            this.oldGeoJson = oldVal;
-            this.init();
-          }
-        },
-        deep: true,
+  },
+  watch: {
+    mapData: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.oldGeoJson = oldVal;
+          this.init();
+        }
       },
+      deep: true,
     },
-  };
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .map {
-    position: relative;
-    width: 100vw;
-    height: calc(100vh - 80px);
-    z-index: 1;
-    left: -451px;
-    top: -130px;
-  }
-  .back {
-    position: absolute;
-    right: 20px;
-    z-index: 99;
-    cursor: pointer;
-  }
+.map {
+  position: relative;
+  width: 100vw;
+  height: calc(100vh - 80px);
+  z-index: 1;
+  left: -451px;
+  top: -130px;
+}
 </style>