1、准備好全國的Json文件
2、echarts插件 （對應配置是4.0+的）
3、獲取json文件后設置在地圖上 this.$echarts.registerMap("currentmap", geoJson);
初始加載地圖
點擊地圖上某個點畫下一級地圖
initMap(geoJson, mapData) {
this.myMapchart = this.$echarts.init(this.$refs.map);
this.$echarts.registerMap("currentmap", geoJson);
let option = this.getMapOption(mapData);
this.myMapchart.setOption(option);
//點擊事件,根據點擊某個省份計算出這個省份的數據
this.myMapchart.on("click", (params) => {
console.log("dianji地圖", params);
// 如果是區級就不能往下點了
if (!params.data) return; // 點擊的不是描的點
bus.$emit("geo", params.data.deptCode);
this.deptCode = params.data.deptCode
this.getFormData1()
this.getFormData2()
if (params.data.level == 1 || params.data.level == 2) {
// 獲取下級的json
let code = params.data.deptCode;
this.getGeoJson(code);
//邏輯控制
}
});
},
4、獲取點位信息
5、設置options
getMapOption(mapData) {
return {
backgroundColor: "transparent",
series: [
{
type: "map",
mapType: "currentmap",
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
normal: {
color: "#ffffff",
areaColor: "#053F72",
borderColor: "#0BC4ED"
},
emphasis: {
label: {
show: false,
},
color: "#ffffff",
areaColor: "#053F72",
borderColor: "#0BC4ED"
}
},
data : mapData.data,
markPoint : {
clickable:true,
symbolSize: [10,12], // 標注大小，半寬（半徑）參數，當圖形為方向或菱形則總寬度為symbolSize * 2
itemStyle: {
normal: {
borderWidth:1,
areaColor:'#135466', //地圖顏色
borderColor: "rgba(41, 218, 243, 1)",//邊框顏色
borderWidth: 1,
label: {
show: true,
offset: [0, 15],
textStyle: {
//文本字體顏色
color: "rgba(254, 227, 74, 1)",
fontSize:'12px'
},
formatter: function (param){
return param.data.areaName;
}
}
},
emphasis: {
label: {
show: true,
textStyle: {
//文本字體顏色
color:"#05fcff",
fontSize:'12px'
},
}
}
},
data : mapData.data,
},
animation: false,
roam: true,
// animationDurationUpdate: 1000,
// animationEasingUpdate: 'quinticInOut'
}
]
};
},
