echarts图表自适应浏览器缩放问题

最新推荐文章于 2024-04-23 14:36:16 发布

小白也要努力啊

最新推荐文章于 2024-04-23 14:36:16 发布

阅读量575

点赞数 2

文章标签： echarts javascript vue.js 前端 css

本文链接：https://blog.youkuaiyun.com/wwwwssmas/article/details/124771046

版权

本文介绍了如何在Vue项目中通过匿名函数自调用解决Echarts图表在浏览器窗口缩放时无法自适应的问题，提供了一个mounted生命周期钩子下的窗口resize事件监听与图表resize方法的实例。

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

最近做项目遇到echarts问题，但是无法自适应浏览器窗口，搜了好久，终于找到解决办法，

在mounted中进行如下操作，结合匿名函数自调用来解决

 mounted() {
    
  //echarts图表自适应
    let that = this;
    window.onresize = ()=> {
      return(()=>{
         that.myChart.resize()
         that.myCharttwo.resize()
         that.myChartthree.resize()
      })()

    };
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小白也要努力啊

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ECharts图表自适应浏览器窗口大小（可随浏览器窗口的放大缩小而自适应）

weixin_44283571的博客

09-03

4063

2020年9月3 今天在制作ECharts图表时遇到一个问题，需要在一个页面里放入十个ECharts图表，使用的是vue框架进行制作，为了避免在一个文件里写入过多的代码，于是每一个ECharts图表我都单独的写到另一个文件里，再通过组件的形式插入到主文件里。但是在制作折线图时因为这三个折线图在浏览器窗口里占的比例比较大，所以我就希望这些折线图能够在浏览器窗口缩放时进行自适应。 **1.**当只有一个图表需要进行自适应时 // 使用刚指定的配置项和数据显示图表。 this.myChart

多个Echarts图表自动自适应（无需手动刷新）

qq_58800537的博客

09-05

411

【代码】多个Echarts图表自动自适应（无需手动刷新）

参与评论您还未登录，请先登录后发表或查看评论

echarts 根据浏览器自动缩放

关凯华の的博客

03-09

292

window.addEventListener("resize", () => { if (myChart) { myChart.resize(); } });

当浏览器窗口缩放时echarts()也随着变化用resize() 方法

热门推荐

kakaxiD的博客

07-21

1万+

原声的JS function addLoadEvent(fn){ var old = window.onresize; if(typeof window.onresize != 'function'){ window.onresize = fn; }else{

echarts根据浏览器缩放适配容器

qq_40576178的博客

07-01

526

当我们在做可视化的项目时，通常会用到echarts，但如果想让页面随着浏览器缩放进而让echarts图形也随之缩放，设置以下代码即可生效注意：要在setOption之后设置此行代码 window.addEventListener(“resize”, () => { this.myLineDocument.resize();}); 请注意：是箭头函数，当我使用普通函数时，发现echarts图形无法随浏览器缩放而变化 ...

使用echarts.resize()实现窗口缩放时图表自适应(vue)

xiubinxu的博客

10-10

3440

使用echarts.resize()实现缩放时图表自适应(vue) 不知道大家使用echarts时是否遇到过当我们的窗口改变时,我们页面上的图表就缺失了一块,那一块被白色什么的所覆盖,图表没有实现实时的刷新,咋办呢? 技术要点: echarts里面的resize() + 节流 mounted() { // this.initEcharts 初始化图表 this.initEcharts(this.type) // debounce 节流函数下面送上 this.__resizeHandler

Echarts （第二篇图表自适应浏览器窗口缩放字体自适应浏览器）

程序猿小白的博客

08-29

2825

1、在最近的pc项目中，页面中用到了多个echerts图表，需要自适应浏览器窗口。原因：因为图表不会根据浏览器的窗口大小而进行适应性的调整大小。解决方案：在setOption 后引入下边window.addventListener...即可。 drawLine(month, value, index) { var a = document....

Echarts自适应浏览器放大缩小

德蕾莎之道

09-22

377

resize（） setTimeout(function () { window.onresize = function () { myChart.resize(); } }, 200)

c# echarts图表自适应缩放

最新发布

01-12

### C# 中 ECharts 图表自适应缩放解决方案为了使基于 C# 的 Web 应用程序中的 ECharts 图表能够实现自适应缩放，通常是在前端 JavaScript 配合下完成这一功能。具体来说，在 ASP.NET 或其他 C# 基础的框架中嵌入 ...

vue中echarts3.0自适应的方法

01-19

前端时间做一个vue的项目，echart是按需引入的如下： ...然后发现在缩放浏览器窗口时折线图并不会自适应，费了好一会才解决，记录下来给需要的小伙伴，第一种：浏览器自适应 通过：在myChart.s

echarts图表自适应缩放

09-15

为了使echarts图表能够自适应缩放，你可以在图表初始化后添加一个resize事件监听器，并在事件处理程序中调用resize()方法。这样，当浏览器窗口大小发生变化时，图表将自动重新渲染以适应新的大小。下面是一个示例...

揭秘Vue.js动态图表调整：ECharts图表自适应技术的7大实战技巧

![揭秘Vue.js动态图表调整：ECharts图表自适应技术的7大实战技巧]...随后，深入探讨了实现ECharts图表自适应的关键技术，包括容器尺寸变化监听、响应式更新策略以及浏览器窗口缩

echarts中图表无法自适应浏览器窗口大小的解决办法

nicole27ll的博客

11-25

3869

一、实现图表随着浏览器窗口大小变化而变化的js代码，主要实现自适应功能的语句如下： //实现自适应效果的两种写法，第一种 window.onresize = function(){ mc.resize(); } //第二种 window.onresize = mc.resize <script> let xData = ['小明', '小红', '小王', 'marry', ...

Echarts 图表跟随浏览器大小缩放

qq_39275718的博客

11-17

1443

// 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); });

echarts 自适应放大但是不自适应缩小

weixin_45927546的博客

01-31

469

给 flex:1的地方加个 min-width就行。

详细讲解：Vue使用echarts随浏览器放大缩小自适应

GongWei_的博客

08-01

1万+

最近项目要用到echarts画图，踩了个自适应的坑，在这里总结一下，首先看未bug图分析一下：左边的盒子，也就准一等品花颜色得分情况没有出来是因为我最外边的盒子设置的固定宽，如果设置固定宽 echarts是能够自适应的，但是页面会挤在一起，也就是左边中间右边的盒子间隔会随着浏览器窗口放大变小，最后挤在一起。所以为了自适应，我把盒子的宽都设成百分比了；中间和右边的div盒子我就是设置百分比宽，这样设置页面是不会挤在一起了，但是echarts无法自适应，大小固定不变，导致图形超出盒子，也就是现在见到的

解决echarts图表随窗口宽度变化而改变图表的大小

weixin_43394840的博客

05-05

8720

很多同学在使用echarts时遇到了浏览器窗口大小发生变化时，图表大小没有自适应窗口的宽度，下面我将对比演示随着窗口大小变化，echarts图表也发生变化的例子。

Vue3+Echarts: 浏览器缩小后，图表内容发生重叠

无面人的博客

04-23

928

vue3+echarts：浏览器缩小后，图表内容发生重叠

实现Echarts随着浏览器屏幕自适应缩放

路虽远，行则必至！

11-15

3379

如果echarts不做大小自适应的话，屏幕放大缩小是不会让实例自适应的，此时我们可以根据浏览器自带的监听屏幕事件window.addEventListener(‘resize’,function(){})这个方法，结合echarts官网中的chart.resize()方法。其原理是浏览器监听屏幕大小变化，执行echarts中的chart.resize()方法。只要屏幕尺寸发生改变，echarts实例会紧跟着同比例放大缩小。