[Bug] The image overlaps and gets stuck after the radial tree data is switched several times

[Wang-W-C]

Version

5.0.0 以上

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=tree-radial&version=5.4.1&code=G4QwTgBA9gDgLgSygOwM4EYIF4IG8CwAUBBKgKZgJmoBcEA2kSSQccyXAJ4xl0DkcMGTJ8ANE3YQANiE5QArnH5gQAEwQgpYie1Ug4IOozaS8O0xADGACwRTVQ5EfMWzJ182QgAtrwh9AQujAdO9ALnNARc9AM21AODlAAKNAenNtdw8rW3tHZyTktyyLL19-YJDARX9AHb9EnNNQKXk_dAAGOvFM5IBfJormVg72PL9A0PLukiqaunrGlyy2yeSuoYhe_lLASO1AC0VBoZHahvbu6eaPOaHF_0LAFL1AClcN7q2xnZmPfaGj7pP-kMBR10Al62uO24hxrsOk9ui8Om9CoAxyMAk5G_Cr_QEPVwgjpgioQ0KAUPjAJVKgD7ogJwnII-4HZFAiponJvQCH8oB7AzWhKyxImpIsKIpSI8GJCgE1TCKM5LM8k5dk5SlZbmAe3jAG9yAo8Qs5plFHgAusK2erTOLTG8eYAmgP5mosNjsDjITgYisk2q5Pj6hT5ctcCtZSqNrhtrl1EUAnKaAS3SnRYXUNlbMrTq7QUsdjHe75ZpRgCSSG41rw5JuaVA5UE9sWSn0yxC55I_4-YBCK0A8PrZyTBvap63FkjcwDIcoAsORr7DrwIb7E9uVL707zG7FVDhybC0HhUAX-qAAQ9h8Nc3d8_Xi_2I_l_IAsTUASVqAZXlFxBRyLe51J9zLvOjyepme1Vbx33029ACxygCi9QDcyob0ya0uaMmeC9B33QAhHUAERNAEd9BIzy7Zck1XHt12Arc-AAD0Afr9ChveDEVdSQnwsDcM0HQBBj0AR0VAHpjQAEI0AeYUcOqPNYIgQi03wzc-kALvDAGnTbDmKXRiV2Y1jG3YkjUMKHEGMTPCCzEot5JLVDAEXlQAQHUAaPU-MnW9WmY4iekHQABCMAQu9AAIE6DpKY4sROfRTm0HQBa0wgiz-OPXDkzXRT9KU-1QicwBrI0AeeNLKE6y9JQvpAC6AwB-gMAEjcQoQ4T7wbETiLeS5AHm_QA5Wx_MS_zNC1jCAuypwkgZXJ0x5wpKzMygq9zELHar5lK3yQkuBLZM84qWu5YzADAXTqPKQryIv4QBWV0ABW1ADFVQBCpSGxrT2QmrB0AQHk2wGhakuW3rB0AJLlABUAootrCnb5m5QAZCI7erBMS07RpW1Cpq0krKrJM7jmnUIZROxSbIgB98NSl9B0ATydAFnPb8a3y9JLQe3bUMwl6WrejUPteEDnJg7SGu2-HzqMsyXJx26upGnqCdQnjkfmVG3XR8FB0ABPjVMAISVAHnE365Ipz7UKcqDsde3H7p5jHUIomj6JumThqahn0UHNTNPKkmZcWu95apL6Qik6WrL-5rKb6MCoK57qKkBpb8LSwc6UAEVjAAS7TazxhgC4dFxmypCM3ydBMbTlCLM9dCg3NYlbXndV_Xub9x62o64O7tD_Heb6QBjC0ACQtI6F0nZatj2FdQwA_tUAMzlADDMwArwMACqVADRlH25ZTsW-imwBw01lROyYbgutaeyaac2YXk-78PUMADazAEILUuy_r_PY4R9OM8AU91AB15GeNbEy317FEHULpKJACwE6lF8AaC9odSArALno2o2KOqo5DmPUX9ocO7zrer9Tm_AH-5QB8dzX3Sw7JDeCsdYr91YAMbp7NqJ9_5VUAbaL2MJYHvUgYXPogB_PUALUm41ITILRqgnuzdISAAflPB9MCEjzauWQA-0ZkIIobT-Ad2pXDAXjDom8IHbzEm8QAJXL70AAvxgBk-JgS7c-sMiofybjfA6gBAVLoewf6Cl5433kcwRR2Rr5MN_qokg6jvL2S9jifEOiWIMKkUwwA5caADYlExejn6FBobYsxUCb5B3vknR-HI443wTu4zus8n7eP8IAQZTAD3sdSQA78pOPgV6Qco9AD4CYAG0VQnRI3ilBsNtUKADbFQAi4kiN_GIt2EjAnKKYY41hItJEuMsTYipQ8qloJvkYgkdTPFcNKe8XxOc1ZsIaYQlRrTzYlM0e8bRgzfbDMYXwQADqYWJCO-VJw8gGDmmREcs6lFl9MofwaZgAeBXKX4t-nCtnLK9rMzZOQOFwOtjvPoIRAANFvkvKhTCoxIHIYvELTDngOuUshBbUxnfN6ZM8x7xABjadRKxpkLleI6f3G4g82lZH0a1G-1iYXtJGecFhQLKkguqe8QAG35Fwxci5-DzjHjK7ic_5_BLAIG8KgUlYYgnvAOd06OQyshXJQckHlaj1RXJBIDFoABuIgoBICwEQCgVAAAmbAGjyCUGoJfJRkguA8H4IIYQcIZByEUMoNQGgtDqj0AYNVolkiu1eTc7hg5AAQUUEQA-lZhEAB7agBwIJiIAZQiz6mnEW8ji_AnXOsAE2-gBDX2ZROVlIao0emfhGhkVKAmwpGSGwAk4Y4o5Q_LlmKpkhu-HGoiz8Q2ADTIwAXZFFrYh0kNgAUeOxIAWiiHVVqtSMukSbcX1PxY0_wIaeRupbbZGtLrAD7ce3TtSLXD8vIXm7ZZY9QDtEf6opgbxJ9D7YuiduayWsv7f6Qd54Y0uvrf2g96r80uojWejRUz-1VmvSit4IbAAQOoAW0sH0lpdR-o9zqZyADhPb9HS9yABWswDaaXWZv_Qe6d9CrSZL6IAC8D3yAGrEzdzzl22r-bE1CwHAAmOoAXFNIK-uTe_bt_T_BoUAFu-saSPHLI3OvgEs6JgamTxGjW6Jmpovc6-tLHQWAB83DS7Hs0eO3SyjpJlzLEY49S-jpy-iAHbTAjRG-MEpDUpwAwcbBVo78ml2GoqAGtA-KOneUW3SXB25_BM2AGTfQA-_ZoY6Day1s61NfpM_grD7z12Xsje5mdemvPBog1mlGiKxPRuHc67OoXc4_NM3J2l_hADfaTNQAm0qqZ7XwVar7ou0zC5xlzmW9qAHsA0NGXyN8BDRdd9fnYMUPk_wFLwmYs9LxVx0FIax3QfM3agloNAB0Xqhv1_5MMBaDRR6jbmZMpsKxVvDhHpMif8aR9rBLJMqdqwo5xmW2NTaW0c3TCX9P8EANzxqlACJSpzTbArV0GVQkphb5WGNMaltNlbs2GOCfUs1vLsXgWrcy3W7ET2Gv-Hm5Bbrj4MmWf8HSQA4zFO0Gkukbzmd2RZB4lyrPmMfHd7S63LA8_ttY-6DrHzrM048C_4QAKVZZyR29ujAOKuADR1QAH2aAApMiugBVpTrtd3R22KspbbpT8bfAmt7Za5ygraORkTzZ-zkXa7-C05XpDoG0P7W71pB6w-TzHMvNR-J8DYbfMM8O0zhjP3Ceta7Rb0nIbAX7bix5sbSv_CJtAWb-LdvMchr179m3k6IvG4rYru7fRADHepgpLpaw8-Ua6WwAX4Fx4Md5515ZAA3Jin1FePychYD1L2T3Kesk7d3wPhgBpBMABzx_uchOfdq78PQXnXFcAGnJ2en0S4Lzm6XRvuOO8lz3ovpfcdk_rU2jvjqXXor56Y278fc-Z8n6hENV7Z92J_RT9fAuGOAFYU8JgB9MOX30BJyS1czeLZrvouTa9ZHr8Un3o-Q1L-3_P1PzeZ9e5d0dqnY_G3Ntf3q192C2P2b1ANzwH271E172DymUAA9TCxZ1BZQAzzUXOAt1dZcAvgOA_ZLPFAxvBfMnBA8_d7S_AlZ1R5U-ZHC-BvH_UXIHCffAugsvB3P-Jgx_X_ENCFKFLAq3BFInW3EfTg6fWpL_fzZgpvXPLfMQurVAlgl1QAKz9mcsCKDGCZCts38c8-B6VGVeCXUX91Cbs0kodOQYNlQhVdgRVxVCApAyA4AIAEBFU6hrDyA4AABJZAOACgKoAACgADN5BkBLAZVkAIAfCABKDRBAPwsIxwgAUggAVSwBwDqEiJeG8E4AAGFrBwA4AAA6VwgAeXgCQGQB8OlVKIwHCOsN0QgDICkHIBvQgAyOyNyIKLsOKJCPKJKNlTlWqIkBaAkAQAAGphjrC2hEiGhUjRUgA

