vue--echarts白屏或等一会才出现

已于 2022-06-09 15:05:04 修改
阅读量780 收藏 1
点赞数 1
分类专栏： vue echarts 文章标签： echarts vue.js javascript
于 2021-07-14 10:29:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43047070/article/details/118721845
版权
vue 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
echarts
2 篇文章 0 订阅
订阅专栏
原因

由于是异步加载数据，setOption的时候div的宽高还是0，导致canvas渲染宽高也是0。

解决方法：

加上默认的width和height

<div class="echarts-vue" style="width:500px; height:500px" ></div>
迷阵
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue使用echarts实时图表时卡顿
安的博客
05-24 9688
在我使用vue来放入echarts的实时曲线图时，会每次更新数据时，会非常卡顿，而相较于官网的示例来说，却很流畅。 先上代码。这是官网的实例https://www.echartsjs.com/examples/editor.html?c=dynamic-data2 <template> <div id="line1" style="width:100%;height...
Big-Screen-Vue-Datav-Echarts:政务大屏-前端(VUE+DataV+Echarts)
05-11
项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。 请拉取 master 分支的代码，其余是开发分支。 友情链接： ， 项目展示 二、主要文件介绍 文件 作用/功能 main.js 主目录文件，引入Echart/DataV等文件...
Vue 渲染多个Echarts图表
倚树探星的博客
04-29 7654
一、实现目标 需要在一个整屏切换的页面上显示多个Echarts图表，随屏幕切换显示不同的Echarts图表 二、实现方法 这个目标看起来并不难，实现方法也有多种，目前想到的方法有以下： 方法一、父子组件（动态加载） 实现思路：图表数据请求单独封装在一个组件中（作为子组件），并在该子组件中通过监听flag值（屏幕切换标志）变化来实现图表数据更新 注意问题：Echarts图表需要挂载在DOM节点上，要...
解决 Pyecharts 在 jupyter Lab 上运行图片空白问题！
最新发布
Python当打之年
06-23 737
解决 Pyecharts 在 jupyter Lab 上运行图片空白问题！
echarts连续多次刷新，出现白屏不渲染的解决方案
ChasenZh的博客
04-08 4864
将echarts的渲染方式改成myChart = echarts.init(document.getElementById("dom"),null,{renderer:'svg'})；默认是canvas方式，移动端svg方式好于canvas。假如更改之后，报如下错误： 请将：label下的show:true整行删除。如有疑问，私聊我。 label:{ show:true } ...
ucharts为啥要点一下才出现图表
Da6668_lei的博客
02-01 642
ucharts为啥要点一下才出现图表 很奇怪的是在其他手机上都没出现这个问题，但是在我的手机上就是要点一下才出现，朋友说可能是手机老的原因，后来加上animation: true，是因为加了动画会让图表重复渲染 ...
vue3的echarts图表弹框频繁点击出现白屏
weixin_43394840的博客
08-31 738
有没有遇到过这样一个问题：在本地打开弹框的图表时，能正常打开，发布到线上时，打开过一次，第二次打开就会出现白屏现象。
【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放
04-08
用了vue - echarts - datav-elementul大屏数据可视化方案，包含屏幕适配方案等比例缩放， 等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写...
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+...
在vue中使用vue-echarts-v3的实例代码
10-18
在Vue.js应用中集成ECharts图表库，通常我们会选择使用vue-echarts-v3这个封装库，它使得在Vue环境中使用ECharts变得更加便捷。本文将详细介绍如何在Vue项目中使用vue-echarts-v3，包括安装、配置、以及具体实例。 ...
Vue-ECharts 是 ECharts 的 Vue.js 组件-javascript
06-21
确保你使用的Vue-ECharts版本与你的Vue项目版本相匹配，避免出现不兼容的问题。 10. **社区与文档**：Vue-ECharts有一个活跃的开发者社区，你可以在GitHub上找到项目仓库，提交问题或参与讨论。同时，官方文档提供...
解决：Echarts打包后出现白屏
qq_48434912的博客
02-01 623
*原因：**这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。利用钩子函数在页面销毁之前将其销毁即可。以销毁实例释放资源，避免内存泄漏。：在容器节点被销毁时，总是应调用。
如何在vue的dialog弹窗中显示echarts图表，并且点击第一次就能显示，解决不会出现点击一次，不出现图表，第二次才出现图表的问题
qq_19280295的博客
01-26 5840
如何在vue的dialog弹窗中显示echarts图表，并且点击第一次就能显示，解决不会出现点击一次，不出现图表，第二次才出现图表的问题。 经过多次搜索并且在别人的启示下做出改动。 别人的帮助 实现的效果如下： 完整代码 <template> <div class="app-container"> <el-button type="text" @click="newDialogFormVisible = true">点击打开 Dialog</el-bu
echarts不显示，白屏,tooltip闪动后自动消失
qq_36359324的博客
10-10 1367
一般出现echarts白屏问题都是使用了<div id='lineBar'></div>这种形式。可以换成ReactEcharts,但是reactEchart的点击事件不如用div那种形式灵活，有时候还会echarts折线图乱码情况。div加id 可以用useEffect更好的控制某个变量改变时候才刷新图表。
使用多个 echarts 图表后，页面卡住、白屏？
qq_36291747的博客
07-29 8317
1. 问题表现 在项目的网站首页，绘制了 5 个 echarts 图表，每次进入页面，都会去后台获取最新的数据，用于绘制图表。 测试通过 --> 上线… 相安无事，peace and love????！ 直到有一天，有人连续点了若干次的刷新页面，发现，页面卡住了，除了关闭这个页面，已经不能进行其它的任何操作了。 开始想办法！ 2. 解决办法 打开任务管理器后，发现这个页面进程的 CPU 占用率最高的时候，竟然达到了30%多，这自然就会卡了。 通过浏览 echarts 官网，发现了一个解决办法： 1.
vue3路由二次跳转后echarts不显示需要重新刷新才能显示
canRun_的博客
07-17 1020
在页面销毁的时候也把图标实例给销毁掉 用dispose()方法。这样就不会在警告 和二次进入页面echarts不显示了.第一次进进入这个页面正常页面数据都显示。再次进入路由后 echarts不显示。通过翻译我们看出问题所在。
Echarts重新渲染canvas高度为0，浏览器调整大小才展示出来
u014513201的博客
07-01 4098
Echarts重新渲染canvas高度为0 楼主是根据后台有返回值，图表高度为300px，无返回值高度为0；遇到的问题是：当接口有返回值，Echarts的canvas高度为0，从而图表的数据展示不出来； 解决方法： 看了Echarts官网文档，resize这个方法里面有opts，可以设置高度，楼主就是创建Echarts实例（init）后，重新resize并且设置高度，从而解决了这个问题。 希望对小伙伴们有帮助～ ...
Vue ECharts 二次渲染/重新渲染宽高为0，图表不显示，改变浏览器窗口大小即可显示图表的问题
m0_48968874的博客
07-24 1814
Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。前言：这篇博客是基于父组件传值（option）给子组件即echart页面为基础的渲染图标的。话不多说，直接看代码。一个基于 JavaScript 的开源可视化图表库。
react-native-echarts 解决数据刷新闪烁，不能动态连续绘制问题(转载)
p15097962069的博客
08-13 1036
react-native-echarts 解决数据刷新闪烁，不能动态连续绘制问题(转载)
vue-datav-echarts-elementul
08-02
vue-datav-echarts-elementui是一个基于Vue.js和ElementUI的数据可视化组件库。它结合了Vue框架、ElementUI组件和ECharts图表库，为开发者提供了一套方便快捷的数据可视化解决方案。 首先，通过vue-datav-echarts-elementui，我们可以方便地在Vue.js项目中使用ElementUI组件。ElementUI是一个非常流行的Vue组件库，提供了许多易于使用和美观的UI组件，如按钮、表格、表单等。通过集成ElementUI，我们可以快速构建出具有一致风格的数据可视化界面。 其次，vue-datav-echarts-elementui还集成了ECharts图表库。ECharts是一款功能强大、灵活且易于使用的数据可视化库，支持多种常见的图表类型，如折线图、柱状图、饼图等。通过将ECharts与Vue.js集成，我们可以轻松生成复杂的数据可视化图表，并自定义其外观和交互行为。 除了集成Vue框架、ElementUI和ECharts图表库，vue-datav-echarts-elementui还提供了许多便捷的功能和工具，帮助开发者更高效地进行数据可视化开发。它提供了丰富的配置选项和API接口，使得定制化开发变得简单易懂。此外，它还支持响应式设计，使得图表在不同屏幕尺寸下自适应调整。 总之，vue-datav-echarts-elementui是一个功能强大、易于使用的数据可视化组件库，通过集成Vue.js、ElementUI和ECharts，为开发者提供了一套全面的数据可视化解决方案。无论是简单的数据展示，还是复杂的数据分析，都可以借助这个组件库轻松实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值