1033131900 opened a new issue #16268:
URL: https://github.com/apache/echarts/issues/16268
### Version
5.2.2
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
您好,我在官网看到您的github账号链接,遇到2个奇怪的问题,恳求帮忙,第一个是需要用到地图的某个城市的区县和街道信息,所以我用了地图的series多图层,多个对象重叠,但是我用鼠标滚轮缩放地图的时候,就是分层效果,我想要整体缩放的效果呢,如图:
你知道怎么解决么?给我个demo也行
第二个问题是:鼠标悬浮在地图上每个区域,我的高亮效果丢失了,下面附上了我的代码,您看下,帮我看看,啥问题,见鬼了。谢谢了,
### Current Behavior
您好,我在官网看到您的github账号链接,遇到2个奇怪的问题,恳求帮忙,第一个是需要用到地图的某个城市的区县和街道信息,所以我用了地图的series多图层,多个对象重叠,但是我用鼠标滚轮缩放地图的时候,就是分层效果,我想要整体缩放的效果呢,如图:
你知道怎么解决么?给我个demo也行
第二个问题是:鼠标悬浮在地图上每个区域,我的高亮效果丢失了,下面附上了我的代码,您看下,帮我看看,啥问题,见鬼了。谢谢了,
let chart = echarts.init(document.getElementById('map-container'));
let option = {
tooltip: {
trigger: 'item',
extraCssText: 'z-index:1000'
},
series: []
};
let offLineMap = API_CONFIG.common.offLineMap;
let cities = [];
offLineMap.url.forEach((url, ind) => {
_this.$axios.get(url).then((geoJson) => {
let zg = `china${ind}`
echarts.registerMap(zg, geoJson.data);
_this.geoData = geoJson.data
let cs = _this.geoData.features.map(item => {
let proItem = item.properties
if (proItem.name || proItem.streetname || proItem.dsname) {
return proItem.name || proItem.streetname || proItem.dsname
}
return ''
})
option.series.push({
map: zg,
nameProperty: offLineMap.codeId !== 371500 ? 'name' :
_this.geoData.features[0].properties.streetname ? 'streetname' : 'dsname',
label: {
show: true,
color: ind === 0 ? '#000' : 'rgba(255,255,255,0.7)'
},
itemStyle: {
borderColor: ind === 0 ? '#389BB7' : 'rgba(45,62,255,0.2)',
areaColor: ind === 0 ? '#66b1ff' : 'rgba(0,64,128,0.3)',
borderWidth: offLineMap.codeId !== 371500 ? 1 : ind === 0 ?
2 : 1,
opacity: offLineMap.codeId !== 371500 ? 1 : ind === 0 ? 1 :
0.55
},
emphasis: {
label: {
show: true,
color: ind === 0 ? '#fff' : '#F3FF24'
},
itemStyle: {
areaColor: '#324ac4',
borderWidth: 0,
opacity: 1
}
}
})
maps.forEach((m) => {
if (m.address === offLineMap.label + '省' || m.address ===
offLineMap.label) {
cities.push({ i: ind, cityItem: Object.assign(m, { address:
cs[0] }) });
return false
}
let arr = cs.filter((c) => {
return c.includes(m.address) || m.address.includes(c);
});
if (arr.length > 0 && arr[0]) {
cities.push(
{ i: ind, cityItem: Object.assign(m, { address:
cs[cs.indexOf(arr[0])] }) }
);
}
});
let len = cities.length;
let index = 0;
if (offLineMap.codeId !== 371500 || offLineMap.url.length > 1 &&
ind === offLineMap.url.length - 1 || offLineMap.url.length === 1 && ind === 0) {
option.series.map((serie) => {
serie.type = 'map';
serie.roam = true;
serie.zoom = 1.2; //这里是关键,一定要放在 series中
serie.data = [];
serie.silent = true;
serie.scaleLimit = {
min: 0.8,
max: 3
}
})
option.tooltip.formatter = function (items) {
return `地域:${items.name} ${len > 0 ? '<br/>标题:' +
cities[index].cityItem.name : ''
}${len > 0 ? '<br/>时间:' +
cities[index].cityItem.createTime : ''}`;
},
chart.setOption(option);
setInterval(() => {
if (index !== 0 && cities.length > 0) {
chart.dispatchAction({
type: 'downplay',
seriesIndex: cities[index - 1].i,
name: cities[index - 1].cityItem.address
});
}
if (index === len) {
index = 0
}
chart.dispatchAction({
type: 'highlight',
seriesIndex: cities[index].i,
name: cities.length > 0 ? cities[index].cityItem.address :
''
});
chart.dispatchAction({
type: 'showTip',
seriesIndex: cities[index].i,
name: cities.length > 0 ? cities[index].cityItem.address :
''
});
index++
}, 3000)
}
})
})
### Expected Behavior
期待鼠标滚轮缩放,多层图一起缩放;
鼠标移到每一块,高亮效果恢复
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
咋回事啊,在线等,我找不到啥解决方案
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]