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

Wang-W-C commented 1 year ago

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

Copy Link Open Click Run
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

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 commented 1 year ago

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 commented 1 year ago

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);

apache / echarts