echarts图表跟随窗口自适应

最新推荐文章于 2024-06-01 10:47:21 发布
原创 最新推荐文章于 2024-06-01 10:47:21 发布 · 640 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts

本文介绍如何使ECharts图表在窗口大小变化时自适应调整。针对单个及多个图表场景，提供有效的代码实现，确保图表能实时适应窗口尺寸变化。

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

需求：echarts图表跟随窗口变动自适应

情况一：只有一个图表

window.onresize = myChart.resize;

情况二：有多个图表，虽然官方说使用resize可以自适应，但是在有多个图表的情况下，只有最后一个可以自适应

解决方法：

 window.addEventListener("resize",function () {
        myChart.resize();
    })

代码亲测有效

echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）
江湖的博客
05-26 5万+
现象：相信很多童鞋在应用echarts进行统计图制作时候会遇到这样的问题，进入渲染页面统计图比例显示ok，但是当主动调整浏览器大小时候，统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，比如下图，缩小窗口就会出现溢出的情况这也是个奇葩的需求，但既然产品指出这个问题的存在，开发只能想办法去解决。造成原因：echarts的图表实例事实上并没有主动的去绑定resize()事件，就是说显示区域大小发...
ECharts图表自适应浏览器窗口大小（可随浏览器窗口的放大缩小而自适应）
weixin_44283571的博客
09-03 4114
2020年9月3 今天在制作ECharts图表时遇到一个问题，需要在一个页面里放入十个ECharts图表，使用的是vue框架进行制作，为了避免在一个文件里写入过多的代码，于是每一个ECharts图表我都单独的写到另一个文件里，再通过组件的形式插入到主文件里。 但是在制作折线图时因为这三个折线图在浏览器窗口里占的比例比较大，所以我就希望这些折线图能够在浏览器窗口缩放时进行自适应。 **1.**当只有一个图表需要进行自适应时 // 使用刚指定的配置项和数据显示图表。 this.myChart
echarts-图表随着窗口大小自适应
多一点开心
10-10 841
一、图表大小没有随窗口大小自适应 比如放大窗口重新刷新前会出现多余的空白 缩小窗口图表超出范围 二、手动调用resize 官方文档介绍 为了实现图表随着窗口大小自适应
echarts的自适应窗口大小
xfmuchengxue的博客
04-16 2583
之前一直没弄清楚echarts到底是怎么自适应窗口大小的，最近做H5项目中忽然找到原因了。 <div id="myChart" style="height: 300px;"></div> <script src="../js/echarts.min.js"></script> <script type="text/javascrip...
echarts学习: 图表自适应
m0_52912501的博客
06-01 3787
图表自适应是echarts组件的一个重要的功能。本文介绍了我实现图表自适应的过程，以及在这过程中我所犯的一些错误。还拓展介绍了防抖与节流、图表自适应的原理、ResizeObserver等内容。
Vue3 echarts 图表跟随窗口自适应大小
m0_56153940的博客
02-23 4407
<template> <div class="box"> <Breadcrumb name="数据统计"/> <el-card> <div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '70%'} 800px; `"></div> &.
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ <div class=echarts> 　<IEcharts option=bar ref=echarts>... //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function () { self.$refs.echarts.resize()
echarts图表随页面缩放而自适应
Zheng_xinle的博客
08-30 1427
echarts图表正常展示当window 窗口缩放时 echarts图表需要刷新后才能恢复原状
【vue + echarts】图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘
$
11-28 4093
图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘
echarts图表 兼容性更强的窗口自适应方案
wsd_wsd的博客
12-15 1184
echarts图表 兼容性更强的窗口自适应方案
echarts图表随着窗口的变动而变动
Homshin的专栏
12-27 926
var myCate = echarts.init(document.getElementById('mycate')); // 饼图 var categoryopt = { backgroundColor: 'white', avoidLabelOverlap...
echarts图表跟随屏幕适应
1
06-25 169
// 图表根据容器大小改变 window.addEventListener("resize",function (){ yearchcek.resize(); });
echarts跟随页面响应式布局
qq_42276063的博客
05-28 1575
window.onresize = () => { let barchart = echarts.getInstanceByDom(document.getElementById('barchart')); barchart.resize(); }；
echarts图随着浏览器窗口自适应
weixin_43498392的博客
03-24 1085
echarts图随着浏览器窗口自适应 方法一：先在componentDidMount组件初始化echarts图，然后浏览器监听echarts图的大小，非常值的注意的是：在关闭页面的时候需要在componentWillUnmount组件必须移除这个监听事件，否则浏览器会一直监听。 componentDidMount(){ this.myChart = echarts.init(this.re...
浏览器窗口变化时echart图自适应—— 解决window onresize里写resize方法没效果问题及监听窗口变化，实现多图自适应
皮皮虾的博客
12-05 4053
在画图方法里，写window.onresize()没有实现echart图的自适应： 代码是不是这样的？ this.mychart.setOption(option) var that = this window.onresize = function() { that.mychartOpt.resize() } 无论怎样改变浏览器窗口大小...
vue中监听div大小解决echarts 的resize问题
weixin_42432439的博客
10-22 4648
1、安装element-resize-detector依赖 2.新建chart.resize.js文件，添加下面代码 import echarts from 'echarts'; import Vue from 'vue'; import elementResizeDetectorMaker from "element-resize-detector" export var version = ...
Echarts图形自适应窗口大小的变化
localhost_1314的博客
04-11 2929
如果引入了JQuery的话，加入以下代码即可： $(window).resize(function () { myChart.resize() }) 位置如下图所示： 注意：在Vue项目中，为了不影响页面性能，注意在beforeDestroy生命周期内移除对resize的监听 ...
关于eCharts的随着屏幕的自适应
qq_50823208的博客
12-13 943
1.html代码 也就是echarts的载体 <div id="cake"></div> <div id="line"></div> 2.css代码 这是自己设置盒子的大小，根具自己的需求改变大小 #cake{ width: 400px; height: 300px; } #line{ width: 400px ; height: 300px ; } ..
设置echarts随页面大小变化自适应
RYL_yu的博客
06-11 1053
在项目中应用做echarts折线图,柱状图时会碰到需求是echarts会随着游览器的放大，缩小自适应。 //下面my_charts是html中echarts的ID var myChart= echarts.init(document.getElementById("my_charts")); myChart.setOption(option); //假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可 window.onresize = function
echarts图表根据窗口变化大小变化
最新发布
01-22
### 实现ECharts图表随浏览器窗口大小自动调整 为了确保ECharts图表能根据浏览器窗口大小自适应变化，可以采用多种方式来实现这一功能。 一种简单的方法是在初始化图表之后，通过设置`window.onresize`事件处理程序直接调用图表对象的`.resize()`方法[^1]。这种方式适用于单个图表的情况： ```javascript // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 设置数据和选项... myChart.setOption(option); // 让图表跟随父容器重新计算宽度高度 window.onresize = function() { myChart.resize(); }; ``` 对于页面中存在多个ECharts图表的情形，则推荐使用`addEventListener`监听器注册一个全局的窗口尺寸变更回调函数，在该函数内部依次对各个图表实例执行`.resize()`操作[^2]： ```javascript // 假设有四个不同的图表实例 var myChart1 = echarts.init(document.getElementById('chart1')); var myChart2 = echarts.init(document.getElementById('chart2')); var myChart3 = echarts.init(document.getElementById('chart3')); var myChart4 = echarts.init(document.getElementById('chart4')); function resizeAllCharts(){ myChart1.resize(); myChart2.resize(); myChart3.resize(); myChart4.resize(); } // 添加监听器以便于响应窗口大小变动 window.addEventListener("resize", resizeAllCharts); ``` 此外，值得注意的是，每当图表所在的DOM元素尺寸发生变化时（不仅仅是由于浏览器窗口缩放引起），都应该及时触发相应的`.resize()`调用来保持图表显示效果的一致性和准确性[^3]。 最后，如果项目采用了模块化开发模式，比如Vue.js框架下，可以通过局部引入的方式创建ECharts实例，并同样遵循上述逻辑完成自适应配置[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值