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()...
}
posted @ 2023-10-08 14:46  helloSWZ  阅读(571)  评论(0编辑  收藏  举报