vue+element+echarts echarts图表自适应宽高的百分比被渲染成具体的px

最新推荐文章于 2023-05-23 18:42:46 发布
最新推荐文章于 2023-05-23 18:42:46 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： vue elementui 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48271592/article/details/118567496
版权
在项目中封装的自适应Echarts图表组件遇到一个问题，即在某些页面初始化时，设置的90%宽高被错误地渲染为90px。原因是组件所在的容器在Tab切换时display为none，导致resize事件无法正确获取宽度。解决方案是在Tab切换完成后，确认容器display为block时再进行图表渲染，从而实现正确的自适应效果。

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

项目场景：

封装自适应的echarts图表在多个页面里复用

问题描述：

封装了一个自适应的echarts图表组件，在一个页面里没有任何问题，在另一个页面里初始化时宽高90%被渲染成了90px，在调整窗口宽度后变为正常。

初始化时效果图,
这时候的canvas宽高都是90px：

初始化時的樣子

html代码：
myEchart是图表组件

<el-tabs>
        <el-tab-pane label="保函统计">
          保函统计
        </el-tab-pane>
        <el-tab-pane label="业务情况" style="width:100%;height
最低0.47元/天 解锁文章
vue.js echrts饼图实现百分比
qq_37237495的博客
12-18 2147
显示效果 组件调用 &lt;template&gt; &lt;div&gt; 总数1&lt;el-input-number v-model="total1"&gt;&lt;/el-input-number&gt; 数量1&lt;el-input-number v-model="num1"&gt;&lt;/el-input-number&gt; &a
echarts图表宽度为百分比出现的问题
withNanSi的博客
07-23 1454
问题：echarts因为移动端适应性宽度为百分比，图表显示不正常 原因：echarts图表外层div宽高要给固定的值 解决： 给外层div固定的值 设置监听，获取到外层div最新宽，赋值给echarts图表 var phone = echarts.init(document.getElementById("phone")); $(window).resize(function () { phone.resize({ width:
echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起
张大晴的博客
08-02 1万+
文章转载：https://blog.youkuaiyun.com/liuminyi1987/article/details/79653737   问题如下：在tab切换的时候发现第二个tab页面的图表显示不全，缩到了一起。 添加window自适应方法不管用，如下：   mychart.setOption(option); $(window).resize(function() ...
vue中在tabs选项卡切换时echarts图表宽度由100%变为100px
风如也的博客
11-10 1438
使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px 问题原因：echarts 渲染时 tab 选项卡 的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px 解决办法：使用 this.$nextTick <ul class="tabbar"> <li><a href="javascript:void(0)
element+vue+echarts 实现视图转换和图例大小自适应
佛系写BUG的博客
05-25 1385
element+vue+echarts 实现视图转换和图例大小自适应 本教程适合新手,大佬勿喷. 第一次写博客,有不足之处,希望大家指出. 示例图 html 由于要是视图大小自适应页面并随页面大小变化,所以一定要在页面上方写入样式 <head> <title>通知列表</title> <#include "/header.html"> <!--引入echarts视图--> <script t
vue3+ts+element plus 使echarts自适应（推荐）
work33的博客
11-22 1982
<template> <el-row :gutter="10"> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>Card name&
【vue + echarts】图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘
$
11-28 4047
图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘
vue+element中展现echarts图表明细，动态生成表格的行与列，表头实现斜线/斜杠
qq_29124867的博客
01-14 1284
需求：1、echarts图表的类型是动态的，合同类型用柱状图展示，合计用折现图展示。2、下面表格对应的月份跟合同类型是动态的，从后台数据库获取，当查询条件只展示7个月的数据时，下面图表以及表格相应只展示7个月的数据。3、表格头加斜线。4、监听左侧菜单栏是否展开，解决左侧菜单展开关闭时图表自适应 2、话不多说贴代码 <el-form :inline="true" ref="searchForm" :model="searchForm" class="search-form">
【 Vue-element 的 element-tabs 不同标签页下使用Echarts 图表时自适应的问题 】
学习分享
09-01 595
Vue-element 的 element-tabs 不同标签页下使用Echarts 图表时自适应的问题
echarts在tab切换时容器宽度设置用% ，只展示百分比前面的数值 px
u010050427的专栏
07-14 420
原因： 1、由于tab 切换过程 display:no ，所以设置的div 元素 echart如果按照百分比设置的话是没有这个元素的，echarts就按照对应百分比的数值 用px 代替。例：90% ->90px ；导致显示不全。 解决办法： 1、获取父类的宽度作为基数进行设置 $("#chart2").css('width',$(".layui-tab-item").width()); var echarts = echarts.init(document.getElementByI
Echarts/堆叠/高度统一/显示百分比
weixin_43997182的博客
04-01 866
【代码】Echarts/堆叠/高度统一/显示百分比。
vue-echarts 宽度和高度等比例缩放问题
huayiluo_x的博客
01-11 991
宽度给个百分比 高度我给个vh 这样屏幕大小变化也会跟着变化。其他问题大概就是 引入单页面的时候 网上很多是旧版引入。现在要说的就是自适应比例的问题了。大家有兴趣可以看看官方文档。安装vue-echarts。如果是vue2 还需要安装。main.js 引入。
vue+elementui+echarts饼状图内部显示百分比
qq_40693615的博客
12-05 4377
<!--饼状图--> <div id="main" style="width: 400px;height: 350px;"></div> import echarts from 'echarts' export default { name: '', data () { ...
echarts设置宽高100%渲染出来为100px
A_ta_and_run的博客
07-08 3231
简单记录一下最近项目里遇到的echart宽高显示问题
(echarts)echarts第一次渲染柱状图获取不到容器宽高
nyf_unknow的博客
05-23 679
用this.$nextTick(()=>{…
关于渲染echarts图表宽度只显示100px
Jet_Lover的博客
12-07 951
如图本来渲染echarts 写的css样式为 渲染出来页面却变成了这样 审查元素发现 元素宽度变成了100px, 本来应该为658px的。但是变成了100px,最后发现这个弹框用的v-show渲染的， 把v-show缓存v-if就好啦应该是eharts中dom元素渲染的原因最后看效果
vue项目中echart自适应高度--根据容器大小（宽度同理）
得之我幸
11-30 7845
vue项目中echart自适应高度–根据容器大小（宽度同理） HTML <template> <el-row :gutter="32" id="content" style="height:90%"> <div id="backPerson" :class="className" :style="{height:height ,width:width}" /> </el-row> </template> JS:根据content的
更改(改变)echarts渲染出来的canvas大小(宽高)
热门推荐
10-15 4万+
echarts官网demo：https://www.echartsjs.com/examples/zh/index.html#chart-type-line 可以看到渲染出来的canvas全是正方形的，老人直接路过，新手很多不注意看手册的估计总是忽略一个东西: init的其他参数： //初始化的时候传入 width 和 height 就能改变渲染出来的 canvas大小 (dom: HTMLDiv...
vue中echarts 游览器百分比自适应
weixin_45679860的博客
02-07 291
vue中echarts 游览器百分比自适应 mounted() { this.resizefun = () => { this.$echarts.init(document.getElementById("passengerDay")).resize(); this.$echarts.init(document.getElementById("toiletPeople")).resize(); }; window.addEventListener("resize", this
Vue封装Element UI表格与ECharts交互及Excel导入导出功能
资源摘要信息:"vue-echarts-element-stylus是一个基于Vue.js的项目，它高度封装了Element UI的表格组件，ECharts图表以及Excel表格的上传和下载功能。该项目为用户提供了易于使用的接口，通过高度封装简化了开发过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值