Responsive

<!-- Sized container drives the chart -->
<div id="chart" style="width: 100%; height: 400px;"></div>

<script>
const dom = document.getElementById('chart');
const chart = echarts.init(dom);

function resize() { chart.resize(); }
window.addEventListener('resize', resize);

chart.setOption({ /* options */ });

// Observe container size changes (e.g. sidebar collapse)
const ro = new ResizeObserver(() => chart.resize());
ro.observe(dom);

// Cleanup when removed
function destroy() {
  window.removeEventListener('resize', resize);
  ro.disconnect();
  chart.dispose();
}

// React/Vue pattern: call destroy() on unmount
</script>