Vue3监控div的宽高变化事件canvas自适应

有时候使用canvas会以容器的宽高来填充,当容器div宽高发生变化时需要主动改变canvas的宽高以填充满,以下是vue3中监视div宽高变化的方式,实测有效。

使用watch 监视dom的ResizeObserver

    <div id="container" ref="stageRef" class="container-div" />

watch(stageRef, (newBox, oldBox) => {

  if (newBox) {

    // 监听宽度变化

    new ResizeObserver((entries) => {

      entries.forEach((entry) => {

        console.log('Width changed:', entry.contentRect.width);

        lastResize = new Date().getTime()

        let tmpResize = lastResize

        setTimeout(() => {

          if(tmpResize==lastResize){

        // 自适应

            if(currentWorkShop.value.map){

          if(konvaConfig.value.stage){

          konvaConfig.value.stage.removeChildren();

        }

  showTargetMap(currentWorkShop.value)

  }

          }

        }, 300);

      });

    }).observe(newBox);

  }

}, { immediate: false });

### Vue2 中 ECharts 实现自适应窗口大小 在 Vue2 项目中实现 ECharts 图表随着浏览器窗口大小的变化而自动调整,可以通过监听 `window` 的 `resize` 事件来触发 ECharts 的 `resize()` 方法。以下是具体实现方式: #### 使用 `mounted` 和 `beforeDestroy` 生命周期钩子管理事件监听器 为了确保组件卸载时移除不必要的事件监听器,在组件挂载完成后添加监听器,并在组件销毁前将其删除。 ```javascript export default { data() { return { chart: null, }; }, mounted() { this.initChart(); window.addEventListener(&#39;resize&#39;, this.handleResize); }, beforeDestroy() { if (this.chart) { window.removeEventListener(&#39;resize&#39;, this.handleResize); this.chart.dispose(); } }, methods: { initChart() { const chartDom = document.getElementById(&#39;main&#39;); this.chart = echarts.init(chartDom); this.chart.setOption({ title: { text: &#39;ECharts Example&#39; }, tooltip: {}, xAxis: {data: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;]}, yAxis: {}, series: [{ name: &#39;销量&#39;, type: &#39;bar&#39;, data: [5, 20, 36], }] }); // 设置初始尺寸 this.chart.resize(); }, handleResize() { if (this.chart) { this.chart.resize(); } } } } ``` 上述代码展示了如何初始化图表并绑定 `resize` 事件处理函数[^1]。每当窗口尺寸发生改变时都会调用 `handleResize` 函数重新计算图表布局。 #### 利用防抖技术优化性能 频繁触发的 `resize` 事件可能会给页面带来较大的负担,因此建议引入节流或防抖机制减少不必要的渲染操作。可以借助第三方库如 `throttle-debounce` 来简化这一过程[^4]。 ```bash npm install throttle-debounce --save ``` 接着修改之前的 `handleResize` 方法如下所示: ```javascript import { debounce } from &#39;throttle-debounce&#39;; methods: { ... handleResize: debounce(300, function () { if (this.chart) { this.chart.resize(); } }) } ``` 这样就实现了更效的响应式设计模式下的 ECharts 渲染逻辑。 #### 配置项中的 auto-resize 属性 如果希望进一步简化开发流程,则可以直接利用 ECharts 提供的内置选项——`autoresize` 参数。只需将此参数设为 true 即可让图表根据其父级 DOM 元素的变化自动调整自身大小[^3]。 ```html <div id="chart-container" style="height:400px;width:100%;"> </div> <script> var myChart = echarts.init(document.getElementById(&#39;chart-container&#39;), null, {renderer: &#39;canvas&#39;}); myChart.setOption({...}); // 开启自动缩放功能 myChart.group = &#39;&#39;; myChart.getZr().configParameters.autoResize = true; </script> ``` 注意这里使用的是低版本 API 调用来开启全局级别的自动重绘行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

11eleven

你的鼓励是我创作的动力 !

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值