Vue+ElementUI/Plus切换路由后 Echart图表不显示问题解决

最新推荐文章于 2024-08-03 17:41:13 发布
最新推荐文章于 2024-08-03 17:41:13 发布
阅读量1.1k 收藏
点赞数 2
分类专栏： Vue 文章标签： elementui vue.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44216706/article/details/119958903
版权
博客讲述了作者遇到的一个问题：Echart图表在项目本地运行正常，但打包部署后，某些路由下的图表无法显示，需要刷新页面才能正常。经过排查，发现原因是使用自定义div标签而不是ElementUI提供的标签导致的。通过将div替换为ElementUI的标签，成功解决了图表不显示的问题。这是一个关于前端开发中Echart和ElementUI集成时可能遇到的问题及解决办法。
摘要由CSDN通过智能技术生成

问题

项目本地运行正常，打包部署后；切换路由Echart图表不显示，刷新页面才正常

刚开始很费解：刚开始以为是组件懒加载的问题
后来又网上搜了下，发现有着问题的还不少
但是提供的解决方法都是：

  • 用setTimeout 来延迟Echart的加载
  • this.$nextTick()函数
  • 判断路由然后重载实现刷新页面显示Echart的目的
  • …
    但这些不会适用于用ElementIU/Plus的

解决

因为发现有些Echart的图表是正常的
然后就找正常的和不显示的不同点；
原因： 正常的显示的使用的是Element的标签，而不正常的使用的是自己写的div标签；
找到原因就好解决了：将div换为Element提供的标签
一下提供修改前和修改后的
修改前：
在这里插入图片描述
修改后：
在这里插入图片描述

