echarts图标跟随页面大小变化

最新推荐文章于 2023-08-11 14:48:08 发布
最新推荐文章于 2023-08-11 14:48:08 发布
阅读量877 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 那些年我们遇到的坑 文章标签： 前端 eharts 自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Kobeloveu/article/details/93842015
本文介绍了在不同场景下如何使ECharts图表组件在页面中自适应窗口大小的方法。包括单个组件自适应及多个组件同时自适应的解决方案。

场景一

单个组件在页面中，让echarts大小自适应

 window.resize =（）=>{ myChart.resize() }
 //myChart 是获取的dom元素

场景二

单个页面含有多个echarts组件，用上面的代码，只能是最后一个ercharts组件自适应。用下面代码可实现。

window.addEventListenner('resize',()=>{ myCahrt.resize() }
275：vue+openlayers 点图标的大小随着分辨率而变化
大剑师兰特的GIS世界
07-08 868
本示例介绍如何在vue+openlayer中实现点图标的大小随着分辨率变化。这里是一个方法的演示，实际项目中，需要个人自己去设定更好的方法。
ECharts图表实现放大和缩小功能
蜡笔小新星的博客
10-13 6417
ECharts图表提供了多种方式来实现放大和缩小功能，以下是详细介绍：功能介绍：配置方式：示例代码： 二、地图缩放 功能介绍：配置方式：示例代码： 三、注意事项 版本兼容性：数据范围：交互体验：综上所述，ECharts图表提供了多种灵活的方式来实现放大和缩小功能。根据具体需求选择合适的配置方式和组件类型，可以为用户提供更加便捷和直观的图表交互体验。
解决echarts图表随窗口宽度变化而改变图表的大小
weixin_43394840的博客
05-05 8980
很多同学在使用echarts时遇到了浏览器窗口大小发生变化时，图表大小没有自适应窗口的宽度，下面我将对比演示随着窗口大小变化，echarts图表也发生变化的例子。
echarts.js的柱状图的大小，颜色以及显示的设置
Garnett_zk的博客
07-02 7543
1.设置柱状图的大小 //设置柱的宽度，要是数据太少，柱子太宽不美观~ barWidth:40, 2.设置柱状图的颜色 var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FA...
Echarts图表自适应屏幕大小的方法
qq_45913170的博客
08-11 560
1.首先加一个防抖函数和延迟函数，这个放到utils文件夹下。* @param immediate 是否立即执行。* @param timeout 延迟时间。2.在echarts图表中加入如下代码。* @param fn 函数。
echart界面缩放问题解决
sodakii的博客
09-27 1929
【代码】echart界面缩放问题解决。
Vue3 echarts 图表跟随窗口自适应大小
m0_56153940的博客
02-23 4437
<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> &.
如何让echarts图表随着浏览器窗口的大小变化而变化
qq_41140980的博客
08-09 1592
1、页面标签适应浏览器 2.当页面之中只有一个echarts图表的时候 如下,首先简单设置一个宽度和高度都为浏览器大小的50%的柱状图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> &lt...
echarts图表随页面缩放而自适应
Zheng_xinle的博客
08-30 1433
echarts图表正常展示当window 窗口缩放时 echarts图表需要刷新后才能恢复原状
echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）
江湖的博客
05-26 5万+
现象：相信很多童鞋在应用echarts进行统计图制作时候会遇到这样的问题，进入渲染页面统计图比例显示ok，但是当主动调整浏览器大小时候，统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，比如下图，缩小窗口就会出现溢出的情况这也是个奇葩的需求，但既然产品指出这个问题的存在，开发只能想办法去解决。造成原因：echarts的图表实例事实上并没有主动的去绑定resize()事件，就是说显示区域大小发...
echarts图表的大小调整的解决方案
清水的专栏
08-01 2万+
内部图表的大小是和外部设置的div容器息息相关的，如果想调整整个图表的空间占比，直接修改外部的div容器的宽高即可，但是如果是想设置图表与容器内部的上下以及左右的空白部分（div容器宽高不允许修改的情况下），即需要设置grid属性。...
echarts 饼图 + 全屏显示
dljm328963024的博客
06-21 1520
效果图： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>饼图</title> 6 <script src="js/...
echars放大缩小自适应
weixin_46923775的博客
07-13 977
echars随着屏幕放大缩小 document.getElementById("mainNum")).style.width='100%' window.addEventListener("resize", () => { echarts.init(document.getElementById("mainNum")).resize(); }); 原理:浏览器监听屏幕大小变化，执行echarts中的chart.resize()方法。只要屏幕尺寸发生改变，echarts实例会跟着同比
echarts 随屏幕大小改变大小(resize)
dongsir
07-12 4万+
echarts多个图表大小随屏幕的大小改变自适应，Echarts 多图表自适应窗口大小，echarts随页面大小变化而变化； 今天在做云监控（Dashboard）时发现 Echarts 同一页面存在多个图表的时候，只有一个生效 当页面只有一个图表的时候直接用window.onresize = myChart.resize就可以了 resize 用来改变图表尺寸，在容器大小发生改变时需要...
设置echarts随页面大小变化自适应
a5252145的博客
07-17 5742
设置echarts随页面大小变化自适应 在项目中用echarts绘柱状图时会碰到需求是echarts会随着游览器的放大，缩小自适应。其实很简单，现在给出解决的办法。 //下面my_charts是html中echarts的ID var myChart= echarts.init(document.getElementById("my_charts")); myChart.setOption(opt...
echarts 调整图表大小的方法
热门推荐
小白
10-11 7万+
调整图表与div间上下左右留白，则设置grid属性就可以了具体如下：
echarts 图形随屏幕大小改变而跟着改变(resize)
xiaoxiao48的博客
06-05 3230
echarts 的resize 用来改变图表尺寸，当容器大小发生变化时使用window.onresize = myChart.resize可使图标随着屏幕大小改变而改变。如： //初始化echarts var myChart = echarts.init($("#shijian01")[0]); //此处省略echarts的配置项 ....... //加载echarts配置项 myChart.setOption(option); //图形宽度随屏幕宽度改变而改变 window.onresiz
屏幕大小变化时候echarts图标变化
最新发布
04-01
### 实现ECharts图表在屏幕尺寸变化时自适应 在开发过程中，当需要处理浏览器窗口大小的变化并让ECharts图表随之调整时，可以通过监听`window.resize`事件以及调用ECharts实例的`resize()`方法来完成这一需求[^1]。具体来说，在Vue.js环境中，可以利用Vue2的自定义指令绑定到DOM节点上，以便更灵活地管理生命周期中的事件监听器。 如果使用的是Vue组件，则可以在创建ECharts实例之后，注册一个全局或局部的事件监听器以捕获窗口大小的变化，并在此回调函数内部执行`myChart.resize()`操作[^5]。此外，对于更加便捷的方式，还可以考虑借助`auto-resize`属性简化配置流程——该选项允许开发者无需手动触发`resize()`即可达到相同的效果[^2]。 然而需要注意的是，仅依赖于`auto-resize`可能无法满足某些复杂场景下的精确控制需求。因此推荐结合显式的`resize()`调用来增强可靠性。下面提供了一段基于Vue框架下实现上述功能的具体代码示例： ```javascript <template> <div ref="chartContainer"></div> </template> <script> export default { data() { return { chartInstance: null, }; }, mounted() { this.initChart(); window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); if (this.chartInstance) { this.chartInstance.dispose(); } }, methods: { initChart() { const { echarts } = require('echarts'); this.chartInstance = echarts.init(this.$refs.chartContainer); const option = { title: { text: '示例', }, tooltip: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', }], }; this.chartInstance.setOption(option); }, handleResize() { if (this.chartInstance) { this.chartInstance.resize(); // 调整图表大小 } }, }, }; </script> ``` #### 关键点解析 - **初始化阶段**：确保每次加载页面时都正确渲染出初始状态下的图表。 - **销毁阶段清理资源**：移除不必要的事件监听以防内存泄漏，同时释放已不再使用的ECharts实例对象。 - **动态响应布局变更**：每当检测到视口宽度高度有所变动时即刻通知对应图表重新计算其展示区域范围[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值