企业网站静态模板,快速免费做网站,二级域名做网站有哪些缺点,制作付款网站echarts的图表提供了一个resize方法可以自适应屏幕窗口改变#xff0c;而重新渲染图表大小的功能。因此我们只要监听浏览器的窗口改变的resize事件#xff0c;再结合echarts的图表#xff0c;就可以实现我们想要的功能了。如果是单个图表的情况的话用window.onresize myCha…echarts的图表提供了一个resize方法可以自适应屏幕窗口改变而重新渲染图表大小的功能。因此我们只要监听浏览器的窗口改变的resize事件再结合echarts的图表就可以实现我们想要的功能了。如果是单个图表的情况的话用window.onresize myChart.resize; 可以完成自适应就是把window的onresize事件赋值为echart的resize事件如果是多个图表的话mounted(){window.onresize () {this.myChart.resize();this.myChart2.resize();this.myChart3.resize();});}注意在vue里使用需要把事件防止在mounted里。如果在组件里使用的话可以直接单个组件添加进事件列表myLogLine.setOption(option);window.addEventListener(resize, () { myLogLine.resize();});myLine.setOption(option);window.addEventListener(resize, () { myLine.resize();});这里还需要注意因为窗口改变可能会一下子刷新很多次resize这里我们可以用个定时器做个延时data(){return {timer: }},mounted(){window.onresize () {clearTimeout(this.timer)this.timer setTimeout(() {this.myChart.resize();}, 300)};}
