Vue使用echarts随浏览器放大缩小自适应

最新推荐文章于 2025-04-18 14:02:49 发布

weixin_54938190

最新推荐文章于 2025-04-18 14:02:49 发布

阅读量1.2k

点赞数 1

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_54938190/article/details/127446039

版权

本文介绍了三种方法实现Echarts图表随页面大小变化自动调整，特别强调了使用百分比、vh/vw或弹性布局确保自适应效果。在某些情况下，第一种和第二种方法可能失效，但第三种方法通常能可靠地实现自适应。为了实现Echarts的自适应，务必避免为图表容器设置固定宽高，推荐使用动态单位。

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

echarts实现随着页面大小，调整图表大小，

第一种，第二种，第三种基本都可以实现自适应，但有时候第一种第二种会不起作用，用第三种即可，

（注意：要实现echarts自适应，盒子的宽高不要写死，可以用百分比，vh,vw，或者弹性）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_54938190

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用Vue引入Echarts实现自适应屏幕大小

FpwgTcl的博客

09-20

561

在Vue单页面应用中，使用Echarts可以方便地实现各种图表的展示和数据可视化。同时，为了适应不同大小的屏幕，我们可以通过一些技巧来实现图表的自适应。本文将介绍如何在Vue项目中引入Echarts，并实现图表的自适应。

在Vue中使用flex布局 echarts多图标不能自适应缩放问题

coo1的博客

01-20

5771

前言：最近有个项目需要用到echarts绘制多个图表，需求是要支持大屏展示，还有需要支持不同比例的缩放和任意手动缩放。因此，深入学习了echarts和flex布局。虽然遇到很多问题，但都一一解决了收获良多。故此写下遇到的问题与坑，与之共勉。 1.echarts图表需要在一个有给定宽、高的容器里才会绘图。上图截图与echarts官网，地址：echarts官网不得不提一下，都2020年了还不支持...

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

vue通过监听浏览器窗口的变化让echarts自适应浏览器

lannieZ的博客

03-19

816

