Echarts 全国各省市区地图JS/geojson/svg/excel数据下载地址

下载地址：http://datav.aliyun.com/tools/atlas/#&lat=21.301500289031342&lng=115.44409418670693&zoom=6.5

 js 代码：

1. static文件夹存放地图json文件

 2. 接口get请求，引入本地资源

// 获取各个国家的静态地图文件
export function getCountryFile(code){
  return Http({
    url: '/static/geoJSON/'+ code +'.json',
    method: 'GET'
  });
}

3.echarts 地图调用

<template>
  <div class="china" :style="{height:height,width}"></div>
</template>
<script>
// import echarts from 'echarts'
import { mapState } from 'vuex'
import { getCountryFile } from '@/api/comm.js' 
// import worldJs from 'nodeModules/echarts/map/js/world.js'
// import USA from 'static/geoJSON/USA.json'
// import Juguang from 'static/geoJSON/Juguang.json'

import jportalCommon from '@/jportal-common-update'

export default {
  data(){
    return {
      chart:null,
      countryName: 'Belize' // 从登录信息获取国家名字 jportalCommon.userStorageService.getUser().xxx
    }
  },
  computed:mapState({
    // 箭头函数可使代码更简练state
    scale: state =>state.overView.scale
  }),
  mounted () {
    let that =this
    that.chart = this.$echarts.init(this.$el);
    // console.log(this.$el); 两者相等
    // console.log(document.querySelector('.china'));
    that.initCountry()

    if (this.autoResize) {
       window.addEventListener('resize', this.__resizeHanlder)
    }
      // 监听侧边栏的变化
      const sidebarElm = document.getElementsByClassName('content-menu')[0]
      sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  methods: {
    __resizeHanlder(){
       this.chart.resize()
    },
    initCountry () {
      // console.log(this.countryName)
      getCountryFile(this.countryName).then(contry => {
        // console.log(this.countryName, contry)
        this.$echarts.registerMap(this.countryName, contry)
        this.initChart()
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    genData(){
       var selected = {};
        selected['project online'] =true
        selected['item exception'] =true
        return selected
    },
    initChart(){
      
      this.chart.setOption({
            color:this.color,
            geo: {
                        map: this.countryName,
                        label: {
                            normal:{
                                show: false,
                                color:'#cccccc'
                            },
                            emphasis: {
                                show: true,
                                color:'#cccccc'
                            }
                        },
                        roam: true,
                        scaleLimit: {
                            min: 1.1,
                            max:3
                        },
                        aspectScale: 1,
                        top: 50,
                        itemStyle: {
                            normal: {
                            areaColor: 'RGBA(212, 223, 248, 1)',
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: '#538db8',
                                borderColor: '#06426f'
                            }
                }
                    },
            legend: {
              itemWidth:10,
              itemHeight:5,
              bottom: 5,
              left: '0',
              data:['project online','item exception']
           },
           tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                  //return params.name + params.value[2];
                   return params.name;
                    }
                 },
            series: [
              {
                  name: 'project online', // series名称
                          type: 'scatter',
                          coordinateSystem: 'geo',                           
                          symbol: 'circle',
                          symbolSize: 8,
                          hoverAnimation: true,
                          large:true,
                          rippleEffect: {
                                period:4,
                                scale:2,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#05bc42'
                                },
                                emphasis: {
                                    borderColor: '#ffffff',
                                    borderWidth: 2,
                                    borderType: 'solid'
                                }
                            }
                        
              },
               {
                            name: 'item exception',
                            type:'scatter',
                            coordinateSystem: 'geo',                           
                            symbolSize: 8,
                            hoverAnimation: true,
                            large:true,
                            rippleEffect: {
                                period:4,
                                scale:2,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#dd9017'
                                },
                                emphasis: {
                                    borderColor: '#ffffff',
                                    borderWidth: 2,
                                    borderType: 'solid'
                                }
                            }               
                        },
            ]
       })
    },
    drew(){
      this.chart.setOption({
        legend:{
           selected:this.genData(),
        },
        series:[
          {
            data:this.mapData.onlineSubsystem
          },
           {
            data:this.mapData.unusualSubsystem
          }
        ]
      })
    }
  },
  watch:{
    mapData(v){
      this.drew()
    },
    scale(){
      this.__resizeHanlder()
    },
    countryName (v, ov) {
      this.initCountry() 
    }
  },
  props:{
    mapData:{
      type:Object,
      default:()=>{
          return {}
      }
    },
    background:{
      type:String,
      default:'#fff'
    },
    height:{
       type: String,
       default:'100%'
    },
    color:{
      type:Array,
      default:()=>{
          return ['#6faa30','#fe4e77','#fe4e77']
      }
    },
    {
       type: String,
       default:'100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
  },
}
</script>
<style lang="scss" scoped>

</style>

 4. 地图展示

http://datav.aliyun.com/tools/atlas/#&lat=21.301500289031342&lng=115.44409418670693&zoom=6.5