先来张效果图：
1、首先我们需要先去网上找一份按地域行政编码命名的JSON文件，你想实现哪个城市的地图就找对应城市的JSON文件，可以任意从下面两个平台下载：
① DataV.GeoAtlas地理小工具系列
② echarts-map最新实时geoJson文件下载_hxkj.vip_HashTang
2、接下来就是引入Echarts使用
① npm引入echarts
npm install echarts --save
② 在 main.js 中添加下面两行代码，全局引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
③ 1>先来一份简单的使用（没有动态请求地图data数据），新建一个Vue文件
要点：div盒子容器，给它固定宽
<template>
<div class="mapInfo">
<div class="top">
<span class="title">湛江市养殖数量分布情况</span>
<div class="areaRanking" id="areaRanking" style="width:500px;height:450px"></div>
<!-- 这是采用ref，如果是这种，下方调用的话就可以使用this.$refs.areaRanking
<div class="areaRanking" ref="areaRanking" style="width:500px;height:450px"></div>
-->
</div>
</div>
</template>
<script>
import zhanjiangMP from "./../../../../public/js/440800.json"
export default {
data() {
return {
option: {
title: {
text: '',
subtext: '',
sublink: ''
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c}'
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered'],
},
},
series: [{
name: '',
type: 'map',
map: '湛江',
label: {
show: false
},
data: [
{
name: '廉江市',
value: 15477
},
{
name: '遂溪县',
value: 15477.48
},
{
name: '吴川市',
value: 31686.1
},
{
name: '坡头区',
value: 6992.6
},
{
name: '赤坎区',
value: 44045.49
},
{
name: '霞山区',
value: 40689.64
},
{
name: '麻章区',
value: 37659.78
},
{
name: '雷州市',
value: 45180.97
},
{
name: '徐闻县',
value: 55204.26
}
]
}]
},
}
},
mounted() {
this.initAreaRanking();//执行initAreaRanking方法
},
methods: {
initAreaRanking() {
//let echarts = require('echarts');//若有在main.js全局引入就不需要这一行
echarts.init(document.getElementById("areaRanking")).dispose();//销毁，这一步是考虑到有时候会动态改变地图data数据，先销毁再初始化
let myChart = echarts.init(document.getElementById("areaRanking"));//初始化
//let myChart = echarts.init(this.$refs.areaRanking);//初始化(ref)
echarts.registerMap('湛江', zhanjiangMP);//这一步是引用JSON文件，第一个参数需要和上面series.map的名称对应
myChart.setOption(this.option);//此处option对象是写在全局data里面，也可以直接写在initAreaRanking()方法里面，如let option = {}。看自己所需
},
},
}
</script>
<style lang="scss" scoped>
</style>
关于option里面的属性，大家可以直接在echarts官网上找配置手册
option属性配置手册
2>刚才那一份写法是没有动态改变option.series[0].data里面的数据的，现在来一份动态改变data的写法。
<template>
<div class="mapInfo">
<div class="top">
<span class="title">湛江市养殖数量分布情况</span>
<div class="areaRanking" id="areaRanking" style="width:500px;height:450px"></div>
<!-- 这是采用ref，如果是这种，下方调用的话就可以使用this.$refs.areaRanking
<div class="areaRanking" ref="areaRanking" style="width:500px;height:450px"></div>
-->
</div>
</div>
</template>
<script>
import zhanjiangMP from "./../../../../public/js/440800.json"
export default {
data() {
return {
myChart:null,//全局变量，方便myChart.setOption(this.option)在其他Axios请求函数调用
option: {
title: {
text: '',
subtext: '',
sublink: ''
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c}'
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered'],
},
},
series: [{
name: '',
type: 'map',
map: '湛江',
label: {
show: false
},
data: [],//看axios请求的数据
}]
},
}
},
mounted() {
this.initAreaRanking();//执行initAreaRanking方法
},
methods: {
//获取地图接口数据
getAxiosData() {
let self = this;
let params = {
//这里放置接口请求需要的参数
};
//以下是接口请求
self.$api.dataCount
.getAxiosData(params )
.then((res) => {
if (res.data.code === 1) {
self.option.series[0].data = res.data.data.map((item) => {
return {
name: item.areaName,
value: item.num,
}; //目的是将接口返回的数据转为地图展示需要的格式，然后赋给option.series[0].data
});
//这一行就是关键，需要在请求完数据后才执行这一行，不然地图上面的数据不会响应
self.myChart.setOption(self.option);
}
})
.catch(() => {});
},
initAreaRanking() {
//let echarts = require('echarts');//若有在main.js全局引入就不需要这一行
echarts.init(document.getElementById("areaRanking")).dispose();//销毁，这一步是考虑到有时候会动态改变地图data数据，先销毁再初始化
this.myChart = echarts.init(document.getElementById("areaRanking"));//初始化
//this.myChart = echarts.init(this.$refs.areaRanking);//初始化(ref)
echarts.registerMap('湛江', zhanjiangMP);//这一步是引用JSON文件，第一个参数需要和上面series.map的名称对应
this.getAxiosData();//调用执行接口请求方法
},
},
}
</script>
<style lang="scss" scoped>
</style>
总结：以上就是关于echarts地图的展示用法
