echarts 图表大小自适应

454 阅读1分钟

需求:echarts容器在没给定宽度或高度时自适应父元素大小。 代码:

const chartDom1 = document.getElementById('table1');
    if (chartDom1) {
      const table1Chart = proxy.$echarts.init(chartDom1);
      chartObserver = new ResizeObserver(() => {
        table1Chart.resize();
      });
      chartObserver.observe(chartDom1);
      table1Chart.setOption(option1);
    }
    
onBeforeUnmount(()=>chartObserver.disconnect())

添加ResizeObserver事件监听元素dom尺寸变化,然后让echarts重新渲染。卸载组件前停止监听节省性能。