网站功能模块表格,wordpress 二手市场,做网站有多赚钱,hello外贸人才网文章目录 关于ResizeObserver示例代码示例代码结果如下所示echarts自适应容器div大小示例代码结果如下所示echarts自适应容器大小的方式二 关于ResizeObserver
关于这个Web API#xff0c;可以看mdn的官网#xff0c;ResizeObserver - Web API | MDN (mozilla.org)#xff… 文章目录 关于ResizeObserver示例代码示例代码结果如下所示echarts自适应容器div大小示例代码结果如下所示echarts自适应容器大小的方式二 关于ResizeObserver
关于这个Web API可以看mdn的官网ResizeObserver - Web API | MDN (mozilla.org)这里面有关于这个ResizeObserver 接口的说明。这个在可视化大屏的时候关于echarts图表可能会用到这个也就是说需要做到echarts自适应容器div的大小。或者是低代码平台中要开发关于echarts的组件时会用到我在低代码项目中自定义开发echarts组件就用到了这个内置的API。
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleResize Observer with Input Events Example/titlestyle#target {background-color: lightblue;margin: 20px;}/style
/head
bodydiv idtarget stylewidth: 300px; height: 200px;这个是绑定观察的元素当前宽300px, 高200px
/divlabel forwidth宽:/label
input typenumber idwidth value300 min0 max500 placeholderSet width
label forheight高:/label
input typenumber idheight value200 min0 max500 placeholderSet heightdivbutton onclickresizeObserver.disconnect()停止观察/buttonbutton onclickresizeObserver.observe(targetElement)重新观察/button
/divscript// 创建 ResizeObserver 实例const resizeObserver new ResizeObserver(entries {entries.forEach(entry {console.log(元素大小改变为宽 ${entry.contentRect.width}px 高 ${entry.contentRect.height}px);targetElement.innerHTML 这个是绑定观察的元素当前宽${entry.contentRect.width}px, 高${entry.contentRect.height}px;});});// 观察目标元素const targetElement document.querySelector(#target);// 开始观察可以观察多个元素根据需求选择不同的元素即可这里只拿一个作为示例// const targetElement1 document.querySelector(#target1);// resizeObserver.observe(targetElement1);resizeObserver.observe(targetElement);// 获取输入框元素const widthInputElement document.querySelector(#width);const heightInputElement document.querySelector(#height);// 添加 input 事件监听器widthInputElement.addEventListener(input, function() {// 更新目标元素的宽度targetElement.style.width ${this.value}px;});heightInputElement.addEventListener(input, function() {// 更新目标元素的高度targetElement.style.height ${this.value}px;});// 在不再需要观察时取消观察// resizeObserver.unobserve(targetElement);// 清理观察器// resizeObserver.disconnect();
/script/body
/html示例代码结果如下所示 注意看GIF图中的宽高数字变化 echarts自适应容器div大小
!DOCTYPE html
html langenheadmeta charsetUTF-8titleResize Observer with Input Events Example/title!-- 在线引入echarts因为是在线的所以有可能会失效如果链接失效了自己去echarts官网找然后引用即可 --script srchttps://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js/script
/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divlabel forwidth宽:/labelinput typenumber step20 idwidth value600 min0 max1000 placeholderSet widthlabel forheight高:/labelinput typenumber step20 idheight value400 min0 max800 placeholderSet heightdivbutton onclickresizeObserver.disconnect()停止观察/buttonbutton onclickresizeObserver.observe(targetElement)重新观察/button/divscript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 创建 ResizeObserver 实例const resizeObserver new ResizeObserver(entries {entries.forEach(entry {console.log(元素大小改变为宽 ${entry.contentRect.width}px 高 ${entry.contentRect.height}px);myChart.resize();});});// 观察目标元素const targetElement document.querySelector(#main);// 开始观察可以观察多个元素根据需求选择不同的元素即可这里只拿一个作为示例// const targetElement1 document.querySelector(#target1);// resizeObserver.observe(targetElement1);// 如果在vue中这个应该在组件挂载时调用resizeObserver.observe(targetElement);// 获取输入框元素const widthInputElement document.querySelector(#width);const heightInputElement document.querySelector(#height);// 添加 input 事件监听器widthInputElement.addEventListener(input, function () {// 更新目标元素的宽度targetElement.style.width ${this.value}px;});heightInputElement.addEventListener(input, function () {// 更新目标元素的高度targetElement.style.height ${this.value}px;});// 在不再需要观察时取消观察如果是在vue中这个应该在组件销毁时调用// resizeObserver.unobserve(targetElement);// 清理观察器如果是在vue中这个应该在组件销毁时调用// resizeObserver.disconnect();/script/body/html示例代码结果如下所示 具体看下面的GIF图这里通过输入数字的方式模拟div大小变化时echarts自适应容器大小。 echarts自适应容器大小的方式二
文章一Echarts自适应div大小_echarts div resize-CSDN博客 文章二vue3项目中让echarts适应div的大小变化跟随div的大小改变图表大小_echart图根据div大小变化-CSDN博客