DeathAndLife
关注
专栏目录
【毕业设计】基于SpringBoot+Vue+ElementUI的人力资源管理系统源码
tyxjolin的专栏
03-28 1652
在如今这个人才需求量大的时代，各方企业为了永葆企业的活力与生机，在不断开 拓进取的同时，又广泛纳用人才，为企业的长久发展奠定了基础。于是，各个企业与部 门机构，都不可避免地会接触到人力资源管理的问题。Hrm 是一款人力资源管理系统，其主要功能模块有员工个人信息修改、请假、员工 的薪资管理、考勤管理、社保管理。其中考勤管理实现了员工考勤状态的修改与员工考 勤月报表的导出，以及通过员工考勤记录的导入来实现员工考勤状态的判断。社保管理， 主要实现了员工社保的计算以及明细的修改。
vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇
hzz1998的博客
12-01 2320
实现动态路由前提是服务端做好Router路由表的返回数据格式，一般分为两种情况(本人见识少，目前只遇到这两种)一是服务端返回客户端登录用户的权限ID数组，客户端通过权限ID修改对应路由的hidden属性选择是否展示，同时在router.beforeEach中判断好每次路由跳转的目标地址是否符合权限信息，防止通过地址栏输入方式跳转；二是前端配置好login，home等基础通用路由，再由服务端返回完整路由表，通过解析路由数据，动态添加至路由表中。至此，动态路由数据基本就可以成功添加在本地的路由表中了。
关于使用Element UI中Tabs组件切换时，切换项中Echarts图表无法正常显示出来的问题
log22_rain的博客
11-03 1403
无法正常显示/失效原因： tabs组件来回切换会有宽度失效的问题，导致echarts图表变形 解决方法： 在父组件使用tabs组件的地方，给切换项内的子组件加上v-if或者lazy就解决了 如图： 参考与：https://blog.csdn.net/qq_38606923/article/details/97815094 ...
Vue3.x + Echarts5.x 关于echarts 在本地运行正常 部署到线上环境 切换路由显示空白图
weixin_49826079的博客
04-17 847
vue3.0+echarts5.X部署到线上环境时 跳转路由页面echarts图显示空白问题
element-plus框架+vue3+echart——后台页面
最新发布
努力、拼搏、奋进
08-03 1429
element-plus框架+vue3+echart——后台页面
vue3 + vite打包后，切换页面echart图不加载显示
qq_37656005的博客
08-25 1450
vue3 + vite打包后，切换到另一个页面，再切换回来，echarts不触发更新， 是因为离开页面时实例并没有被销毁的，再次进入这个页面的时候，不会触发生命周期函数来更新数据。 可以在echarts那个页面的钩子函数中打个断点，看看能不能走到生命周期里面去。如果没有走进去，那么就证明当你离开这个页面时，没销毁echart实例，或者是你app.vue里面有keep-alive，有缓存导致的. 可以在离开页面时销毁echart import { onMounted, onBeforeUnmount} fr
echart 切换到其他路由后 全部路由页面消失问题解决
qq_56538005的博客
01-15 163
echart 切换到其他路由后 全部路由页面消失问题解决
element ui tab切换加载echarts不显示或显示不全问题解决：
weixin_43764828的博客
02-21 1735
今天在写echarts图表时发现的问题，因为图表是属于第四个页签，所以当切换到第四个页签时，图表都是空的，一直以为是自己图表的问题，或者组件引入有问题。 调试的时候发现，如果改变图表数据会触发图表刷新，图表这时候会显示出来。一直纠结在生命周期的问题上。。。 百转千回，发现是tabs 切换导致的问题。 <el-tabs v-model=“activeName” @tab-click=“hand...
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
在本项目中，"基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码"，开发者采用了一系列现代前端技术构建了一个功能丰富的流程图编辑工具。让我们详细了解一下这些关键技术及其在项目中的应用。 首先，Vue3是...
基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑.zip
01-03
在Vue3中，可以利用`vue-router`的`addRoute`和`removeRoute`方法来实现动态添加或删除路由，使得后台管理系统能够根据用户角色和权限显示不同的页面。 动态菜单则进一步增强了系统的灵活性，可以根据用户的权限...
vite+vue+element-plus完成一个admin管理后台
Linlietao0587的博客
04-22 1706
整体项目的 访问链接：https://bigmiss.top/demo/index.html。
element ui tab切换加载echarts不显示或显示不全问题解决
chuziyan的博客
12-28 1250
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> <el-tab-pane label="报表" name="first"> <myTable :columns="columns" :dataSource="dataSource" :hasIndex="false" :hasSelection="fals.
Vue2 Echarts刷新页面图形会消失
weixin_74285634的博客
07-05 1270
如果data是写死的数据，刷新页面是不会出现图形消失的问题；之所以图形消失，是因为数据来自后台服务器。 我个人在做项目的时候，这个Echarts表是单独封装了一个组件，后在vue页面引入。在vue页面的mounted生命周期dispatch对应的action，在组件内部借用mapState辅助函数获取vuex仓库state内存储的数据。
为什么echarts图表在页面刷新的时候就没有了
lovelyYou123的博客
10-31 539
控制台报错：ECharts] There is a chart instance already initialized on the dom.判断有没有，如果有，那就销毁，再重新渲染。
vue3 同时引入element-plus,echarts报错(已解决)
F_fengzilin的博客
07-16 1301
我的答案是引入顺序非常重要 1.element-plus与echarts之间会有渲染影响，经过对比，发现element在echarts引入之后引入，会覆盖，会影响echarts 正确的引入顺序 import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import * as echarts from 'echarts' const app = createApp(App).use(stor
Echarts在第二次路由跳转的时候不显示，但是刷新可以显示的问题
weixin_46448762的博客
08-25 894
Echarts在第二次路由跳转的时候不显示，但是刷新可以显示的问题。只需要在每次进入的时候清一下该标签标签绑定的echarts属性。
关于echarts在Element组件里无法显示的问题
BiYvGe的博客
04-13 2125
关于echarts报表在Element组件里无法显示的问题原本的代码修改过后最后 原本的代码 这个时候把echarts初始化放在了vue挂载之前 // An highlighted block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
vue3+ts+vite项目使用echarts打包后图表不显示
flhhly的博客
06-25 1162
echarts打包后图表不显示
【转载】Vue打包后Echarts图表不显示问题解决
非晓为骁的博客
02-21 3531
原文链接：https://blog.csdn.net/yyz_1987/article/details/119903964 工作中刚好碰到的问题，然后找到这篇文章，这篇文章是转载的。 最近发现一奇怪问题，正常本机测试情况下，echarts图表显示的没问题。但是只要打包后部署到nginx里，第一次首页加载没问题，但进入其他tab页面再返回首页时，echarts图表就是显示不出来了。监测控制台也没有任何的错误输出。 网上有很多的说辞和办法，但试过了都没有效果。最后经过不断的尝试摸索，终于解决啦。 有的说是生命
vue+elementui+springboot实现动态路由代码
02-26
实现动态路由需要在前端和后端两个方面进行处理，以下是使用Vue、ElementUI和Spring Boot实现动态路由的代码示例： 前端代码示例： 1. 在Vue中，可以使用Vue Router来处理路由。首先需要在main.js中引入Vue Router并创建router实例，然后在路由配置文件中定义路由。在路由配置文件中，可以使用动态路由参数（例如:id）来处理动态路由： ```javascript // main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import router from './router' Vue.use(VueRouter) new Vue({ router, render: h => h(App) }).$mount('#app') // router.js import VueRouter from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' import Dynamic from './views/Dynamic.vue' const router = new VueRouter({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/dynamic/:id', name: 'dynamic', component: Dynamic } ] }) export default router ``` 2. 在ElementUI中，可以使用Menu组件来实现动态路由。首先需要在App.vue中引入Menu组件，并在Menu组件中定义路由菜单。在路由菜单中，可以使用动态路由参数（例如:id）来处理动态路由： ```html <template> <div id="app"> <el-container> <el-aside> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item index="/"> <i class="el-icon-menu"></i> <span>Home</span> </el-menu-item> <el-menu-item index="/about"> <i class="el-icon-document"></i> <span>About</span> </el-menu-item> <el-menu-item v-for="item in dynamicRoutes" :key="item.path" :index="item.path"> <i class="el-icon-folder"></i> <span>{{ item.name }}</span> </el-menu-item> </el-menu> </el-aside> <el-main> <router-view></router-view> </el-main> </el-container> </div> </template> <script> import { Menu } from 'element-ui' export default { name: 'App', components: { 'el-menu': Menu }, data() { return { activeIndex: '/', dynamicRoutes: [] } }, created() { this.dynamicRoutes = [ { path: '/dynamic/1', name: 'Dynamic1' }, { path: '/dynamic/2', name: 'Dynamic2' } ] }, methods: { handleSelect(index) { this.activeIndex = index this.$router.push(index) } } } </script> ``` 后端代码示例： 1. 在Spring Boot中，可以使用@RestController注解来定义控制器，并在控制器中定义动态路由。在动态路由中，可以使用@PathVariable注解来处理动态
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DeathAndLife

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值