前言 一个风和日丽的晚上在满心欢喜的写完接口,把数据用 echarts 渲到后台项目上,准备关闭浏览器的我好像觉得差了点什么,噢噢原来是 echarts 自适应没做。给 window 加个 resize 监听,在里面调用 echarts 实例的 resize 方法不就行了?我当时是这么想的... 问题 在我自
1)每次切换后图表会变窄,这是因为 在各个chart display none 和 block 切换后,获取不到容器的实际高宽,图表的宽度会将 100% 转换为 100px,所以 需要手动调用 resize 方法获取正确的高宽并且刷新画布。 2)使用watch 检测index 变化 ,直接调用 chartInstance.resize() 3)结果画布大小没有改变,还是窄的 原因: 因...
我们可以使用 Vue3 的onMounted和onUnmounted钩子来监听窗口的 resize 事件,并在事件触发时调用 ECharts 的resize方法。 <template></template>import{ ref, onMounted, onUnmounted }from'vue';import*asechartsfrom'echarts';exportdefault{name:'EChartsComponent',setup() {constchart =ref(null);letmyChart =nu...
监听页面的window.onresize事件获取浏览器大小改变的事件,然后调用echartsInstance.resize改变图表的大小 window.onresize=function(){myChart.resize();}; 此方法在单个组件中没问题,但是多个组件的情况下就会失效,在 window.onresize的回调方法中打印的myChart实例DOM为最后一个组件,只有最后一个组件可以自适应。 开始...