首页 > 其他分享 >echarts容器的宽度根据父元素宽度变化进行自适应

echarts容器的宽度根据父元素宽度变化进行自适应

时间:2023-10-08 14:55:37浏览次数:32  
标签:容器 const myChart 适应 宽度 echarts

根据浏览器窗口大小变化进行自适应,使用

window.onresize = ()=>myChart.resize()

浏览器窗口不变,容器大小变化(例如:侧边菜单栏收缩),vue3为例

let myChart = null;
onMounted(() => {
  setTimeout(() => {
    //渲染画布方法
    getEchart();
    //画布自适应代码
    const resizeOb = new ResizeObserver(() => myChart.resize());
    resizeOb.observe(document.getElementById("myChart"));
  });
});
const getEchart = () => {
  myChart = echarts.init(document.getElementById("myChart"));
  ...myChart.setOption()...
}

标签:容器,const,myChart,适应,宽度,echarts
From: https://www.cnblogs.com/-swz/p/17749050.html

相关文章