echarts不适配问题 页面大小发生改变 echarts不会跟随改变

最新推荐文章于 2024-06-11 16:36:33 发布
最新推荐文章于 2024-06-11 16:36:33 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/canRun_/article/details/131764765
博客主要围绕ECharts适配问题展开。使用vw单位做适配时，浏览器缩小ECharts不会随之缩小，需刷新才行。通过监听window尺寸变化，调用echarts.resize()方法，如window.onresize = function () { myChart.resize(),myChart1.resize() }，可解决适配问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 echarts需要做适配 我用了vw单位

当我们浏览器缩小的时候发现echarts并没有随之缩小只有再次刷新后在可以缩小

我们可以通过监听window的尺寸 在发生变化的时候调用echarts.resize()方法就可以解决echarts适配问题

window.onresize = function () { myChart.resize() ,myChart1.resize() };

 

canRun_
关注
Echarts多个图表自适应大小（亲测有效）
qq_46115789的博客
03-03 2876
用Echarts在同一个页面插入了两个图后想让这两个图都自适应页面的大小，网上提供了很多方法，但这些方法都没法解决问题，于是我尝试将几种方法中的一些特性进行结合终于解决了问题，由于网上没有看到这个方法寻找解决办法的过程中耗费了大量时间，所以想写这篇文章希望能帮助遇到相同问题的人。 注意 在同一页面插入两个图的方式我感觉还是有区别的，有的图是一个option里面集成了两张图，这种其实就是一张图，只是分了两个部分，直接用onresize即可，而我是进行了两次myChart.setOption(option.
vue2.0中自适应echarts图表、全屏插件screenfull
m0_66970189的博客
08-21 2061
第一，自适应的echarts图表，要配合着能够自适应的盒子来使用，首先就是盒子要能够跟随屏幕大小改变而改变，比如我们使用弹性盒子就可以实现。第二，要想实现自适应的echarts图表，就是当窗口发生改变时，echarts图表的尺寸重新定义一下，使用resize的方法就可以实现。在mounted中调用这个方法，并且将数据传入进去，那么就可以实现自适应echarts图表了。首先在项目中安装这个插件，使用npm指令。在需要使用的组件，引入一下即可。
vue中echarts自适应屏幕大小
写代码脑子疼
11-18 3057
vue中echarts自适应屏幕大小
echarts 自适应放大但是不自适应缩小
weixin_45927546的博客
01-31 497
给 flex:1的地方加个 min-width就行。
使用Echarts图表时，页面切换后并且改变页面窗口大小，再切回原来页面Echarts图表显示有问题
叶子yes的博客
07-21 1845
可以看到，即使我们已经调用了resize方法，但是在进入页面的时候并没有去调用，所以Echarts图表不会自动恢复原来的样子，这时候我们再改变一下当前页面窗口大小，图表又可以再次调用resize方法，然后恢复原来的大小。所以这时候只需要我们手动调用一下resize方法就可以了。同时，我们还可以使用Vue Router提供的组件内守卫 beforeRouterEnter 来手动触发echarts的resize事件，它会在进入组件路由时触发。什么时候去手动调用resize方法呢？
echarts不会随着flex布局自适应伸缩
weixin_39808181的博客
06-17 2879
echarts在调用resize时会重绘，如果你的子div没有设置宽度，只是设置了flex：1；那么会有如下场景发生：触发图表resize后，子元素宽度全为0，父元素宽度也为0，会导致第一个重绘完成的图表所在的子div宽度不明确，可能会使得第一个绘制完成的图表宽度在resize后还是默认的宽度 ...
2.使用echarts图表时会遇到屏幕宽度变化,，而echarts的图表宽度不变
qq_46090071的博客
04-02 1742
使用echarts图表时会遇到屏幕宽度变化,，而echarts的图表宽度不变 var myChart= echarts.init(document.getElementById('twChart')); myChart.setOption(option); //在初始图表时加以下方法 //方案一:只有一个图表时可加 setTimeout(function (){ window.onresize = function () { myChart.resize();
解决引用echarts，数据改变视图没变问题
qq_58024411的博客
08-21 675
vue项目使用echarts图表。
【ECharts】根据屏幕尺寸echart字体自适应（rem）
qq_52065282的博客
08-11 4831
pc端使用echart，屏幕变大或变小时，echart的字体大小没有根据屏幕大小变化。
ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作
weixin_41786879的博客
11-12 2307
如果只看数据没有直观的感受​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等。
数据可视化——echarts
qq_52301431的博客
07-26 1832
应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。常见的数据可视化库D3.js目前Web端评价最高的Javascript可视化工具库(入手难)ECharts.js百度出品的一个开源Javascript数据可视化库Highcharts.js国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV蚂蚁金服全新一代数据可视化解决方案等等ZRender定制。折线图、、、......
echart盒子没有跟着当前div大小变化而自适应
jiuliangliang的博客
06-11 586
echarts自适应盒子
解决echarts图标不能跟随窗口改变而缩放的问题
qq_46167326的博客
07-04 499
【代码】解决echarts图标不能跟随窗口改变而缩放的问题。
vue中使用echarts窗口调整图表不跟着变化
qq992918831的博客
04-27 604
### 3.vue中使用echarts窗口调整图表不跟着变化 ************** ``` ........... myChart.setOption(option) // 绘制图表 window.addEventListener('resize', function () { myChart.resize() // 监听窗口是否变化,变化的话就重新绘制图表 }) ``` ...
Vue项目中Echarts自适应整理（图表自适应resize失效等及文字大小适配）
Yusian_的博客
06-01 3395
Echarts自适应相关整理（图表大小及文字大小）
Echars(编码)
qq_47628224的博客
07-22 331
ECharts可视化数据
echarts 图标高度自适应_echarts图表盒子大小变化后，图表无法自适应
weixin_35674742的博客
01-14 884
如题：项目基于bootstrap的栅格系统做的响应式这是盒子宽度变小后图表右边明显超出盒子范围：盒子还原后，图表正常显示左边是一个侧边栏，有两个状态的切换，切换后，图表盒子大小会改变，问题就在这里，盒子大小改变后，图表大小并没有改变，甚至我把图表插件调用方法放到侧边栏切换的方法内从新绘制都没有效果：function tan(){//切换方法if(test == 0){//状态改变box.class...
在vue中，echarts多个图表不能自适应缩放问题
Jack_13201的博客
08-13 1323
一、问题现象 二、解决后的现象 三、代码 注：关键代码点 window.addEventListener("resize", function () { myChart.resize(); }); <template> <div class="box"> <div class="recentDocument" id="recentDocument" style="width: 100%; heig
解决echarts图表随窗口宽度变化而改变图表的大小
weixin_43394840的博客
05-05 8914
很多同学在使用echarts时遇到了浏览器窗口大小发生变化时，图表大小没有自适应窗口的宽度，下面我将对比演示随着窗口大小变化，echarts图表也发生变化的例子。
echarts很小
最新发布
03-22
### ECharts 图表大小调整及显示过小的解决方案 在使用 ECharts 时，图表大小可能会因为窗口尺寸的变化或其他因素而导致显示不正常或过小的情况。以下是针对此问题的具体分析和解决方案。 #### 1. 动态调整图表大小 为了使 ECharts 图表能够动态响应窗口大小的变化，可以通过监听 `window.onresize` 事件并调用图表实例的 `.resize()` 方法来实现自动调整功能[^1]： ```javascript // 初始化图表 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); // 当窗口大小发生改变时重新计算图表布局 window.addEventListener('resize', function () { myChart.resize(); }); ``` 上述代码通过绑定 `resize` 事件，在每次窗口大小发生变化时都会触发图表的重绘操作，从而确保图表始终适配当前容器的宽度和高度。 --- #### 2. 页面切换后的图表刷新 当页面进行了切换后再返回到包含 ECharts 图表的页面时，由于某些框架（如 Vue 的 `keep-alive`）会缓存组件的状态，可能导致图表未能及时更新其尺寸。此时需要手动触发图表的 `.resize()` 方法以强制刷新图表[^2]。 对于基于 Vue.js 开发的应用程序而言，推荐在组件激活钩子函数 `activated` 中执行该逻辑： ```javascript export default { data() { return { echartInstance: null, }; }, activated() { if (this.echartInstance) { this.echartInstance.resize(); // 刷新图表大小 } }, mounted() { const chartDom = document.getElementById('main'); this.echartInstance = echarts.init(chartDom); window.addEventListener('resize', this.handleResize); // 绑定 resize 事件 }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); // 移除事件监听器 }, methods: { handleResize() { if (this.echartInstance) { this.echartInstance.resize(); } } } }; ``` 以上代码片段展示了如何处理因页面切换引起的图表渲染异常问题，并且还包含了对资源的有效管理——即在销毁阶段移除了不必要的事件监听器以防内存泄漏。 --- #### 3. 设置合理的默认宽高比例 有时即使实现了动态调整机制，但由于初始化时未指定合适的宽高值也可能造成视觉上的“过小”现象。因此建议给承载图表的 HTML 元素设定相对单位作为基础样式: ```html <div id="main" style="width: 100%; height: 600px;"></div> ``` 此处采用百分比形式定义宽度以便于跟随父级容器伸缩；而对于高度则赋予固定数值或者依据实际需求灵活配置。 此外还可以利用 CSS 媒体查询进一步优化不同设备下的表现效果: ```css @media screen and (max-width: 768px){ #main{ height:400px; } } ``` 这样便能在移动终端上获得更佳用户体验的同时保持桌面端的良好呈现质量。 --- #### 4. 避免常见错误提示 如果按照前述方法实施却仍然遇到诸如 `'resize is not defined'` 类型的警告，则需确认是否正确声明了变量作用域以及遵循相应编程范式的约束条件 。例如将局部使用的对象提升至全局级别存储或是借助模块化工具妥善封装内部依赖关系等手段均可有效规避此类隐患。 综上所述，通过对 ECharts 提供的功能接口合理运用配合前端开发技巧即可圆满解决图表大小不适配及其衍生的相关难题。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值