nuxt3框架使用echarts切换菜单时候出现挤压问题

已于 2022-09-22 20:53:47 修改
阅读量134 收藏
点赞数
分类专栏： 笔记 文章标签： 前端
于 2022-09-22 20:53:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51357044/article/details/126999525
版权

切换菜单回来后发现这样
在这里插入图片描述
F5刷新后
在这里插入图片描述
我在想这尼玛不是个奇葩？？nuxt3这个新框架真的是给狗都不用，要不是它出厂自带服务器渲染，TMD
在这里插入图片描述
于是我各种寻找问题，然后我想了一下，如果我延迟300在加载呢？
在这里插入图片描述
在这里插入图片描述
果然不出我所料，好了！如果我没猜错nuxt是先加载了这些画布比CSS先加载好，以后遇到这种问题就延迟加载就可以了，最后吐槽一下这框架真尼ma狗血

橙子cms
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
nuxt3中使用echarts，报错：xxx “type“: “module“
qq_41702748的博客
08-16 860
nuxt3中使用echarts，报错：xxx "type": "module"
echarts：nuxt项目使用echarts
snowball的博客
12-04 2119
一、项目环境nuxt 2.X + vue2.X + vuex + webpack二、安装三、使用3.1、plugins目录下创建echarts.js 3.2、nuxt.config.js中plugins引入echarts.js 3.3、创建图表容器 3.4、 定义option参考第五项，option写在data里边即可3.5、initChat 3.6、经过测试图表展示成功四、过程记录 五、echarts图表集-调试 六、欢迎交流指正，关注我，一起学习 参考链接：vue项目报错：
Nuxt3使用echart，使用中国地图
qq_31150171的博客
12-07 1768
目录第一步安装echart第二步配置plugins 第三步使用 例如使用饼状图 例如使用中国地图 第二步配置plugins 在plugins创建echarts.ts文件并写入下面内容 例如使用中国地图 我使用的版本 "echarts": "^5.4.0"china.json文件是去DataV.GeoAtlas地理小工具系列 (aliyun.com)下载的 我这里只是简单的使用，复杂场景需要更多配置像可参考echart官网Documenta
在nuxt3.js项目中引入echarts5版本和echarts-wordcloud报错
misstianyun的博客
12-07 270
最后我在想，要不要看看node安装包里的echarts-wordcloud包里的README.md，看看里面是怎么写的，说不定有答案。今天在nuxt3.js项目中引入echarts5版本和echarts-wordcloud报错，被折磨的要疯掉，必须记录一下~~~~(>_<)~~~~网上查了很多解决方案，按照指示一步一步的排查，echarts-wordcloud版本删了装，装了又删，还是还是不行…// await import('echarts-wordcloud');// // 初始化你的图表...
关于我在nuxt3引入echarts挂钩执行过程中未处理的错误
weixin_51357044的博客
09-22 295
于是我各种百度，各种百度都是不行不行不行，于是我就用了个本办法，把options放在Echarts_Init（）函数里面看看啦。明明就是很有效的既然说我的无效，在VueCli+vue3中就是这么引入都可以了。然后就成功了-这TM太狗血了。我就很奇怪说我初始化无效？亲生经历，测试有效~
手把手教您使用Nuxt3框架(Nuxt3中文开发教程)-基于Nuxt3.0.0稳定版验证文档
11-25
**Nuxt3 框架详解** Nuxt3 是一个基于 Vue3 和 Vite 的全新重写的框架，它集成了 Nitro，提供了优秀的 TypeScript 支持。Nuxt3 在经历了长达7个月的14个候选发布版本（RC）后，于2022年11月16日至17日的Nuxt全球...
Nuxt3组件的使用与布局模板的学习源码
03-26
在Nuxt3框架中，组件是构建Web应用的基础单元，它们允许我们复用代码，提高开发效率，并且保持代码的整洁。Nuxt3引入了许多新特性，使得组件化开发更加高效和灵活。在这个源码中，我们将深入学习如何在Nuxt3中使用...
解决Nuxt使用axios跨域问题
10-15
在现代Web开发中，Nuxt.js作为Vue.js的服务器端渲染框架，为构建高性能的单页应用提供了便利。然而，在开发过程中，由于浏览器的安全策略，不同源之间的请求会受到同源策略的限制，从而引发跨域问题。本篇文章将详细...
手把手教您使用Nuxt3框架+Nuxt3中文开发教程+基于Vue3的混合渲染框架Nuxt3,教程35个功能配套示例源代码完整包
11-25
示例代码适合Nuxt3初学者学习和实践，资深者快速参考，爱好者持续跟踪新功能和最佳实践。包括：约定引用组件,动态引用组件,自定义布局,模块化代码,页面路径,动态路由,通配路由,嵌套路由,自定义路由,全局路由中间件...
Vue3+TS中引入ECharts（按需引入，简单教程）
宝子的博客
06-15 8166
Vue3+TS的项目中使用ECharts。很简单的操作一看就会。
创建nuxt3+vue3+js项目
最新发布
qq_52850749的博客
04-19 293
安装nuxt elementplus 模块。在app.vue加入代码引入icon。安装elementPlus和图标库。nuxt.config.ts写入。
尝试搭建 Vue3+nuxt3+typescript+vuex+i18n+axios+element plus+...(二)
windbellxy的博客
04-18 1692
1、准备好nuxt项目 ， 运行，保证不报错， yarn install yarn dev 2、因为想要使用vue普通目录src， 或者src子文件夹， 修改配置 nuxt.config.ts 增加srcDir配置 顺便加了meta 配置目录，修改系统名字 和默认404跳转页面 srcDir: "src/main/webapp", css: [ "element-plus/dist/index.css", "normalize.css", "@/...
【vue3动态的切换earchs图表的数据】
weixin_51341210的博客
06-21 1310
1、首先进行下载模块 我这里通过yarn add echarts，当然也可以使用npm i echarts 2、然后在main里进行引入全局的 3、组件内进行使用earchs创建实例 注意：这里在虽然给绑定的数据进行创建变量便于切换，但是实例已经创建，所以需要进行销毁，否则会报下面这个错误 4、接下来就是代码html javascript css...
NUXT 中使用 Echarts
张兴华的博客
08-26 3907
一、安装echarts依赖包 npm install echarts --save 二、在plugins目录下创建echarts.js文件并在里面引入echarts依赖包 import Vue from 'vue' import echarts from 'echarts' // 引入echarts Vue.prototype.$echarts = echarts // 引入组件（将echart...
Vue3中使用Echarts（Vue3+Ts）
qq_41634323的博客
06-01 2145
Vue3中使用Echarts（Vue3+Ts）
在nuxt项目中，用echarts(百度图表)柱状图来实现疫情统计
qq_51098044的博客
12-29 1334
四步走四步走，要是直接跳到最后的话，记得有些依赖和环境配置一下哦。 1.首先在项目中安装echarts 1.安装echarts依赖包 npm install echarts --save 2.在plugins目录下创建echarts.js文件并在里面引入echarts依赖包 import Vue from 'vue' import echarts from 'echarts'//这个需要注意一下有可能会报错，可以用下面方法 Vue.prototype.$echarts = echarts 用以上通用的方
1-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》文档和配套示例代码同期呈现
DVTOP的博客
11-20 2041
《手把手教您使用Nuxt3框架(Nuxt3中文参考手册)》适合Nuxt3初学者学习和实践，资深者快速参考，爱好者持续跟踪新功能和最佳实践。
Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）
热门推荐
m0_48489737的博客
10-14 2万+
本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置（可选），scss的安装（可选），目录结构的创建和解释。项目搭建前，可以先了解一下 Nuxt3：《5分钟全面认识上手Nuxt3》
nuxt.js引入echarts-gl
03-29
3. 在组件中使用echarts-gl 在需要使用echarts-gl的组件中，引入echarts和echarts-gl： ``` import echarts from 'echarts' import 'echarts-gl' export default { data() { return { chartData: {} } }, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

橙子cms

node+express扫码获

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

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

打赏作者

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

抵扣说明：

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

余额充值