使用element-ui中的el-tabs组件切换echarts图表时，图表不显示，html解构不出来canvas，也不报错

最新推荐文章于 2024-03-26 14:10:04 发布
最新推荐文章于 2024-03-26 14:10:04 发布
阅读量838 收藏
点赞数 1
文章标签： echarts html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44614177/article/details/118359532
版权

可以看到左边的echarts图表id名是ReBarLeft，可以打印出来canvas，但是在HTML里是看不到的！！！其实就是因为在其他的子组件中echarts使用了相同的id！！，换个id名字再渲染就好了

成功！

爱吃。。所有肉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts的简单入门
jdk_wangtaida的博客
09-05 784
前言： 如果我们开发的项目中涉及到大量的数据分析，干巴巴的数据展示肯定不是用户想看到的，怎么把数据更加形象生动的展示给用户，就变得十分重要了。那么就不得不说今天的主角ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRend...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 项目使用 ECharts 切换页面回来图表不显示
weixin_49809163的博客
04-11 6820
在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
08-30 1694
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题 解决办法： 给 tab 添加 v-if ，绑定 dialog 的 visible.sync <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> <el-tab-pane label="用
vue中切换tab时echart不显示或显示不正常
weixin_45654230的博客
02-21 1927
项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）
vue echarts 记录一个带tab切换的echarts页面 切换的时候如果有一个tab里的echarts没有数据 该如何清空echarts图的数据的问题
最新发布
qq_27806371的博客
03-26 270
const container = document.getElementById('echartsData'); // 获取容器元素 if (this.chartdom) { this.chartdom.dispose(); // 清空之前的实例（如果需要） } this.chartdom = echarts.init(container); // 初始化echarts实例
Echarts重新渲染canvas高度为0，浏览器调整大小才展示出来
u014513201的博客
07-01 4091
Echarts重新渲染canvas高度为0 楼主是根据后台有返回值，图表高度为300px，无返回值高度为0；遇到的问题是：当接口有返回值，Echarts的canvas高度为0，从而图表的数据展示不出来； 解决方法： 看了Echarts官网文档，resize这个方法里面有opts，可以设置高度，楼主就是创建Echarts实例（init）后，重新resize并且设置高度，从而解决了这个问题。 希望对小伙伴们有帮助～ ...
解决echarts获取数据不渲染的问题
Vivien_CC的博客
09-22 7450
本菜鸟第一次接到echarts的需求，就搞了整整一天，需求是这样的：①单线图表，只有一个系列。②多线图表，根据返回的数据系列生成不同的折现，形成一个堆叠折线图。③选单天的话，那么就以24小时为横坐标；如果是选择了一段时间，那么这个时间范围就以天为单位作为横坐标。于是乎，请求接口数据花了五分钟，调试问题七小时属于是，这个过程中，有异步的问题、监听外部切换时间范围的问题、刷新数据时要先初始化原来的数据的问题，数据对应的问题等等。好记性不如烂笔头，在此简单记录一下吧。
Echarts
FemaleHacker的博客
07-22 247
文章目录Echarts安装依赖创建图表在 main.js中引入在vue文件中 先创建 dom 区域在vue文件中 script 部分进行具体的编写另外一个例子： 实现饼图图表的种类可能出现的问题 Echarts echarts 可以对数据进行可视化显示，可以以图表的形式显示。 安装依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install ech
页面刷新，echarts重新渲染后canvas宽高为零或百分比失效，canvas=100
XinYiMiao__CSDN的博客
12-25 3397
这个问题我查过很多地方，也用了好几种大家说过的方法，比如重新加载reSize函数（重新设置宽高），用echarts自带的属性设置默认宽高（如果页面自适应，不可取），反正前前后后好几种都没解决问题，然后我就找到了这一篇博文： 指路：https://www.jianshu.com/p/4d0c4f43ddd1 简单明了，或者说之前也可能查到过，但是没有这么直接的， 总结一下：用this.$nextTick(()=>{…}等到dom加载完成的时候再渲染echarts 希望有这个问题的小伙伴迅速解决问题不再
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
Vue解决echart在element的tab切换时显示不正确问题
01-19
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面...
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
vuepress-plugin-element-ui:vuepress插件可基于markdown-it-container扩展elementui
05-06
Vuepress插件-基于markdown-it-...:::: el-tabs ::: el-tab-pane label=title __markdown content__ ::: ::: el-tab-pane label=javascript ``` javascript () => { console.log('Javascript code example') } ``` :
记录一下vue切换tab页面，Echarts图表不显示的问题
weixin_45426519的博客
01-04 3315
项目场景： 最近学习Vue遇到了一个坑，在点击tab标签切换页面时，echarts会在下一次切换不能显示出来，而且后台数据可以正常传到此页面中 问题描述： <!-- 这是我的标签 --> <el-main style="padding: 0px;"> <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab" @tab-click="clickTab"&
vue项目中遇到的打印，以及处理重新排版后不显示echarts图片问题。
spt_dream的博客
03-27 751
1. 项目中用到的打印 页面： css: 控制好宽度一般A4 我调试的是794px多了放不下，小了填不满。当时多页打印的时候，一定要控制好每一个页面内容显示的高度不要超过一个页面，当然根据自己项目来。 由于我的项目是每一个页面固定一个页尾部，所以当显示的时候正常排版显示。但是一旦点击了打印预览需要修改这个区域的css让他固定在每一个页面的底部。 js代码，点击打印后执行(如果...
vue 一个组件中一个或者多个动态echarts图表切换渲染问题
agua001的博客
04-20 4093
vue 一个组件中一个或者多个动态echarts图表切换渲染问题； echarts.js:2286 Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
在vue3环境下用echarts绘制图形在线上环境中路由切换后echarts图不出现以及tab切换时echarts图
qq_45641978的博客
07-29 2542
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
【Vue】el-tabs切换导致echarts图表样式错乱的解决方案
ironprosper的博客
11-28 717
在开发过程中遇到这样一个问题：把用echarts制作的可视化图表通过el-tabs选项卡来展示，但是切换选项卡后图表宽度异常。因为项目要求宽度自适应，所以无法通过固定宽度的方式解决该问题。属性，当切换到echarts组件所在的选项卡时，动态改变。的样式，这使得echarts无法获取宽度，导致出错。分析后发现，切换选项卡时，中不显示的tab页有一个。给echarts组件添加。
帮我用vue+element-ui封装个el-tabs 下分块包含 el-form的组件
03-24
好的，我可以帮你实现这个功能。您需要创建一个包含el-tabs和el-form组件的父组件，例如： ``` <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="分块1" name="1"> <el-form :model="form" label-width="80px"> <!-- 在这里添加表单内容 --> </el-form> </el-tab-pane> <el-tab-pane label="分块2" name="2"> <el-form :model="form" label-width="80px"> <!-- 在这里添加表单内容 --> </el-form> </el-tab-pane> </el-tabs> </template> ``` 您还需要在该组件的script部分创建如下变量和方法： ``` <script> export default { data () { return { activeName: '1', // 当前选中的tab form: { // 表单数据 // 在这里添加表单数据 } } }, methods: { handleClick (tab, event) { // 响应点击事件 console.log(tab, event) } } } </script> ``` 最后，您可以使用element-ui的组件绑定方式将该组件使用到您的页面中，例如： ``` <template> <div> <my-tabs></my-tabs> </div> </template> <script> import MyTabs from '@/components/MyTabs.vue' // 将组件引入 export default { components: { MyTabs } } </script> ``` 这样就可以通过vue element-ui封装一个el-tabs 下分块包含 el-form的组件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值