vue+echarts实现省市区地图下钻
<div>
<div id="china-pic" style="width:100vw,height:100vh">
</div>
</div>
import * as echarts from "echarts";
import "echarts/map/js/china";
import $ from "jquery";
import {
provinces,
cityMap,
special,
} from "../../../../../public/map/nameList";
require("echarts/theme/macarons"); // echarts theme
data() {
return {
chart: null,
option: {},
chinaData: [],
mapStack: [],
};
},
getChinaPic 方法在生命周期调用
getChinaPic() {
this.chart = echarts.init(document.getElementById("china-pic"));
let _that = this;
var mapdata = [];
$.getJSON("/map/china.json", function (data) {
let d = [];
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
});
}
mapdata = d;
_that.chinaData = d;
// 注册地图
echarts.registerMap("china", data);
// 绘制地图
_that.renderMap("china", d, "china", 0, false);
});
_that.chart.on("click", function (params) {
_that.getDownInfo(params, true);
});
tooltip: {
formatter: function (params) {
},
},
animationDuration: 1000, // 这里加上有过度效果
animationEasing: "cubicOut",// 这里加上有过度效果
animationDurationUpdate: 1000,// 这里加上有过度效果
};
},
renderMap(map, data, seriesName, level, flag) {
this.option.geo = {
// 这里定义地图 下面series写了 会有两个地图 可以实现大屏伪3D效果
show: false,
map: map,
roam: false,
zoom: 1, // 地图缩放
height: "480px",
width: "100%",
label: {
normal: {
show: false,
}
},
// 南海诸岛隐藏 下面的series也要写一份
// regions: [
// {
// name: "南海诸岛",
// show: false,
// itemStyle: {
// // 隐藏地图
// normal: {
// opacity: 0, // 为 0 时不绘制该图形
// },
// },
// label: {
// show: false, // 隐藏文字
// },
// },
// ],
itemStyle: {
normal: {
show: false,
},
},
};
this.option.series = [
{
name: map,
type: "map",
mapType: map,
zoom: 1,
map: map,
height: "480px",
width: "100%",
center: ["36%", "50%"],
roam: false,
data: data,
layoutCenter: ["50%", "50%"], //地图位置
label: {
show: true,
color: "red",
},
},
];
// 渲染地图
this.chart.setOption(this.option);
if (flag) {
this.mapStack.push({ // 这里是返回上一级做处理
level: level,
name: seriesName,
seriesName: seriesName,
});
}
},
getDownInfo(params, flag) {
var _that = this;
if (params.name in provinces) {
// 如果点击的是34个省、市、自治区,绘制选中地区的二级地图
$.getJSON(
"/map/province/" + provinces[params.name] + ".json",
function (data) {
echarts.registerMap(params.name, data);
var d = [];
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
});
}
_that.areaCount = {
flag: 2,
province: params.name,
city: "",
};
if (flag) {
_that.renderMap(params.name, d, params.seriesName, 1, true);
} else {
_that.renderMap(params.name, d, params.seriesName, 1, false);
}
}
);
} else if (params.seriesName in provinces) {
// 如果是【直辖市/特别行政区】只有二级下钻
if (special.indexOf(params.seriesName) >= 0) {
// _that.renderMap('china', mapdata)
} else {
// 显示县级地图
if (typeof cityMap[params.name] != "undefined") {
$.getJSON(
"/map/city/" + cityMap[params.name] + ".json",
function (data) {
echarts.registerMap(params.name, data);
var d = [];
for (var i = 0; i < data.features.length; i++) {
d.push({
name: data.features[i].properties.name,
});
}
_that.areaCount = {
flag: 3,
province: params.seriesName,
city: params.name,
};
_that.renderMap(params.name, d, params.seriesName, 2, true);
}
);
}
}
} else {
// console.log(params)
// 点击县级时是否返回
// _that.renderMap('china', mapdata)
}
},