fix(plugin-chart-echarts): layout broken when resizing

[stephenLYZ]

SUMMARY

The essence of this problem is the inconsistency between the width and height of the parent container and the actual echart resize. Since our outer layer is based on useResizeDetector to debounce the width and height change, there is a probability of inconsistency, so we do not put useEffect here to ensure that resize and render execution are idempotent.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

2022-07-20.5.00.29.mov

after

2022-07-20.4.58.44.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[zhaoyongjie]

LGTM, thanks for the fix.

[codecov]

Codecov Report

Merging #20783 (046faf2) into master (9c7bcfc) will decrease coverage by 0.00%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master   #20783      +/-   ##
==========================================
- Coverage   66.30%   66.30%   -0.01%     
==========================================
  Files        1756     1756              
  Lines       66735    66739       +4     
  Branches     7049     7049              
==========================================
  Hits        44251    44251              
- Misses      20688    20692       +4     
  Partials     1796     1796              

Flag	Coverage Δ
javascript	51.92% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ins/plugin-chart-echarts/src/components/Echart.tsx	0.00% <0.00%> (ø)