data() { clientWidth: document.body.clientWidth }, watch: { flashMin(val, oldVal) { console.log(val, oldVal) if (val) { this.timer1 = setInterval(() => { this.socialSecurityParticipationRatio() }, val)

vue项目屏幕自适应_vue项目自适应屏幕和浏览器

weixin_36002026的博客

12-24

2624

1.安装依赖npm i lib-flexible -Snpm i px2rem-loader -D2.在src文件夹下新建utils文件夹，在utils文件夹下新建flexible.js,其代码如下(function() {// flexible.cssvar cssText ='' +'@charset "utf-8";html{color:#000;background:#fff;overfl...

Vue3中Echarts的使用（自适应）-附完整代码

最新发布

本人的博客

04-18

499

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 提供了丰富的图表类型和交互能力，使用户能够通过简单的配置生成各种各样的图表，包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。目前ECharts官方的最新版本是5.6.0。

vue中echarts图表实现自适应大小

weixin_38884642的博客

07-03

464

vue里面使用echarts实现根据浏览器屏幕大小自适应

qq_44552416的博客

05-06

3683

1- 安装 echarts 依赖 npm install echarts -S 2- 创建图表全局引入在main.js 中写 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3- 在对应的页面里面写echarts图表示例 1，新建echarts_demo.vue <template> <d...

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

weixin_44283571的博客

09-03

4078

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

Vue3使用多个echarts随浏览器自适应放大缩小

10-13

Vue3中使用ECharts随浏览器自适应放大缩小通常是通过结合ECharts的resize事件以及响应式组件的特点来实现的。首先，你需要在每个ECharts实例上添加`resize`事件监听，当窗口大小发生变化时，这个事件会被触发。然后...

【vue + echarts】图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘

11-28

4047

图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘

Vue3 echarts 图表跟随窗口自适应大小

m0_56153940的博客

02-23

4374

<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.js+Echarts开发图表放大缩小功能实例

10-19

本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue 中echarts图表自适应

TZ1284063988的博客

08-05

494

2.main.js中引入。

vue项目自适应屏幕和浏览器

qq_41437844的博客

08-19

3175

1.安装依赖 npm i lib-flexible -S npm i px2rem-loader -D 2.在src文件夹下新建utils文件夹，在utils文件夹下新建flexible.js,其代码如下 (function() { // flexible.css var cssText = '' + '@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-tex

vue中echarts随窗体变化

weixin_33976072的博客

02-27

389

<div id="myChart" :style="{width: '100%', height: '345px'}"></div> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLi...

vue中echarts自适应屏幕宽度自动改变大小

ai_feng123的博客

01-13

4843

在vue组件中在mouted钩子里先调用初始化echarts的方法，然后再添加window事件resize，让window监控屏幕大小变化，从而用定时器setTimeout每隔100毫秒执行echart.resize()事件。 ...

vue Echarts 多个图表自适应浏览器窗口变化

yxm_136452789的博客

02-07

669

平台管理首页显示图表，但是调整浏览器窗口大小时，图表不会随着窗口的变化而变化。解决代码：首先定义变量 data(){ return{ pieChart:null, statusChart:null, barChart:null, } } 在mounted里面 mounted(){ let _this = this; //窗口变化 window.onresize =（） =>{ return (()=>{ _this.p

Vue大屏自适应

梨子社区

03-15

2154

【代码】Vue大屏自适应。

vue2可视化大屏浏览器自适应响应

请叫我欧皇！的博客

12-03

2872

本文章主要讲述vue2开发可视化大屏,echars图形会随着浏览器窗口大小而自适应,用到了 .flexible.js 插件把屏幕分成24等分达到目的,公司需求是一个页面多个不同的图表.图表有些是相同的,所以我对图表做了个封装,以其中一个图表为例子1-把下载好的flexible.js,放在所需项目里,之后直接导入到可视化大屏页面即可2-页面分成24等分,以1920为例,1rem等于80px,把页面的px全部写为rem单位3-封装的echars代码如下,一个页面多个相同图表,就用ref的方式初始化实例,不然页面

Echarts桑基图手式放大缩小

02-19

### 实现 Echarts 桑基图的手势缩放功能为了实现在 Echarts 中桑基图的手势缩放功能，由于 `dataZoom` 组件并不适用于此类图表类型[^2]，因此需借助自定义的 JavaScript 方法来捕捉用户的交互行为并相应调整图形的比例。 #### 设置初始环境与监听器在 DOM 加载完成之后，确保外层容器的高度不会因为内容的变化而自动扩展。这一步骤对于保持页面布局稳定至关重要： ```javascript mounted() { const chartBox = document.getElementsByClassName("chartBox")[0]; chartBox.style.maxHeight = `${chartBox.clientHeight}px`; } ``` 此代码片段设置了一个最大高度属性给包含图表的外部 div 元素，防止其尺寸意外改变[^3]。 #### 添加手势识别逻辑接下来，在初始化 echarts 实例之前或之后立即注册触摸事件处理器，用于检测捏合动作（pinch gesture），这是实现多点触控设备上常见的缩放操作的关键部分: ```javascript let lastScaleFactor; function handleTouchStart(event) { if (event.touches.length === 2) { lastScaleFactor = getDistanceBetweenFingers(event); } } function handleTouchMove(event) { if (!lastScaleFactor || event.scale === undefined) return; const scaleFactor = event.scale / lastScaleFactor; myChart.setOption({ series: [{ type: 'sankey', layoutIterations: 0, // 防止重新计算位置影响性能 itemStyle: {}, label: {} }] }, true); applyTransform(scaleFactor); // 自定义函数应用变换矩阵 lastScaleFactor = event.scale; } // 计算两指间距离辅助函数 function getDistanceBetweenFingers(touchEvent) { const touch1 = touchEvent.touches[0], touch2 = touchEvent.touches[1]; let dx = touch2.clientX - touch1.clientX, dy = touch2.clientY - touch1.clientY; return Math.sqrt(dx * dx + dy * dy); } ``` 上述脚本展示了如何捕获双击屏幕上的两个接触点，并基于它们之间的相对移动量动态更新显示比例。注意这里假设存在名为 `applyTransform()` 的方法用来实际执行视图转换；具体实现取决于项目需求和技术栈的选择。 #### 更新图表样式以适应新的缩放级别每当发生缩放时，除了修改物理大小之外，还需要适当调整字体大小、线条粗细等视觉元素，使得即使是在较大范围内查看数据也能清晰易读。这部分工作通常涉及到 CSS 或者直接操纵 ECharts API 来定制外观特性。最后提醒一点，考虑到用户体验，建议提供某种方式让用户能够重置回默认状态——比如点击某个按钮恢复原始尺度，或是允许通过惯性滚动返回原位。