整理代码

src/components/emap.vue

@@ -1,222 +0,0 @@
-<template>
-  <div class="chart-box">
-    <div :id="id" class="chart map-chart" />
-    <!-- <div v-if="hasTech" class="tech-zone" /> -->
-  </div>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-import { luoheJson } from "@/util/luoheJson";
-export default {
-  props: {
-    id: { type: String, required: true },
-    hasTech: { type: Boolean, default: true },
-    tooltip: { type: Function },
-    callback: { type: Function },
-    labelFormat: { type: Function },
-    mapData: { type: Object },
-    mouseOverHandler: { type: Function },
-    mouseOutHandler: { type: Function },
-    showVisualMap: { type: Boolean, default: false },
-    unit: { type: String, default: ''} // visiualMap的单位
-  },
-  data() {
-    return {
-      option: {
-        color: ["#27FFFE"],
-        visualMap: {
-          show: this.showVisualMap,
-          type:'continuous',
-          left: '0%',
-          bottom: '0%',
-          calculable: false,
-          textStyle: {
-            color: "white",
-          },
-          min: 0,
-          inRange: {
-            color: ["#27FFFE", "#38D0FF", "#0D6FC4", "#0102FF"],
-          },
-        },
-        geo: [
-          {
-            map: "qinghai",
-            itemStyle: {
-              shadowColor: "rgba(56,105,177,1)",
-              shadowOffsetY: 12,
-              shadowBlur: 1,
-            },
-            regions: [{
-              name: '西宁经济技术开发区',
-              itemStyle: {
-                shadowOffsetY: 0
-              }
-            }],
-            zoom: 1.2,
-          },
-          {
-            map: "qinghai",
-            itemStyle: {
-              shadowColor: "rgba(35,49,122,0.7)",
-              shadowOffsetY: 20,
-              shadowBlur: 1,
-            },
-            regions: [{
-              name: '西宁经济技术开发区',
-              itemStyle: {
-                shadowOffsetY: 0
-              }
-            }],
-            zoom: 1.2,
-          },
-        ],
-        tooltip: {
-          formatter: this.tooltip,
-          position: "inside",
-          backgroundColor: "transparent",
-        },
-        series: [
-          {
-            name: "map",
-            type: "map",
-            zoom: 1.2,
-            mapType: "qinghai",
-            itemStyle: {
-              borderColor: "#41BBE9",
-              borderWidth: 1,
-            },
-            emphasis: {
-              label: false,
-              itemStyle: {
-                shadowColor: "rgba(60,212,247,0.7)",
-                shadowOffsetY: 5,
-                shadowOffsetX: 5,
-                shadowBlur: 5,
-              },
-            },
-            data: [],
-          },
-        ],
-      },
-    };
-  },
-  watch: {
-    mapData: function (newV) {
-      const option = this.option;
-      const areas = option.series[0].data;
-      if (this.labelFormat) {
-        areas.map((item) => (item.label = this.labelFormat()));
-      }
-      if (this.showVisualMap) {
-        option.visualMap.max = Object.keys(newV).reduce((max, item) => {
-          if (newV[item] > max) {
-            return newV[item];
-          }
-          return max;
-        }, 0);
-        option.visualMap.text = [`${option.visualMap.max}(${this.unit})`, ""];
-        areas.map((item) => (item.value = newV[item.code]));
-      }
-      this.chart.setOption(option);
-    },
-  },
-  mounted() {
-    const luoheJson = luoheJson;
-    echarts.registerMap("luohe", luoheJson);
-    const areas = this.option.series[0].data;
-    const colors1 = [
-      "#08335B",
-      "#17579D",
-      "#16388E",
-      "#1890CA",
-      "#1A5BA7",
-      "#1986CC",
-      "#1A89CE",
-      "#53EFFB",
-      "#52EBFA",
-    ];
-    const colors2 = [
-      "#073459",
-      "#0C4271",
-      "#093D71",
-      "#1787D1",
-      "#0C416F",
-      "#1350AB",
-      "#17A0CD",
-      "#45B5E9",
-      "#47B9EB",
-    ];
-    qingHaiJson.features.map((item, idx) => {
-      const areaColor = {
-        type: "linear",
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          {
-            offset: 0,
-            color: colors1[idx],
-          },
-          {
-            offset: 1,
-            color: colors2[idx],
-          },
-        ],
-      };
-      areas.push({
-        code: item.properties.adcode,
-        name: item.properties.name,
-        itemStyle: {
-          areaColor: areaColor,
-        },
-        emphasis: {
-          itemStyle: {
-            areaColor: this.showVisualMap ? "#08335B" : areaColor,
-            borderColor: "rgba(77,212,247,0.7)",
-            borderWidth: 5,
-          },
-        },
-      });
-    });
-
-    var chart = echarts.init(document.getElementById(`${this.id}`));
-    chart.setOption(this.option);
-    if (this.mouseOverHandler) {
-      chart.on("mouseover", "series.map", this.mouseOverHandler);
-    }
-    if (this.mouseOutHandler) {
-      chart.on("mouseout", "series.map", this.mouseOutHandler);
-    }
-    this.chart = chart;
-    if (this.callback) {
-      this.callback(chart, qingHaiJson.features);
-    }
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.chart-box {
-  position: relative;
-}
-.chart {
-  width: 100%;
-  height: 100%;
-}
-.map-chart {
-  z-index: 9;
-}
-.tech-zone {
-  position: absolute;
-  background: #161963;
-  border: 2px dashed #4CD2F2;
-  z-index: 0;
-}
-.map-tooltip {
-  padding: 10px 20px;
-  background: url("../../static/img/u231.png");
-  background-size: 100% 100%;
-}
-</style>

src/pages/index/components/demo1.vue

@@ -51,7 +51,7 @@
     </div>
     <br>
     <br>
-    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+    <el-table :data="tableData">
       <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
       </el-table-column>
     </el-table>

src/util/dictionary.js

@@ -24,6 +24,9 @@ export default {
     '411103': '郾城区',
     '411104': '召陵区',
     '411121': '舞阳县',
-    '411122': '临颍县'
+    '411122': '临颍县',
+    '462003': '经济技术开发区',
+    '462033': '西城区',
+    '462300': '城乡一体化示范区'
   }
 }

src/util/options.js

@@ -0,0 +1,40 @@
+export default {
+  districtOptions: [{
+    value: '411102',
+    label: '源汇区'
+  }, {
+    value: '411103',
+    label: '郾城区'
+  },{
+    value: '411104',
+    label: '召陵区'
+  },{
+    value: '462033',
+    label: '西城区'
+  },{
+    value: '462003',
+    label: '经济技术开发区'
+  },{
+    value: '462300',
+    label: '城乡一体化示范区'
+  }, {
+    value: '411121',
+    label: '舞阳县'
+  }, {
+    value: '411122',
+    label: '临颍县'
+  }],
+  keyAreaOptions: [{
+    value: '商圈',
+    label: '商圈'
+  }, {
+    value: '学校',
+    label: '学校'
+  }, {
+    value: '医院',
+    label: '医院'
+  }, {
+    value: '旅游景点',
+    label: '旅游景点'
+  }],
+}