**

Echarts 绘制地图省、市、区、县（以及点击显示下级，支持坐标定位）

**
上代码

<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>