I've done a fair amount of investigation with this bug. It is related to resizing and the fact that clipPaths do not get removed after animations. In order to reproduce the bug in the sandbox, the following steps must be taken:
Add the options / configs posted above. The 'svg' renderer is not necessary, but inspecting the chart is easier with SVG than canvas and it helps highlight the problem.
Make the chart window narrow, by shrinking your browser window horizontally
Click "Run" / make sure the chart is generated for this size screen.
Expand the browser window open horizontally, and you can see the chart starts to get cut off on the right side.
See the attached gif for repro:
I've investigated in the source code and found that the issue is due to clipPaths not being removed after animation is complete.
See that the clipPath is set here using setClipPath, whose argument is the clipPath created with this._createClipPath(). A callback is passed into _createClipPath called removeClipPath, presumably to remove it once animation is done. _createClipPath calls initProps, which in turn calls animateOrSetProps (this), and you can see that in this function, if animationEnabled, it eventually executes the callback (cb) to remove the clip path. The problem here is that this all is part of _createClipPath --- setClipPath has not yet actually set the clipPath on the group, so there is nothing to remove. Therefore, these clipPaths never get removed.
The residual effect of this is found in the <defs> html tag in the SVG. If you remove this (or make it display: 'none', the problem goes away:
Our temporary workaround is just to hide these <defs>, because they are only supposed to be reference elements anyway. I am not sure the best way to fix the root problem in echarts. I tested by calling removeClipPath after setClipPath, which works, but I do not think it accounts for animation, so am not sure if that is the best solution.
Let me know if you have any more questions I can help answer.
The text was updated successfully, but these errors were encountered: