首页 > 其他 > 详细

echarts表格自适应窗口变化

时间:2019-11-02 20:26:26      阅读:75      评论:0      收藏:0      [点我收藏+]

原文链接:https://www.cnblogs.com/goloving/p/9008165.html

窗口每次大小改变都需要echart表格重新渲染

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表格自适应窗口变化

原文:https://www.cnblogs.com/spiral-up/p/11783880.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!