dvcp_v2_webapp/project/fengdu/AppBIBoard/components/fdMap.vue

<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",
  model: {
    prop: "ins",
    event: "input"
  },
  props: {
    ins: {default: null}
  },
  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
            },
          ]
        })
        this.$emit("input", this.map)
      } else if (c < 5) setTimeout(() => this.init(++c), 500)
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.fdMap {
}
</style>