最近需要在vue中用echarts弹窗展示表格数据,ele弹窗可自适应,但echarts会随着滚动而变乱,
看文档找方法,发现:
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();});