最近项目实现可视化，首先加载中国或者某个省，或者某个市的地图，单击其中选中的地图，其他图表数据会重新请求并变化；双击选中的地图，当前echart地图会变成选中的地图（上面描述口水话，一句简单概括，双击实现echart地图穿透下一级）；
echart单击事件和双击事件处理情况不一样，不处理单双击事件之间的矛盾就会产生问题。echart双击会触发单击。下面就是解决该问题:
var myChartMap = echarts.init(this.$refs.echart_map);
let click_type;
myChartMap.on("click", function (params) {
click_type = false;
setTimeout(check, 500);
function check() {
if (click_type != false) return;
该地方写你单击的处理逻辑事件
}
});
//点击事件
myChartMap.on("dblclick", function (param) {
click_type = true;
该地方写你双击的处理逻辑事件
}
单击或者双击实现 echart地图的穿透；即，单击或者双击某个省、市、县的地图，展示当前点击的地图；
单双击矛盾处理上面已说，下面处理穿透
在 地图配置中， option.series 里面配置地图名字， 地图名字设为动态变量；
我使用的地图数据下载地址为阿里云大数据可视化地图数据
http://datav.aliyun.com/portal/school/atlas/area_selector
该页面上，选择下载其他类型
大概长这样的
{
"type":"FeatureCollection","features":[{
"type":"Feature","properties":{
"adcode":110000,"name":"北京市","center":[116.405285,39.904989],"centroid":[116.41995,40.18994],...
},...
}
initMap(city) {
var geoJson = require("../json/" + city + ".json");
this.loadCharts(city, geoJson, false, "");
},
loadCharts(city, geoJson, silent, selectName) {
let that = this;
if (geoJson) {
echarts.registerMap(name, geoJson);
}
var option = this.setOption(city, silent, selectName);
var myChartMap = echarts.init(this.$refs.echart_map);
myChartMap.setOption(option, true);
//这里单双击实现地图穿透
myChartMap.on("dblclick 或者click", function (param) {
//这个是你当前点击地图，获取单位（省、市、县区）名字
this.city = param.name
initMap(param.name); //或者 initMap(this.city);
}
}
//我是单独把 option 提成了一个函数，
setOption(city, silent, selectName) {
var option = {
title: {
text: city,
show: false,
left: "center",
},
tooltip: {
trigger: "axis",
formatter: function (e) {
},
triggerOn: "click",
},
legend: {
},
visualMap: {
type: "piecewise",
calculable: true,
pieces: [ //图标小组件显示对应范围，及颜色
{
gte: 15000, color: "#0b949a", label: "≥15000" },
{
gt: 10000, lt: 15000, color: "#12b4bf", label: "10000-15000" },
{
lte: 10000, color: "#31d6da", label: "0-10000" },
],
minOpen: true,
maxOpen: true,
precision: 2,
hoverLink: true,
left: "right",
bottom: "20",
},
series: [
{
left: "20%",
top: "10%",
zoom: 1.2,
type: "map",
map: city,//这个表示展示哪个城市， 就是这个决定我们单击或者双击后地图穿透
roam: false, //鼠标平移或者缩放
silent: silent,
itemStyle: {
normal: {
borderWidth: 2, //边框大小
borderColor: "#ffffff",
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10,
areaColor: "#31d6da", //背景颜色
label: {
show: true,
// formatter: '{c}\n{b}'
formatter: function (params) {
return `{pic|${
params.value.toString() == "NaN" ? 0 : params.value
}}\n{fline|${
params.name}}`;
},
position: "top",
rich: {
pic: {
backgroundColor: "rgba(25, 31, 37, 0.34)",
padding: [2, 5],
width: "auto",
height: 15,
align: "center",
color: "#FFFFFF",
fontSize: "10px",
borderRadius: 5,
},
fline: {
color: "#FFFFFF",
align: "center",
fontSize: "12px",
},
},
//显示名称
// color: "green",
// fontSize: 12
},
},
},
data: this.mapData,
},
],
};
return option;
},