**
Echarts 绘制地图省、市、区、县（以及点击显示下级，支持坐标定位）
**
上代码
javascript
<template>
<div class="mapCont">
<div id="mapSelf" @contextmenu.prevent="disableContextMenu"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import mapData from "./addressMode/xiangyang.json";//引入json数据 下载地址http://datav.aliyun.com/tools/atlas/#&lat=37.82280243352756&lng=107.4462890625&zoom=4
import maplhk from "./addressMode/老河口市.json";
export default {
name: "HelloWorld",
data() {
return {
chart: null,
rowData: [
{ name: "谷城县", jwd: [111.659572, 32.269471], value: [111.659572, 32.269471, 12] },
{ name: "谷城县", jwd: [111.659572, 32.200471], value: [111.659572, 32.200471, 24] },
]
};
},
mounted() {
this.mapInit(mapData, this.rowData)
},
methods: {
mapInit(modeData, rowData) {
this.chart = echarts.init(document.getElementById("mapSelf"));
echarts.registerMap("xiangyang", modeData); //mapData是定义的数据初始化
this.chart.setOption({
// legend: {//可设置多个颜色
// orient: 'vertical',
// x: 'left',
// data: ['蓝点', '红点']
// },
// tooltip: {
// trigger: "item",
// formatter: "{b}",
// },
geo: {//定义地图样式
type: "map",
map: "xiangyang",
aspectScale: 0.75, //长宽比
selectedMode: "single", //表示选种模式是否为单选"mutiple"表多选
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
color: "#FFFFFFcc", //文字颜色
fontSize: 16
}
},
emphasis: {
show: true,
textStyle: {
color: "#fff", //鼠标hover文字颜色
fontSize: 18
}
}
},
itemStyle: {
normal: {
areaColor: "#0069e5", //整个背景填充颜色
borderColor: "#ffffff" //边界颜色
},
emphasis: {
areaColor: "darkorange" //鼠标hover颜色，区域选中颜色
}
},
},
series: [
{
name: "蓝点",
type: "effectScatter", //影响散点
coordinateSystem: "geo",
symbolSize: 12,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
color: "white",
formatter: "{b}",
position: "right",
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "white",
shadowBlur: 10,
shadowColor: "white" //闪烁圈的颜色
}
},
data: rowData,
},
// {//可配置多个数据源
// name: "红点",
// type: "effectScatter", //影响散点
// coordinateSystem: "geo",
// symbolSize: 12,
// showEffectOn: "render",
// rippleEffect: {
// brushType: "stroke"
// },
// hoverAnimation: true,
// label: {
// normal: {
// color: "red",
// formatter: "{b}",
// position: "right",
// show: false
// },
// emphasis: {
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: "red",
// shadowBlur: 10,
// shadowColor: "red" //闪烁圈的颜色
// }
// },
// data: [
// { name: "宜城市", jwd: [112.265758, 31.726944], value: [112.265758, 31.726944, 12] },
// { name: "枣阳市", jwd: [112.779625, 32.134729], value: [112.779625, 32.134729, 24] },
// ]
// }
]
});
// 点击每个市所获取到的值，这里可进行相关操作
this.chart.on("click", (params) => {
console.log(params);
if (params.name == "老河口市") {
this.chart.dispose();
this.mapInit(maplhk, [{ name: "老河口", jwd: [111.682704, 32.393923], value: [111.682704, 32.393923, 12] }])
}
});
this.chart.on("contextmenu", (params) => {
console.log(params);
this.chart.dispose();
this.mapInit(mapData, this.rowData)
});
},
disableContextMenu(e) {//禁用右键显示保存图片
e.preventDefault();
}
},
};
</script>
<style scoped>
.mapCont {
width: 1000px;
height: 800px;
}
#mapSelf {
width: 100%;
height: 100%;
}
</style>