vue中使用echart创建上海地图

效果图！
前提：是在vue的项目中用到的
全部代码（用到的东西在代码里面有写了）

• 地图文件的来源
• 1.本地安装echart插件，可以在（node_modules/echarts/map/json/province/shanghai.json）找到数据来源，里面有js和json两种，各个省份的都有
• 2.阿里云地图选择器地址： http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4

<style lang="scss">
  .o-echarts {
    min-width: 30px;
    min-height: 30px;
    width: 800px;
    height: 800px;
    //可以控制地图的位置
    left: 15px;
    top: -30px;
  }
</style>
<template>
  <div id="echartMap" class="o-echarts" ></div>
</template>

<script>
  import {registrationStatistics} from '@/api/business.js'
  import echarts from 'echarts';
  /**
   * 地图文件的来源
   *   1.本地安装echart插件，可以在（node_modules/echarts/map/json/province/shanghai.json）找到数据来源，里面有js和json两种，各个省份的都有
   *   2.阿里云地图选择器地址：
   *    http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4
   * 
   */
  import JSON from '../../../components/Echarts/json/shanghai.json';//(手动修改过的数据)
  export default {
    name: 'echart-map',
    data() {
      return {
        echartObj: null,
        radioActive: 'A',
        option: {
          title: {
            text: '',
            top: '1%',
            left: '8%',
            textStyle: {
              fontSize: 18,
              fontWeight: 300,
              color: '#b6d7ff'
            }
          },
          //鼠标放上去的文字提示
          tooltip: {
            padding: 0,
            backgroundColor: '#6B99FF',
            padding: 10, 
            textStyle:{
              color:'#fff',
              lineHeight:'18px'
            },
            formatter: params => {
              return params.name + '<br/>' + "共计：" + params.value + "家";
            }
          },
          visualMap: {
            min: 0,
            max: 500,
            top:'7%',
            right:"84%",
            show: true,
            splitNumber: 5,
            inRange: {
              color: ['#6B99FF']
            },
            textStyle: {
              color: '#444'
            },
            splitList: [   
              {start: 500, end:600},{start: 400, end: 500},  
              {start: 300, end: 400},{start: 200, end: 300},  
              {start: 100, end: 200},{start: 0, end: 100},  
            ],  
          },
          geo: {
            map: '上海',
            label: {
              normal: {
                show: true,
                //地图中省份和数量的显示
                formatter:this.formatter,
                color: '#fff'
              },
              emphasis: {
                show: true,
                color: '#fff'
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'transparent',
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#feb6aa' // hover效果
              }
            },
            left: '5%',
            right: '5%',
            top: '5%',
            bottom: '5%'
          },
          series: [{
            name: '',
            type: 'map',
            mapType: 'shanghai', 
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: [],
          }],
        }
      };
    },
    computed:{
       _show:{
           get:function () {
              
             
              return this.show
          },
          set:function (newVal) {
              this.$emit('update:show', newVal)
          }
      }
    },
    watch:{
      show: {
          immediate:true,//templat父组件中需要深度监听可以监听到
          handler(newValue, oldValue) {
            console.log(newValue)
                    console.log("进入到监听部分")
                    if(newValue){
                      this.$nextTick(()=>{ //此处使用这个可以等节点渲染后再获取节点
                          this.charts()
                      })
                  }
          }
      }
    },
    props:{
      serviceTypeId:{
        type:String,
      },
      //从后台接口获取来的数据
      listArr:{
        type:Array,
      },
      mouseenterFlag:{
          type: Boolean,
          default: false
      },
      show:{
          type: Boolean,
          default: false
      },
    },
    mounted() {
    },
    methods: {
      charts(){
        this.$nextTick(() => {
              this.echartObj = echarts.init(document.getElementById("echartMap"));
              echarts.registerMap('上海', JSON);
              console.log("==========JSON.features============")
              console.log(JSON.features)
              this.echartObj.setOption(this.getOptions(), true);
              window.addEventListener('resize', () => {
                if (this.echartObj && this.echartObj.resize) {
                  this.echartObj.resize();
                }
              })
            });
         
      },
     
      getOptions() {
        this.setOptions('series', (() => {
          console.log(this.listArr)
          const arr = [];
          arr['push']({
                      // name: item,
                      type: 'map',