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

最新推荐文章于 2023-08-31 11:08:52 发布
VIP文章 最新推荐文章于 2023-08-31 11:08:52 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： vue elementui 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48271592/article/details/118567496
版权

项目场景：

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

问题描述：

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

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

初始化時的樣子

html代码：
myEchart是图表组件

<el-tabs>
        <el-tab-pane label="保函统计">
          保函统计
        </el-tab-pane>
        <el-tab-pane label="业务情况" style="width:100%
最低0.47元/天 解锁文章
今天拔牙么
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
echarts绘制图表，容器宽度设置百分比， 图表缩在一起
csdn_cai_csdn的博客
08-11 1922
原因：容器元素设置了display: none属性，所以echarts无法获取到容器的宽高值。例如容器设置100%，图表实际宽度只有100px。 解决方法： 1. 根据自身需求动态设置宽高 mychart.resize({ width: $(window).witdth(), height: $(window).width(), }) 2. 给容器宽高设置定值 ...
在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题
热门推荐
老男孩的博客
01-14 6万+
出现的问题 在开发过程中发现el-tabs在默认页echarts正常显示，其他页中echarts设置的宽高为100%不起效，最后都是100px 问题原因 echarts绘制图表计算宽度的时候，由于第二个及后面的tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。 解决方案 结合v-if，将echarts绘图封装成一个组件，然后在el-tab中
关于渲染echarts图表宽度只显示100px
Jet_Lover的博客
12-07 772
如图本来渲染echarts 写的css样式为 渲染出来页面却变成了这样 审查元素发现 元素宽度变成了100px, 本来应该为658px的。但是变成了100px,最后发现这个弹框用的v-show渲染的， 把v-show缓存v-if就好啦应该是eharts中dom元素渲染的原因最后看效果
echarts 图设置高度_Echarts 自适应宽高 vue
weixin_26716079的博客
01-14 8082
思路1.将图表包括在一个div中(该div设置了固定的宽高，可为百分比)2.由于不能直接设置rem进行适配,需要动态计算出'id = chart'的高度setChartHeight() {//根据自己需要调节图形大小,我的图形是放在中let mainHeight = this.$refs.elBox.offsetHeight$("#chart").css("height", mainHeight ...
(echarts)echarts第一次渲染柱状图获取不到容器宽高
nyf_unknow的博客
05-23 485
用this.$nextTick(()=>{…
Echarts/堆叠/高度统一/显示百分比
weixin_43997182的博客
04-01 596
【代码】Echarts/堆叠/高度统一/显示百分比。
vue-echarts 宽度和高度等比例缩放问题
huayiluo_x的博客
01-11 729
宽度给个百分比 高度我给个vh 这样屏幕大小变化也会跟着变化。其他问题大概就是 引入单页面的时候 网上很多是旧版引入。现在要说的就是自适应比例的问题了。大家有兴趣可以看看官方文档。安装vue-echarts。如果是vue2 还需要安装。main.js 引入。
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ <div class=echarts> 　<IEcharts option=bar ref=echarts>... //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function () { self.$refs.echarts.resize()
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vue项目中echart自适应高度--根据容器大小（宽度同理）
得之我幸
11-30 7198
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设置宽高100%渲染出来为100px
A_ta_and_run的博客
07-08 2940
简单记录一下最近项目里遇到的echart宽高显示问题
解决vue中echarts图自适应问题，设置100%宽度显示100px
apple_52148181的博客
07-03 2401
data(){ myChart:null, echarts_option1:{}, }, methods:{ setEcharts() { let myChart = document.getElementById("myChart"); myChart.style.width = window.innerWidth - 290 + "px"; //初始化echarts图表宽度
更改(改变)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封装组件
liuhua7383的专栏
08-31 90
VUE封装组件并引用
vue的自适应布局（%）
AyayaOVO的博客
07-07 4097
目录 1. px与视口 2. % 3. 媒体查询 4. rem 5. vm/vh 一. 百分比 当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。 为了了解百分比布局，首先要了解的问题是： css中的子元素中的百分比（%）到底是谁的百分比？ 直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。 当然这种理解是正确的，但是根据css的盒式模
Vue父组件和子组件对于width:100%和width:inherit
qq_41154880的博客
07-15 3201
Vue父组件和子组件对于width:100%和width:inherit
vue3+echarts实现炫酷的百分比饼图，echarts组件封装
super帅的博客
01-05 3539
vue3+echarts实现炫酷的百分比饼图，echarts组件封装
vue2+element-ui+封装echarts图表
最新发布
09-02
使用Vue2和element-ui封装echarts图表可以帮助我们更好地集成和使用echarts库。下面是一个简单的步骤指南： 1. 首先，我们需要安装vue和element-ui依赖： ```bash npm install vue element-ui ``` 2. 接下来，我们需要安装echarts的依赖： ```bash npm install echarts ``` 3. 创建一个Vue组件来封装echarts图表。可以使用下面的代码作为模板： ```vue <template> <div ref="chart" style="width: 100%; height: 400px;"></div> </template> <script> import echarts from 'echarts'; export default { data() { return { chart: null, }; }, mounted() { this.chart = echarts.init(this.$refs.chart); this.renderChart(); }, methods: { renderChart() { // 在这里编写echarts图表的配置和数据 // 例如： const option = { // echarts配置 }; this.chart.setOption(option); }, }, }; </script> ``` 4. 在需要使用图表的地方，引入刚才创建的Vue组件： ```vue <template> <div> <chart-component></chart-component> </div> </template> <script> import ChartComponent from './ChartComponent.vue'; export default { components: { ChartComponent, }, }; </script> ``` 这样，我们就可以在Vue组件中轻松地使用和封装echarts图表。可以通过修改`renderChart`方法中的echarts配置来自定义图表的样式和数据。同时，element-ui的样式和组件可以与echarts图表无缝地集成在一起。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值