整体界面完成

project/fengdu/AppBIBoard/components/fdMap.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="fdMap"/>
+</template>
+<script>
+import * as echarts from 'echarts'
+import geoJSON from "../assets/fengduGeo.json"
+import fdEdge from "../assets/fdEdge.json"
+
+export default {
+  name: "fdMap",
+  data() {
+    return {
+      map: null
+    }
+  },
+  methods: {
+    init(c = 0) {
+      if (this.$el) {
+        echarts.registerMap('fengdu', {geoJSON})
+        echarts.registerMap('fd', {geoJSON: fdEdge})
+        this.map = echarts.init(this.$el)
+        this.map.setOption({
+          geo: [
+            {
+              show: true,
+              map: 'fengdu',
+              itemStyle: {
+                areaColor: '#02bcff29',
+                borderColor: '#02FEFF21',
+                borderWidth: 1,
+              },
+              label: {
+                show: true,
+                color: '#02FEFF'
+              },
+              emphasis: {
+                disabled: true
+              },
+              zoom: 1.2
+            },
+            {
+              show: true,
+              map: 'fd', itemStyle: {
+                areaColor: 'transparent',
+                borderWidth: 2,
+                borderColor: '#02FEFF',
+                // shadowOffsetY: 2,
+                // shadowColor: '#02FEFF'
+              },
+              emphasis: {
+                disabled: true
+              },
+              zoom: 1.2
+            },
+          ]
+        })
+      } else if (c < 5) setTimeout(() => this.init(++c), 500)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+<style scoped lang="scss">
+.fdMap {
+}
+</style>