echarts生成的图表大小怎么随屏幕的大小改变自适应

Posted 2023-03-27

如果一个页面有一个图表：

myChart.setOption(option,window.onresize = myChart.resize)；

如果一个页面有多个图表（此处举例3个）：

shopsInfo.setOption(shopsInfos);

vendor.setOption(vendors);

company.setOption(companys);

在最后加上如下代码

//图表根据窗口大小自适应

setTimeout(function ()

window.onresize = function ()

shopsInfo.resize();

vendor.resize();

company.resize();

)

参考技术A 在setoption之后添加这段代码：window.onresize = myChart.resize;本回答被提问者采纳 参考技术B 你只需要让图表外的div容器随着屏幕自适应就好了。用百分比

Echarts图表大小随窗口变动而自适应变动（resize）

参考技术A 数据可视化的时候用到echarts，要想生成图表能够根据大小自适应，就要用到echarts自己的resize方法。chartDemo是echarts实例，this.$refs.chartContainerParent是echarts元素父级元素。
1、页面大小变化（window.onresize）

2、上面的写法遇到有左导航栏的，导航栏打开关闭切换就歇菜了。这时候就会用到resize-detector这个插件去监听echarts实例元素的父级元素。resize-detector是个npm插件，地址： https://www.npmjs.com/package/resize-detector 。用法上地址有，但还是要写一下我在vue里的使用😀。

网上很多都是window.onresize，所以就把第二种写出来了，希望对大家能有帮助，有用就点个赞么，靓仔靓女🤣。