echarts下钻地图无法下钻
问题遇到的现象和发生背景
在做echarts下钻地图时遇到了click事件无法点击
问题相关代码，请勿粘贴截图
// 基于准备好的dom，初始化地图实例
const myChart = echarts.init(document.getElementById(
"item1b4cbd90-9945-11ec-8b54-41a75dcd2836-wrapper"));
// 指定地图的配置项
let option = {
"visualMap": null,
// 显示数据
tooltip: {
show: true,
trigger: 'axis',
// 引入弹窗边框图片
// extraCssText: "width:300px;height:400px;background: url(static/images/map/k.jpeg) no-repeat;",
//浮层显示的延迟，单位为 ms
showDelay: 500,
//浮层隐藏的延迟，单位为 ms
// hideDelay: 50,
triggerOn: "mousemove",
transitionDuration: 0.4,
axisPointer: {
type: 'shadow',
textStyle: {
color: '#ffffff'
}
},
backgroundColor: null,
borderColor: '#FCEA00',
borderWidth: 1,
borderRadius: 0,
padding: [10, 10, 10, 10],
textStyle: {
align: 'left',
fontSize: 20,
color: '#1529dc'
},
},
"geo": {
"map": "china",
"roam": false,
"zoom": 0.7,
"left": "center",
"top": "middle",
"bottom": "auto",
"right": "auto",
"tooltip": {
"show": true,
"confine": true,
formatter: (params) => {
let a = s24.find((item) => {
if (item.name == params.name) {
return "error";
}
});
console.log(a)
return `<p style="width:100%;height:30px; background: linear-gradient(#2caaab, #136692); text-align: center;line-height: 30px;">${a.name}<br />
<p style="line-height: 30px; text-indent: 10px;">月销量： ${a.value1 || 0}架</p>
<p style="line-height: 30px; text-indent: 10px;">月销金额： ${a.value2 || 0}万元</p>
<p style="line-height: 30px; text-indent: 10px;">年销量： ${a.value3 || 0}架</p>
<p style="line-height: 30px; text-indent: 10px;">年销金额： ${a.value4 || 0}万元</p></div>`
}
},
"label": {
"show": true,
"color": "rgba(241, 248, 255, 0.7)",
"fontSize": 10,
"fontWeight": "normal",
"fontStyle": "normal"
},
"itemStyle": {
"areaColor": "rgba(0, 176, 255, 1)",
"borderColor": "rgba(0, 154, 222, 1)",
"borderWidth": 1,
"shadowColor": "#134b7f",
"shadowBlur": 0,
"borderType": "solid",
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"opacity": 1
},
"emphasis": {
"label": {
"show": false,
"color": "#ffffff",
"fontSize": 18,
"fontWeight": "normal",
"fontStyle": "normal"
},
"itemStyle": {
"areaColor": "rgba(222, 25, 25, 0.9)",
"borderColor": "rgba(228, 21, 21, 1)",
"borderWidth": 1,
"borderType": "solid",
"shadowBlur": 2,
"shadowColor": "#000000",
"shadowOffsetX": 2,
"shadowOffsetY": 2,
"opacity": 1
}
},
"zlevel": 1
},
"series": [],
"drill": {
"left": 50,
"top": 50
}
};
let source = []
// 获取不同数据源的数据
function handlerData(source) {
if (source.length > 0) {
source.forEach(item => {
if (item.source.type == 'static') {
handleFilterMapping(item, item.source.static)
} else if (item.source.type == 'api') {
const {
requestType,
requestHeader,
getParam,
postParam,
requestUrl,
cookie,
sources
} = item.source.api
$.ajax({
url: sources.baseURL + requestUrl + '?' + getParam,
type: requestType,
data: postParam,
headers: requestHeader,
dataType: "json",
xhrFields: {
withCredentials: cookie
},
success: function(data) {
handleFilterMapping(item, data)
}
})
}
})
} else {
setOption()
}
}
// 处理数据 -- 映射和 过滤器
function handleFilterMapping(i1, source) {
const mp = i1.source.mapping;
const fs = option.series.find(i => i.name == i1.name)
const fsI = option.series.findIndex(i => i.name == i1.name)
if (i1.source.filter.isFilter) {
const filterFn = (data, callbackArgs) => {
const filterFunction = {
init: eval(
`(function filterFn(data, callbackArgs) { ${i1.source.filter.data.code} })`
)
}
return filterFunction.init()
}
source = filterFn(source)
}
if (fs.type == "lines") {
const mapping1 = mp.find(i => i.name == "fromName").mapping;
const mapping2 = mp.find(i => i.name == "toName").mapping;
const mapping3 = mp.find(i => i.name == "coords").mapping;
fs.data = source.map((i2) => {
return {
fromName: i2[mapping1],
toName: i2[mapping2],
coords: i2[mapping3]
};
})
} else if (fs.type == "effectScatter") {
const mapping1 = mp.find(i => i.name == "name").mapping;
const mapping2 = mp.find(i => i.name == "value").mapping;
fs.data = source.map((i2) => {
return {
name: i2[mapping1],
value: i2[mapping2]
};
})
fs.symbolSize = (data) => {
return data[2] / fs.scalRatio;
};
} else if (fs.type == 'map' && fs.map.indexOf("-border") == -1) {
const mapping1 = mp.find(i => i.name == "name").mapping;
const mapping2 = mp.find(i => i.name == "value").mapping;
fs.data = source.map((i2) => {
return {
name: i2[mapping1],
value: i2[mapping2]
};
})
}
setOption()
}
// setOption -- 开始渲染
function setOption() {
const assetStaticMapData = [
new Promise(function(resolve, reject) {
$.getJSON('./static/map/full/' + option.geo.map + ".json", map => resolve(map))
}),
new Promise(function(resolve, reject) {
$.getJSON('./static/map/border/' + option.geo.map + ".json", map => resolve(map))
}),
]
Promise.all(assetStaticMapData).then(data => {
echarts.registerMap(option.geo.map, data[0]);
option.series.find(item => item.type == "map" && item.map.indexOf("-border") != -1) !==
undefined ? echarts.registerMap(option.geo.map + "-border", data[1]) : "";
myChart.setOption(option);
myChart.off("click");
myChart.on("click", (param) => {
const fnd = s24.find((item) => item.name == param.name);
if (param.name === "太原市") {
window.location.href = "https://fsoufsou.com/";
} else
if (fnd) {
option.series.forEach((item) => {
if (item.type == "map") {
if (item.map.indexOf("border") > -1) item.map = fnd
.value + "-border";
if (item.map.indexOf("border") <= -1) item.map = fnd
.value;
}
});
option.geo.map = fnd.value;
setOption();
$("#item1b4cbd90-9945-11ec-8b54-41a75dcd2836>.map-bread-crumb").append(` <span class="arrow"> > </span><span class="name" data-value="${fnd.value}" data-index="1"> ${fnd.name}</span>` )
}
});
})
}
// 下钻跳转
function toMap(value, i) {
if (i == 0) {
$("#item1b4cbd90-9945-11ec-8b54-41a75dcd2836>.map-bread-crumb").html(`<span class="name" data-value="china" data-index="0"> </span>`)}
option.series.forEach((item) => {
if (item.type == "map") {
if (item.map.indexOf("border") > -1) item.map = value + "-border";
if (item.map.indexOf("border") <= -1) item.map = value;
}
});
option.geo.map = value;
setOption();
}
// 定时器
function initAutoUpdateTimer(source) {
source.forEach((i1) => {
if (i1.source.isAutoUpdate) setInterval(() => handlerData([i1]), i1.source
.autoUpdateTime * 1000)
})
}
// 初始化
function init(source) {
handlerData(source)
initAutoUpdateTimer(source)
}
init(source)
$("#item1b4cbd90-9945-11ec-8b54-41a75dcd2836>.map-bread-crumb").on("click", "span.name", function() {
toMap($(this).data("value"), $(this).data("index"))
})
})
运行结果及报错内容
没有报错
我的解答思路和尝试过的方法
我这有个和他相似的下钻地图的代码，我按照可以下钻地图的代码，试着去修改它，但没用。搜索echarts下钻地图click事件的问题，试了很多办法，没用。服了
我想要达到的结果
左上角的文字可以去掉，下钻地图可以下钻
写的好复杂