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 地图调用

  1 <template>
  2   <div class="china" :style="{height:height,width:width}"></div>
  3 </template>
  4 <script>
  5 // import echarts from 'echarts'
  6 import { mapState } from 'vuex'
  7 import { getCountryFile } from '@/api/comm.js' 
  8 // import worldJs from 'nodeModules/echarts/map/js/world.js'
  9 // import USA from 'static/geoJSON/USA.json'
 10 // import Juguang from 'static/geoJSON/Juguang.json'
 11 
 12 import jportalCommon from '@/jportal-common-update'
 13 
 14 export default {
 15   data(){
 16     return {
 17       chart:null,
 18       countryName: 'Belize' // 从登录信息获取国家名字 jportalCommon.userStorageService.getUser().xxx
 19     }
 20   },
 21   computed:mapState({
 22     // 箭头函数可使代码更简练state
 23     scale: state =>state.overView.scale
 24   }),
 25   mounted () {
 26     let that =this
 27     that.chart = this.$echarts.init(this.$el);
 28     // console.log(this.$el); 两者相等
 29     // console.log(document.querySelector('.china'));
 30     that.initCountry()
 31 
 32     if (this.autoResize) {
 33        window.addEventListener('resize', this.__resizeHanlder)
 34     }
 35       // 监听侧边栏的变化
 36       const sidebarElm = document.getElementsByClassName('content-menu')[0]
 37       sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
 38   },
 39   methods: {
 40     __resizeHanlder(){
 41        this.chart.resize()
 42     },
 43     initCountry () {
 44       // console.log(this.countryName)
 45       getCountryFile(this.countryName).then(contry => {
 46         // console.log(this.countryName, contry)
 47         this.$echarts.registerMap(this.countryName, contry)
 48         this.initChart()
 49       }).catch(err => {
 50         return Promise.reject(err)
 51       })
 52     },
 53     genData(){
 54        var selected = {};
 55         selected['project online'] =true
 56         selected['item exception'] =true
 57         return selected
 58     },
 59     initChart(){
 60       
 61       this.chart.setOption({
 62             color:this.color,
 63             geo: {
 64                         map: this.countryName,
 65                         label: {
 66                             normal:{
 67                                 show: false,
 68                                 color:'#cccccc'
 69                             },
 70                             emphasis: {
 71                                 show: true,
 72                                 color:'#cccccc'
 73                             }
 74                         },
 75                         roam: true,
 76                         scaleLimit: {
 77                             min: 1.1,
 78                             max:3
 79                         },
 80                         aspectScale: 1,
 81                         top: 50,
 82                         itemStyle: {
 83                             normal: {
 84                             areaColor: 'RGBA(212, 223, 248, 1)',
 85                                 borderColor: '#fff',
 86                                 borderWidth: 1
 87                             },
 88                             emphasis: {
 89                                 areaColor: '#538db8',
 90                                 borderColor: '#06426f'
 91                             }
 92                 }
 93                     },
 94             legend: {
 95               itemWidth:10,
 96               itemHeight:5,
 97               bottom: 5,
 98               left: '0',
 99               data:['project online','item exception']
100            },
101            tooltip: {
102                     trigger: 'item',
103                     formatter: function (params) {
104                   //return params.name + params.value[2];
105                    return params.name;
106                     }
107                  },
108             series: [
109               {
110                   name: 'project online', // series名称
111                           type: 'scatter',
112                           coordinateSystem: 'geo',                           
113                           symbol: 'circle',
114                           symbolSize: 8,
115                           hoverAnimation: true,
116                           large:true,
117                           rippleEffect: {
118                                 period:4,
119                                 scale:2,
120                                 brushType: 'stroke'
121                             },
122                             label: {
123                                 normal: {
124                                     show: false
125                                 },
126                                 emphasis: {
127                                     show: false
128                                 }
129                             },
130                             itemStyle: {
131                                 normal: {
132                                     color: '#05bc42'
133                                 },
134                                 emphasis: {
135                                     borderColor: '#ffffff',
136                                     borderWidth: 2,
137                                     borderType: 'solid'
138                                 }
139                             }
140                         
141               },
142                {
143                             name: 'item exception',
144                             type:'scatter',
145                             coordinateSystem: 'geo',                           
146                             symbolSize: 8,
147                             hoverAnimation: true,
148                             large:true,
149                             rippleEffect: {
150                                 period:4,
151                                 scale:2,
152                                 brushType: 'stroke'
153                             },
154                             label: {
155                                 normal: {
156                                     show: false
157                                 },
158                                 emphasis: {
159                                     show: false
160                                 }
161                             },
162                             itemStyle: {
163                                 normal: {
164                                     color: '#dd9017'
165                                 },
166                                 emphasis: {
167                                     borderColor: '#ffffff',
168                                     borderWidth: 2,
169                                     borderType: 'solid'
170                                 }
171                             }               
172                         },
173             ]
174        })
175     },
176     drew(){
177       this.chart.setOption({
178         legend:{
179            selected:this.genData(),
180         },
181         series:[
182           {
183             data:this.mapData.onlineSubsystem
184           },
185            {
186             data:this.mapData.unusualSubsystem
187           }
188         ]
189       })
190     }
191   },
192   watch:{
193     mapData(v){
194       this.drew()
195     },
196     scale(){
197       this.__resizeHanlder()
198     },
199     countryName (v, ov) {
200       this.initCountry() 
201     }
202   },
203   props:{
204     mapData:{
205       type:Object,
206       default:()=>{
207           return {}
208       }
209     },
210     background:{
211       type:String,
212       default:'#fff'
213     },
214     height:{
215        type: String,
216        default:'100%'
217     },
218     color:{
219       type:Array,
220       default:()=>{
221           return ['#6faa30','#fe4e77','#fe4e77']
222       }
223     },
224     width:{
225        type: String,
226        default:'100%'
227     },
228     autoResize: {
229       type: Boolean,
230       default: true
231     },
232   },
233 }
234 </script>
235 <style lang="scss" scoped>
236 
237 </style>
View Code

 4. 地图展示

 

 

 

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

posted @ 2021-04-20 10:15  front-gl  阅读(3550)  评论(0)  编辑  收藏  举报