欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts使用技巧echarts的图表自适应resize问题

程序员文章站 2022-06-07 20:27:08
...

参考文章
echart图表本身是提供了一个resize的函数的。
于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。
用window.onresize = myChart.resize; 可以完成自适应,就是把window的onresize事件赋值为echart的resize事件
当然这是单个图表的情况,要是多个图表,发现会不起作用。
多个图表可以使用addEventListener

window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart2.resize();  
    this.myChart3.resize();
});

在vue组件上就可以直接单个组件添加进事件列表

myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});

myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});
相关标签: echarts