解决echart突然变得极其窄的问题

最新推荐文章于 2023-11-21 09:50:30 发布
最新推荐文章于 2023-11-21 09:50:30 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： vue-antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjy_lilyth/article/details/106556755
版权

因为给页面的echart部分添加了v-show控制是否显示，整个echart是包在div里面的。如果v-show是控制整个div是否显示，就会出现echart显示异常的问题。据说是因为echart初始化找不到div的长度和高度。

所以把v-show放在了div中的row 内，echart就不会出现显示异常的问题了-。-

 

一只学习的小透明
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决Echarts 显示隐藏后宽度高度变小的问题
10-15
主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Echarts出现图表被压缩到很窄的情况的解决方法
热门推荐
花铛
08-22 1万+
图表被压缩到很窄，可能是因为JSs执行太快，CSS来不及渲染，导致canvas只有默认的宽度，可以使用setTimeout()延迟加载JS。
echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题
weixin_39744230的博客
01-12 1176
在作项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了，javascript 在tabs切换中有echarts的话，咱们会发现初始化的那个echarts是有宽度的，当点击tabs切换以后，切换过来的echarts只剩下100px的宽度。这是由于渲染的时机不对，咱们须要在点击到当前切换的时候在echarts父级加载完毕以后在执行echarts，而不是在页面初始化的时候就把全部tabs里面的...
Vue3使用组件库的tab切换echarts图表，图表出现宽度压缩变窄的问题
PretterCode的博客
09-09 1261
Vue3使用组件库的tab切换echarts图表，图表出现宽度压缩变窄的问题
绘制3D饼图（以及图在刷新页面后发生缩小问题的解决方式）
sk19969306105的博客
06-20 1249
绘制方法参照：echarts3d饼图，环形图（包含透明效果）_chongwenwen的博客-CSDN博客_echarts3d饼图实现后出现问题：echarts页面进入缩成一团的问题（页面刷新后缩小）解决方案参照：echarts图表二次打开变形(缩小)的问题_花心小坚果的博客-CSDN博客_echarts 变形解决方案：窗口变动时图形会恢复正常，所以我们可以使用自定义触发窗口变更的方法（写在echarts图形配置附近即可）（ps:我选择写在了setOption（）方法第一次调用之前）1.window.disp
Vue解决echart在element的tab切换时显示不正确问题
01-19
网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。 如下是个人的解决方法： 原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的...
解决vue 中 echart 在子组件中只显示一次的问题
10-18
为了解决这个问题，可以利用Vue的watch属性来监听数据的变化，从而实现数据变动时，重新执行图表的初始化代码来更新图表。 首先，我们需要了解Vue的组件化开发原则。组件化开发可以帮助我们构建可复用的组件，提高...
echart实例echart实例
02-09
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，以及优秀的性能，能够帮助开发者轻松实现数据可视化。本实例将深入探讨ECharts的基本使用...
echarts显示隐藏切换导致的图形太小的解决办法
weixin_43572973的博客
11-13 3065
echarts显示隐藏切换导致的图形太小的解决办法解决方案： 将v-show 改成v-if总结： 先上代码 <div class="line-chart" ref="lineChart" v-show="chartData && chartData.inspectData && chartData.hiddenDangerData && (chartData.inspectData.leng
解决echarts使用v-show页面缩成一团问题
路虽远，行则必至！
01-12 914
图表默认是隐藏状态，初始化图表的时候因为获取不到容器的实际高宽，绘制失败，需要重新获取容器的宽高再进行绘画。解决方案：切换方法中加入以下代码。
echart中iframe中的bar内容过小、比例不协调的问题
好狗呱呱叫的博客
01-14 849
解决方法: 在option设置中，通过grid来调整表格整体页面比例 grid: [ {x: '10%', y: '20%', width: '90%', height: '65%'},],
解决Vue中v-show控制echarts图表显示但图表宽度为100px问题
sinat_34241861的博客
04-16 5272
问题出现场景 在vue项目中，使用v-show控制div元素的显示，div标签中是echarts图表，自定义的echarts CSS样式是width为100%，但实际显示时图表宽度确为100px 实际代码 父组件代码 <template> <div> <div v-show="showMain"> <div style="backgro...
v-show echarts宽高问题
偏执
07-23 506
v-show控制的是display:none或者display:block，但是echarts这个div，是存在于结构里面的，所以，当用v-show控制隐藏时，canvas就是100px，当v-show控制显示的时候，也只是改变了display这个css属性而已，canvas的width也就维持了100px。v-if时，echarts这个div是不存在结构里的，当v-if控制显示的时候，echarts开始初始化，那么宽度就正常了。将v-show改成 v-if。
vue2.0中使用v-if/v-show切换后echarts不显示和宽高问题
最新发布
ll_883963的博客
11-21 1634
但新的问题，tab切换页面使用v-show时，echarts图表的宽高变成100px，因为v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示错误的情况。因为在切换后并没有触发生命周期函数，没有获取到dom结构，而无论是v-if或v-else-if或v-else，都不能和ref一起使用，而且不论是直接使用，还是在子元素上使用ref，都会获取不到真实dom元素的。所以使用v-show在什么情况都能获取真实dom。
在使用v-show的来切换两个独立的echarts的时候会出现显示不全的问题，也就是宽度只有100px
weixin_49210760的博客
07-07 1373
<template> <div id="app"> <div v-show="fl" id="myChart" :style="{width: '100%', height: '300px'}"></div> <div v-show="!fl" id="myChart2" :style="{width: '100%', height: '300px'}"></div> <button @click="chan
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4512
ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题
用v-show切换两张echarts图 第二张图大小显示不正确
DorisTK的博客
03-15 962
问题： 解决办法： 由于我的每个echarts是单个组件，所以在引用它的父组件中，向子组件传一个切换按钮的字段 // 父组件中--chartType是切换按钮的字段: chartType:total(总数)/tendency(趋势图) <div> <first-echarts :chart-type='chartType'/> <second-echarts :echart-type='chartType' /> </div> // 子组件中--
Vue中v-show/v-if切换后echarts宽高问题和不显示问题
Igiveufireworks的博客
09-01 3709
在项目中发现，tab切换页面使用v-show时，echarts图表的宽高变成100px，因此改为用v-if切换。但是v-if切换后echarts图表为空白，不显示。
echarts图表使用v-show控制图表显示，页面缩成一团问题
qq_39305942的博客
05-12 2095
问题描述 使用v-show控制 图表显示，页面缩成一团 问题出现的原因： 图表默认是隐藏状态，初始化图表的时候因为获取不到容器的实际高宽，绘制失败，需要重新获取容器的宽高再进行绘画。 解决方案 在切换方法中加入以下代码： this.$nextTick(function () { var myEvent = new Event('resize'); // 创建一个支持冒泡且不能被取消的resize事件 window.dispatchEvent(myEvent); // 事件可以在任何元素
如何解决echart背景颜色覆盖分割线问题
05-24
可以通过设置 ECharts 中的 `backgroundColor` 属性来解决这个问题。具体步骤如下： 1. 在 ECharts 的配置项中设置 `backgroundColor` 属性，例如： ``` option = { backgroundColor: '#f5f5f5', // 其他配置项 ... } ``` 2. 在需要显示分割线的组件（例如柱状图）中，设置 `splitLine` 属性，并设置 `lineStyle` 属性中的 `color` 和 `width`，例如： ``` option = { backgroundColor: '#f5f5f5', xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], splitLine: { lineStyle: { color: '#ccc', width: 1 } } }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [100, 200, 150, 300, 250], // 其他配置项 ... }] } ``` 这样就能够在 ECharts 图表中同时显示背景色和分割线了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值