地图数据切换

xiaomiao
Showing 2 changed files with 99 additions and 70 deletions
src/common/map/yushu.js
src/components/Echart/Map/Chart.vue
--- a/src/common/map/yushu.js 0 → 100644
View file @523cf0b
+++ b/src/common/map/yushu.js 0 → 100644
View file @523cf0b
--- a/src/components/Echart/Map/Chart.vue
View file @523cf0b
+++ b/src/components/Echart/Map/Chart.vue
View file @523cf0b
 <template>
  <!-- 地图 -->
-  <Echart id="centreLeft2Chart" class="centreLeft2Chart":key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
+  <Echart
-    :options="options"></Echart>
+    id="centreLeft2Chart"
+    class="centreLeft2Chart"
+    :key="key"
+    ref="centreLeft2ChartRef"
+    width="100%"
+    height="100%"
+    :options="options"
+  ></Echart>
 </template>
 <script>
-import Echart from '@/common/echart';
+import Echart from "@/common/echart";
+import { mapGetters } from "vuex";
 export default {
-  data () {
+  data() {
    return {
      options: {},
      max: "100", //最大value值
      min: "1", // 最小value值
-      key: 0
+      key: 0,
+      mapjson: "",
    };
  },
  components: {
    Echart,
  },
-  created () {
+  created() {},
-    require(`@/common/map/hanzhong.js`)
-  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
-   mounted() {
+  mounted() {
-   window.addEventListener("resize", () => {
-      this.key++
+    window.addEventListener("resize", () => {
-    });  },
+      this.key++;
+    });
+      this.getDistrictcode();
+  },
  watch: {
    cdata: {
-      handler (newData) {
+      handler(newData) {
        let _this = this;
        // 设置点的位置(经纬度)
        const geoCoordMap = {
@@ -52,92 +62,96 @@ export default {
        this.options = {
          showLegendSymbol: true,
          tooltip: {
-            trigger: 'item',
+            trigger: "item",
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
-            position: point => {
+            position: (point) => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
-            formatter: params => {
+            formatter: (params) => {
-              return `<div style="">${params.name}:${params.value + "个"}</div>`
+              return `<div style="">${params.name}:${
-            }
+                params.value + "个"
+              }</div>`;
+            },
          },
          visualMap: {
            min: 0,
            max: _this.max,
-            bottom: '13%',
+            bottom: "13%",
            left: 50,
            splitNumber: 6,
            seriesIndex: [0],
            itemWidth: 20, // 每个图元的宽度
-            itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
+            itemGap: 2, // 每两个图元之间的间隔距离，单位为px
-            pieces: [      // 自定义每一段的范围，以及每一段的文字
+            pieces: [
-              { gte: 100, label: '100以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
+              // 自定义每一段的范围，以及每一段的文字
-              { gte: 50, lte: 6000, label: '20-100', color: '#3375e4' },
+              { gte: 100, label: "100以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
-              { gte: 20, lte: 2000, label: '1-200', color: '#6797ef' },
+              { gte: 50, lte: 6000, label: "20-100", color: "#3375e4" },
-              { gte: 1, lte: 1000, label: '1-20', color: '#96b5ef' },
+              { gte: 20, lte: 2000, label: "1-200", color: "#6797ef" },
+              { gte: 1, lte: 1000, label: "1-20", color: "#96b5ef" },
            ],
            textStyle: {
-              color: '#737373'
+              color: "#737373",
-            }
+            },
          },
          geo: {
            aspectScale: 1, //长宽比
            zoom: 1.1,
-            mapType: '', // 自定义扩展图表类型
+            mapType: "", // 自定义扩展图表类型
-            top: '15%',
+            top: "15%",
-            left: '10%',
+            left: "10%",
-            map: '汉中市',
+            map: "汉中市",
            itemStyle: {
-              normal: {//阴影
+              normal: {
-                areaColor: '#5689FD ',
+                //阴影
-                shadowColor: '#21371d',
+                areaColor: "#5689FD ",
+                shadowColor: "#21371d",
                borderWidth: 0,
                shadowOffsetX: 2,
-                shadowOffsetY: 25
+                shadowOffsetY: 25,
-              }
+              },
-            }
+            },
          },
          series: [
            {
-              type: 'map',
+              type: "map",
              aspectScale: 1, //长宽比
              zoom: 1.1,
-              mapType: '汉中市', // 自定义扩展图表类型
+              mapType: "汉中市", // 自定义扩展图表类型
-              top: '15%',
+              top: "15%",
-              left: '10%',
+              left: "10%",
              itemStyle: {
                normal: {
-                  areaColor: 'rgba(19,54,162,.5)',
+                  areaColor: "rgba(19,54,162,.5)",
-                  borderColor: 'rgba(0,242,252,.5)',
+                  borderColor: "rgba(0,242,252,.5)",
                  borderWidth: 2,
                  shadowBlur: 1,
-                  borderColor: 'rgb(155, 200, 200)',
+                  borderColor: "rgb(155, 200, 200)",
-                  shadowColor: '#44f2fc',
+                  shadowColor: "#44f2fc",
-                }
+                },
              },
              label: {
-                formatter: params => {
+                formatter: (params) => {
-               return `${params.name}\n${params.value+"个"}`;
+                  return `${params.name}\n${params.value + "个"}`;
-            },
+                },
                show: true,
-                position: 'insideRight',
+                position: "insideRight",
                textStyle: {
                  fontSize: 14,
-                  color: '#efefef',
+                  color: "#efefef",
                },
                emphasis: {
                  textStyle: {
-                    color: '#fff',
+                    color: "#fff",
-                  }
+                  },
-                }
+                },
              },
              data: newData,
-            }
+            },
          ],
        };
        // 重新选择区域
@@ -148,9 +162,26 @@ export default {
      deep: true,
    },
  },
+  computed: {
+    ...mapGetters(["sidebar", "dicData"]),
+    logoName() {
+      return (
+        this.dicData["sysCode"] &&
+        this.dicData["sysCode"].filter((item) => item.DCODE == "areaMap")
+      );
+    },
+  },
  methods: {
+    // 根据行政区代码匹配行政区
+    getDistrictcode() {
+      console.log("this.logoName.DNAME", this.logoName.DNAME);
+      if ((this.logoName.DNAME = "map610700")) {
+        this.mapjson = "hanzhong";
+         require(`@/common/map/${this.mapjson}.js`);
+      }
+    },
    // 开启定时器
-    startInterval () {
+    startInterval() {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
@@ -162,7 +193,7 @@ export default {
      }, time);
    },
    // 重新随机选中地图区域
-    reSelectMapRandomArea () {
+    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        try {
@@ -172,27 +203,27 @@ export default {
            index = Math.floor(Math.random() * length);
          }
          map.dispatchAction({
-            type: 'mapUnSelect',
+            type: "mapUnSelect",
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          map.dispatchAction({
-            type: 'showTip',
+            type: "showTip",
            seriesIndex: 0,
            dataIndex: index,
          });
          map.dispatchAction({
-            type: 'mapSelect',
+            type: "mapSelect",
            seriesIndex: 0,
            dataIndex: index,
          });
          this.preSelectMapIndex = index;
        } catch (error) {
-          console.log(error)
+          console.log(error);
        }
      });
    },
-    handleMapRandomSelect () {
+    handleMapRandomSelect() {
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
@@ -201,34 +232,32 @@ export default {
            _self.reSelectMapRandomArea();
          }, 0);
          // 移入区域，清除定时器、取消之前选中并选中当前
-          map.on('mouseover', function (params) {
+          map.on("mouseover", function (params) {
            clearInterval(_self.intervalId);
            map.dispatchAction({
-              type: 'mapUnSelect',
+              type: "mapUnSelect",
              seriesIndex: 0,
              dataIndex: _self.preSelectMapIndex,
            });
            map.dispatchAction({
-              type: 'mapSelect',
+              type: "mapSelect",
              seriesIndex: 0,
              dataIndex: params.dataIndex,
            });
            _self.preSelectMapIndex = params.dataIndex;
          });
          // 移出区域重新随机选中地图区域，并开启定时器
-          map.on('globalout', function () {
+          map.on("globalout", function () {
            _self.reSelectMapRandomArea();
            _self.startInterval();
          });
          this.startInterval();
        } catch (error) {
-          console.log(error)
+          console.log(error);
        }
      });
    },
  },
 };
 </script>
-<style>
+<style></style>
-</style>