echarts图表二次打开变形(缩小)的问题

最新推荐文章于 2024-07-30 11:57:44 发布
原创 最新推荐文章于 2024-07-30 11:57:44 发布 · 2.9k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

本文讲述了开发者在调试过程中遇到的一个奇特问题：echarts图表在当前路由下正常显示，但在切换路由后再回到原页面时出现问题。通过排查发现与窗口大小改变有关，通过自定义`resize`事件触发解决了图表显示异常。

今天在debug的时候发现一个令人匪夷所思的问题，即在当前路由下打开echarts图表后其正常显示
在这里插入图片描述

切换路由后切换回去
在这里插入图片描述
检查了一遍排除了样式污染的可能，切换的路由也未载入echarts图表(原因不详)

解决方案：无意中发现窗口变动时图形会恢复正常所以我们可以使用自定义触发窗口变更的方法（写在echarts图形配置附近即可）

window.dispatchEvent(new Event(‘resize’))
在这里插入图片描述

用echarts绘制饼图---绘制南丁格尔玫瑰图
dongdouzin的博客
06-16 3591
南丁格尔玫瑰图又名鸡冠花图、极坐标区域图，它将柱图转化为更美观的饼图形式，是极坐标化的柱图，放大了数据之间差异的视觉效果，适用于对比数据原本差异小的数据。 在ECharts中绘制南丁格尔玫瑰图时，参数与标准饼图类似，但是南丁格尔玫瑰图有一个特殊的参数是roseType，称为南丁格尔玫瑰图模式，可以使用的值有两种：“radius”（半径）和“area”（面积）。 当使用半径模式时，以各个item的值作为扇形的半径，一般情况下，半径模式可能造成较大的失真；当使用面积模式时，以各个item的值作为扇形的面积，一般
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图...
企业微信 WWOpenData 在 ECharts 渲染
u014206461的博客
03-15 1782
ECharts 柱状图渲染企业微信 WWOpenData 数据 根据需要渲染数据自己封装一下（部门数据示范） type 不用说吧：userName 用户，departmentName部门 封装数据（后端返回数据封装成需要格式） // 拿到后台反的（部门dep_id） this.renderingData.push( { type:'departmentName', id: // dep_ids } ) this.Rendering(this.renderingData) // 传入数据
绘制3D饼图（以及图在刷新页面后发生缩小问题的解决方式）
sk19969306105的博客
06-20 1436
绘制方法参照：echarts3d饼图，环形图（包含透明效果）_chongwenwen的博客-优快云博客_echarts3d饼图实现后出现问题：echarts页面进入缩成一团的问题（页面刷新后缩小）解决方案参照：echarts图表二次打开变形(缩小)的问题_花心小坚果的博客-优快云博客_echarts 变形解决方案：窗口变动时图形会恢复正常，所以我们可以使用自定义触发窗口变更的方法（写在echarts图形配置附近即可）（ps:我选择写在了setOption（）方法第一次调用之前）1.window.disp
解决Echarts 隐藏再显示后宽度高度变小的问题
seeeeeeeeeee的博客
11-05 2571
问题：很多时候会用到把echarts图放在弹框内。点击后显示弹框出现图表，但是这样会遇到问题就是打开弹框的时候图表会缩的非常小挤在一块。 原因：是因为echarts根据父级盒子大小来渲染图表，但是因为你隐藏了盒子，所以echarts检索不到父级宽高，然后就导致默认给自己了一个很小的宽高，就会挤在一块。 解决办法 所以我们也就顺着这个原因解决，那就再他弹框出来后从新获取一下他的宽高从新渲染一下不就好了吗。 这里就是注意再myChart初始化后直接先resize来构图一遍，这样就保证了每次调用这个方法都会在初始
react在子组件弹框中使用echarts图，首次打开弹窗没有问题，第二次及后续打开弹窗echrts图只有100px
最新发布
asbeela的博客
07-30 437
下一次打开弹窗后，echarts渲染逻辑执行更早，导致问题发生，可以给子组件加上key属性，值为数据id等方法，使得子组件重新渲染。拿不到dom节点，导致echarts大小为默认的100px大小，手动改变浏览器窗口大小触发了resive方法后即正常。1.通过echarts实例手动在合适时机调用resive方法，比如setstate后，或者onchartReady时，重新再resize一次。在子组件弹框中使用echarts图，通过props从父组件传递数据id等数据，从后端查询数据并渲染echarts。
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
解决echarts数据二次渲染不成功的问题
11-20
回到问题本身，当尝试二次渲染ECharts图表时，如果只是简单地调用`setOption`而没有指定`notMerge`为`true`，那么新的数据会与旧的数据合并，而不是替换旧的数据，从而导致更新失败。在描述中的例子中，可以看到`...
java后台生成echarts图表
11-13
Java 后台生成 ECharts 图表是一种常见的数据可视化方法，特别是在大数据处理和Web应用中。ECharts 是百度推出的一个开源的、基于 JavaScript 的数据可视化库，提供了丰富的图表类型和强大的交互功能。然而，在某些...
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
vue项目中使用echarts，页面切换后再切换回来echarts图表不显示
qq_52937529的博客
04-16 1096
vue项目中使用echarts，页面切换后再切换回来echarts图表不显示
vue element使用echarts切换tab标签出现图表被压缩变形，宽度变窄问题
qq_41649342的博客
03-29 5454
vue element使用echarts切换tab标签出现图表被压缩变形，宽度变窄问题 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是displa
vue项目里写完echarts，切换页面时候echarts被挤扁了怎么办
Sun_Stars_的博客
04-28 1832
比如说在选项卡tabs切换中有echarts的话，我们会发现设置好宽高的echarts切换过来之后只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 解决方法 注意 这段代码一定要写在当前tabs的时候的代码里面！！！ this.$nextTick(function () { var myEvent = new Event("resi
Vue 项目使用 ECharts 切换页面回来图表不显示
weixin_49809163的博客
04-11 7574
在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了
vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决
Miss_hhl的博客
01-19 1738
代码： 布局： <TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton> <div class="it_content"> <div class="picture" id="work" ref="work" v-show="flag===false...
Vue 3 ，ECharts 1 ，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
10-31 5675
⭐ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中，创建各种丰富多彩的交互式图表和数据可视化界面。这里来分享记录，在使用 ECharts 时，拖拽页面后，ECharts缩小的问题。
echarts图表显示异常
鸣的博客
04-02 2084
1.比如图形突然右移等等原因，在渲染前清除调原来的图表数据 myChart1.clear(); 这样就显示正常。
使用Echarts图表时，页面切换后并且改变页面窗口大小，再切回原来页面Echarts图表显示有问题
叶子yes的博客
07-21 2017
可以看到，即使我们已经调用了resize方法，但是在进入页面的时候并没有去调用，所以Echarts图表不会自动恢复原来的样子，这时候我们再改变一下当前页面窗口大小，图表又可以再次调用resize方法，然后恢复原来的大小。所以这时候只需要我们手动调用一下resize方法就可以了。同时，我们还可以使用Vue Router提供的组件内守卫 beforeRouterEnter 来手动触发echarts的resize事件，它会在进入组件路由时触发。什么时候去手动调用resize方法呢？
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值