修复组件缺少名字的问题

components/AiDvMap.vue

@@ -5,249 +5,251 @@
 </template>
 
 <script>
-  import * as echarts from 'echarts'
+import * as echarts from 'echarts'
-  import http from "dui/lib/js/request";
+import http from "dui/lib/js/request";
-  export default {
-    name: '',
 
-    data () {
+export default {
-      return {
+  name: 'AiDvMap',
-        timer: null,
+  data() {
-        v: `AiDvMap-${new Date().getTime()}`,
+    return {
-        chart: null
+      timer: null,
-      }
+      v: `AiDvMap-${new Date().getTime()}`,
-    },
+      chart: null
-    directives:{
+    }
-      resize: {
+  },
-        bind(el, binding) {
+  directives: {
-          let width = ''
+    resize: {
-          let height = ''
+      bind(el, binding) {
-          function isReize() {
+        let width = ''
-            const style = document.defaultView.getComputedStyle(el)
+        let height = ''
-            if (width !== style.width || height !== style.height) {
+
-              binding.value({
+        function isReize() {
-                width: style.width,
+          const style = document.defaultView.getComputedStyle(el)
-                height:style.height
+          if (width !== style.width || height !== style.height) {
-              })
+            binding.value({
-            }
+              width: style.width,
-            width = style.width
+              height: style.height
-            height = style.height
+            })
           }
-          el.__vueSetInterval__ = setInterval(isReize, 300)
+          width = style.width
-        },
+          height = style.height
-
-        unbind(el) {
-          clearInterval(el.__vueSetInterval__)
         }
+
+        el.__vueSetInterval__ = setInterval(isReize, 300)
+      },
+
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__)
       }
-    },
+    }
-    mounted () {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+
+  methods: {
+    onDomResize() {
       this.$nextTick(() => {
-        this.initChart()
+        this.chart.resize()
       })
     },
 
-    methods: {
+    initChart() {
-      onDomResize () {
+      this.chart = echarts.init(document.querySelector(`.${this.v}`))
-        this.$nextTick(() => {
+      this.getData().then(res => {
-          this.chart.resize()
+        if (res.code === 0) {
-        })
+          echarts.registerMap('滨海县', res.data)
-      },
 
-      initChart () {
+          let option = {
-        this.chart = echarts.init(document.querySelector(`.${this.v}`))
+            geo: [
-        this.getData().then(res => {
+              {
-          if (res.code === 0) {
+                map: "滨海县",
-            echarts.registerMap('滨海县', res.data)
+                aspectScale: 1,
-
+                zoom: 0.65,
-            let option = {
+                layoutCenter: ["50%", "50%"],
-              geo: [
+                layoutSize: "180%",
-                {
+                show: true,
-                  map: "滨海县",
+                roam: false,
-                  aspectScale: 1,
+                emphasis: {
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "50%"],
-                  layoutSize: "180%",
                   show: true,
-                  roam: false,
-                  emphasis: {
-                    show: true,
-                      label: {
-                      textStyle: {
-                        color: "#FFFFFF"
-                      },
-                    },
-                    itemStyle: {
-                      // areaColor: '#fff'
-                    }
-                  },
                   label: {
-                    normal: {
+                    textStyle: {
-                      show: false,
+                      color: "#FFFFFF"
-                      color: '#fff',
+                    },
-                      fontSize: '20'
-                    }
                   },
                   itemStyle: {
-                    normal: {
+                    // areaColor: '#fff'
-                      borderColor: "rgba(2, 198, 220, 1)",
-                      borderWidth: 2,
-                      shadowColor: "rgba(2, 198, 220, 0.1)",
-                      shadowOffsetY: 10,
-                      shadowBlur: 120,
-                      areaColor: "#163c56",
-                    },
                   }
                 },
-                // 重影
+                label: {
-                {
+                  normal: {
-                  type: "map",
+                    show: false,
-                  map: "滨海县",
+                    color: '#fff',
-                  zlevel: -1,
+                    fontSize: '20'
-                  aspectScale: 1,
+                  }
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "51%"],
-                  layoutSize: "180%",
-                  roam: false,
-                  silent: true,
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 1,
-                      // borderColor:"rgba(17, 149, 216,0.6)",
-                      borderColor: "rgba(2, 198, 220, 0.6)",
-                      shadowColor: "rgba(2, 198, 220, 0.6)",
-                      shadowOffsetY: 5,
-                      shadowBlur: 15,
-                      areaColor: "rgba(5,21,35,0.1)",
-                    },
-                  },
                 },
-                {
+                itemStyle: {
-                  type: "map",
+                  normal: {
-                  map: "滨海县",
+                    borderColor: "rgba(2, 198, 220, 1)",
-                  zlevel: -2,
+                    borderWidth: 2,
-                  aspectScale: 1,
+                    shadowColor: "rgba(2, 198, 220, 0.1)",
-                  zoom: 0.65,
+                    shadowOffsetY: 10,
-                  layoutCenter: ["50%", "52%"],
+                    shadowBlur: 120,
-                  layoutSize: "180%",
+                    areaColor: "#163c56",
-                  roam: false,
-                  silent: true,
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 1,
-                      // borderColor: "rgba(57, 132, 188,0.4)",
-                      borderColor: "rgba(2, 198, 220, 0.4)",
-                      shadowColor: "rgba(2, 198, 220, 0.4)",
-                      shadowOffsetY: 5,
-                      shadowBlur: 15,
-                      areaColor: "transpercent",
-                    },
-                  },
-                },
-                {
-                  type: "map",
-                  map: "滨海县",
-                  zlevel: -3,
-                  aspectScale: 1,
-                  zoom: 0.65,
-                  layoutCenter: ["50%", "53%"],
-                  layoutSize: "180%",
-                  roam: false,
-                  silent: true,
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 1,
-                      // borderColor: "rgba(11, 43, 97,0.8)",
-                      borderColor: "rgba(2, 198, 220, 0.2)",
-                      shadowColor: "rgba(2, 198, 220, 0.2)",
-                      shadowOffsetY: 15,
-                      shadowBlur: 10,
-                      areaColor: "transpercent",
-                    },
                   },
                 }
-              ],
+              },
-              series: [
+              // 重影
-                {
+              {
-                  type: 'scatter',
+                type: "map",
-                  coordinateSystem: 'geo',
+                map: "滨海县",
-                  z: 3,
+                zlevel: -1,
-                  zlevel: 3,
+                aspectScale: 1,
-                  // symbol: 'none',
+                zoom: 0.65,
-                  symbolSize: 16,
+                layoutCenter: ["50%", "51%"],
-                  rippleEffect: {
+                layoutSize: "180%",
-                    period: 2,
+                roam: false,
-                    scale: 4,
+                silent: true,
-                    brushType: 'fill'
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor:"rgba(17, 149, 216,0.6)",
+                    borderColor: "rgba(2, 198, 220, 0.6)",
+                    shadowColor: "rgba(2, 198, 220, 0.6)",
+                    shadowOffsetY: 5,
+                    shadowBlur: 15,
+                    areaColor: "rgba(5,21,35,0.1)",
                   },
-                  label: {
+                },
-                    show: true,
+              },
-                    formatter: e => {
+              {
-                      const name = e.data[3]
+                type: "map",
-                      const value = e.data[2]
+                map: "滨海县",
-                      return `{a|${name}}\n{b|${value}}`
+                zlevel: -2,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "52%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor: "rgba(57, 132, 188,0.4)",
+                    borderColor: "rgba(2, 198, 220, 0.4)",
+                    shadowColor: "rgba(2, 198, 220, 0.4)",
+                    shadowOffsetY: 5,
+                    shadowBlur: 15,
+                    areaColor: "transpercent",
+                  },
+                },
+              },
+              {
+                type: "map",
+                map: "滨海县",
+                zlevel: -3,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "53%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor: "rgba(11, 43, 97,0.8)",
+                    borderColor: "rgba(2, 198, 220, 0.2)",
+                    shadowColor: "rgba(2, 198, 220, 0.2)",
+                    shadowOffsetY: 15,
+                    shadowBlur: 10,
+                    areaColor: "transpercent",
+                  },
+                },
+              }
+            ],
+            series: [
+              {
+                type: 'scatter',
+                coordinateSystem: 'geo',
+                z: 3,
+                zlevel: 3,
+                // symbol: 'none',
+                symbolSize: 16,
+                rippleEffect: {
+                  period: 2,
+                  scale: 4,
+                  brushType: 'fill'
+                },
+                label: {
+                  show: true,
+                  formatter: e => {
+                    const name = e.data[3]
+                    const value = e.data[2]
+                    return `{a|${name}}\n{b|${value}}`
+                  },
+                  fontSize: 16,
+                  rich: {
+                    a: {
+                      width: '100%',
+                      color: '#fff',
+                      lineHeight: 20,
+                      fontSize: 16
                     },
-                    fontSize: 16,
+                    b: {
-                    rich: {
+                      backgroundColor: {
-                      a: {
+                        // image: require('@/assets/images/point.png')
-                        width: '100%',
-                        color: '#fff',
-                        lineHeight: 20,
-                        fontSize: 16
                       },
-                      b: {
+                      color: '#fff',
-                        backgroundColor: {
+                      height: 56,
-                          // image: require('@/assets/images/point.png')
+                      align: 'center',
-                        },
+                      width: 50,
-                        color: '#fff',
+                      fontSize: 16
-                        height: 56,
-                        align: 'center',
-                        width: 50,
-                        fontSize: 16
-                      }
                     }
-                  },
+                  }
-                  data: []
+                },
-                }
+                data: []
-              ]
+              }
-            }
+            ]
-            this.chart.setOption(option)
           }
-        })
+          this.chart.setOption(option)
-      },
-
-      convertData (data) {
-        return data.map(v => {
-          return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
-        })
-      },
-
-      qqMapTransBMap (lng, lat) {
-        const x_pi = 3.14159265358979324 * 3000.0 / 180.0
-        var x = lng
-        var y = lat
-        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
-        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
-
-        return {
-          lng: z * Math.cos(theta) + 0.0065,
-          lat: z * Math.sin(theta) + 0.006
         }
-      },
+      })
+    },
 
-      getData () {
+    convertData(data) {
-        return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.$store.state.user.info.areaId.substr(0, 6)}`)}`, )
+      return data.map(v => {
+        return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
+      })
+    },
+
+    qqMapTransBMap(lng, lat) {
+      const x_pi = 3.14159265358979324 * 3000.0 / 180.0
+      var x = lng
+      var y = lat
+      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
+      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
+
+      return {
+        lng: z * Math.cos(theta) + 0.0065,
+        lat: z * Math.sin(theta) + 0.006
       }
+    },
+
+    getData() {
+      return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.$store.state.user.info.areaId.substr(0, 6)}`)}`,)
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .AiDvMap {
+.AiDvMap {
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-  }
+}
 </style>

components/index.js

@@ -18,7 +18,6 @@ const install = function (Vue) {
   let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
   if (contexts) {
     contexts.keys().map((e) => {
-      console.log(e)
       components.push(contexts(e).default);
       Vue.component(contexts(e).default.name, contexts(e).default);
     });