【Vue基础-数字大屏】图表自适应大小

一、需求描述

缩放页面，页面中的图标自适应缩放

二、关键代码

1、图表横向全屏

<style scoped>#myecharts
     { 
        width: 100%;
        height: 600px; 
        border: 2px 
        solid rgb(0, 255, 255);
     }
</style>

2、监听，使图表自适应缩放

    myChart.setOption(option); 
    
    //监听页面大小改变
    window.addEventListener("resize",()=>{
        console.log("浏览器页面大小改变了")
        myChart.resize()
    })

三、学习链接

https://www.bilibili.com/video/BV14u411D7qK?p=37&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50