In special cases, we may use the echarts instance and setOption() but cannot refresh the table content, for example: we modify the inner label of the div container, etc...
The reason may be that we broke the structure of the first rendered div container,
The rendering logic of echarts is as follows:
if it is not instantiated, the instantiation process will be performed. During this period, a _echarts_instance_ attribute will be generated in the div container. The attribute value is actually the ID of the current echarts, and then the subsequent rendering operations will be performed...
When we refresh the echarts chart that has been instantiated, echarts will first match whether the value of the _echarts_instance_ attribute on the div container is the same as the ID of the instance object. If it is the same, it will be rendered on the original structure, but because I destroyed it The original structure, so the table content cannot be re-rendered, so we can execute the following code:
document.getElementById('div的ID').setAttribute('_echarts_instance_', '')
In this way, the _echarts_instance_ value of the div will not be matched, so that echarts will be rendered like a new icon
Note: Such an operation will re-render the div container structure of echarts, that is, re-operating the DOM, which will affect performance