Steps to Reproduce

1. Copy Link Open Click Run
2. Wait for the timer in the code to execute several times, and the image will have problems or switch tabs. Wait for a few seconds, and then return to the page

Current Behavior

1. The animation is not smooth after the data is changed. After the image becomes small and large, it will pause, and then the font will change from light color to dark color, and the connection point will also be bold

Expected Behavior

The same example code ECharts4 does not have this problem. I hope the animation effect can be consistent with ECharts4

Environment

- OS: window10/11
- Browser: Chrome/Firefox

Any additional comments?

No response

[helgasoft]

not-a-bug
Data is large and setTimeout of 2 seconds is not enough to redraw the chart, at least on average computers.
Replace setTimeout with following code and click on some outer label to see the effect.

myChart.setOption(options1);
let i = 0;
myChart.on('click', () => {
  if (i % 2 == 0) {
    myChart.setOption(options2);
  } else {
    myChart.setOption(options1);
  }
  i++;
})

[Wang-W-C]

not-a-bug Data is large and setTimeout of 2 seconds is not enough to redraw the chart, at least on average computers. Replace setTimeout with following code and click on some outer label to see the effect.

myChart.setOption(options1);
let i = 0;
myChart.on('click', () => {
  if (i % 2 == 0) {
    myChart.setOption(options2);
  } else {
    myChart.setOption(options1);
  }
  i++;
})

Thank you for your reply,Although changing the timer to manual switch or extending the timer time can solve the overlap problem, the color change of label font and the thickening of circle still exist after the switch animation is completed.
My current solution is：

let i = 0;
setInterval(function () {
  myChart.clear();
  if (i % 2 == 0) {
    myChart.setOption(options1);
  } else {
    myChart.setOption(options2);
  }
  i++;
}, 2000);

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!