echarts [Bug] 选中的区域回显异常

xwmevbvl  于 6个月前  发布在  Echarts
关注(0)|答案(2)|浏览(52)

Version

5.5.0

暂无,里面有些geo数据无法展示

Steps to Reproduce

发现一个问题,我想实现地图下钻的功能,代码实现如下,先加载了默认地图数据【map】,然后绑定了点击事件,处理点击事件时,切换map为map2, 然后调用goback重置options时,效果不符合预期

var options = {
tooltip: {},
geo: {
map: 'map',
regions: [],
},
series:[
{
type: "map",
geoIndex: 0,
data: [],
}
],
};

onMounted(async () => {
mapData = ...;
mapData2 = ...;

mapDom = document.getElementById('map');

myChart = echarts.init(mapDom);
mapData = await util.getGeoData();
echarts.registerMap("map", mapData);
myChart.setOption(options);
myChart.on('click', e => {
    echarts.registerMap("map2", mapData2);
    options.geo.map = "map2";
    myChart.setOption(options);
})

})

function goback() {
echarts.registerMap("map", mapData);
options.geo.map = "map";
myChart.setOption(options);
}

Current Behavior

goback触发后,出现以下问题

  1. 发现第一次点击的区域没被选中,但是当我鼠标滑过上次点击的区域时又被选中了,并且离开该区域后,选中状态不会消失
  2. 后来我试了下设置options时,指定notMerge为true,当我返回上一步时,重复1步骤都同样不会被选中,但是滑过选中区域时也不会被选中
  3. options里面没有series时,不会出现以上情况,也不会记录被选中的区域

Expected Behavior

  1. 返回上一步时能选中上次点击的区域

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

mi7gmzs6

mi7gmzs61#

@guanzongjiang It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED

TITLE

[Bug] The selected area echoes abnormally

BODY

Version

5.5.0

None at the moment, some geo data cannot be displayed.

Steps to Reproduce

I found a problem. I want to implement the map drill-down function. The code is implemented as follows. First, the default map data [map] is loaded, and then the click event is bound. When processing the click event, switch the map to map2, and then call goback to reset the options. When, the effect is not as expected

var options = {
tooltip: {},
geo: {
map: 'map',
regions: [],
},
series:[
{
type: "map",
geoIndex: 0,
data: [],
}
],
};

onMounted(async () => {
mapData = ...;
mapData2 = ...;

mapDom = document.getElementById('map');

myChart = echarts.init(mapDom);
mapData = await util.getGeoData();
echarts.registerMap("map", mapData);
myChart.setOption(options);
myChart.on('click', e => {
    echarts.registerMap("map2", mapData2);
    options.geo.map = "map2";
    myChart.setOption(options);
})

})

function goback() {
echarts.registerMap("map", mapData);
options.geo.map = "map";
myChart.setOption(options);
}

Current Behavior

After goback is triggered, the following problems occur

  1. I found that the area I clicked for the first time was not selected, but when I moved the mouse over the area I clicked last time, it was selected again, and after leaving the area, the selected state will not disappear.
  2. Later I tried setting options and specified notMerge as true. When I returned to the previous step and repeated step 1, it would still not be selected, but it would not be selected when sliding over the selected area.
  3. When there is no series in options, the above situation will not occur, and the selected area will not be recorded.

Expected Behavior

  1. When returning to the previous step, you can select the area clicked last time.

Environment

- OS:
-Browser:
- Framework:

Any additional comments?

No response

g6ll5ycj

g6ll5ycj2#

🚩 Please note that "how to", usage or debugging questions are not supposed to be answered here.
Adhere to Official posting recommendations:

The issue list is reserved exclusively for bug reports and feature requests.
For usage questions, please use the following resources:

Another good resource is website makeapie.cn with map drill examples like this , this , this .

相关问题