echarts 二次渲染不显示

豌豆先森

已于 2023-03-22 15:32:31 修改

阅读量858

点赞数 3

文章标签： ECharts 二次渲染重置图表显示初始化

于 2021-07-19 11:07:56 首次发布

本文链接：https://blog.csdn.net/yanzhongxiao/article/details/118891396

版权

document.getElementById('main').removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance_

//重新初始化
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option,true);

原文来源：echarts 二次渲染不显示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

豌豆先森

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【ECharts系列】ECharts 图表渲染问题&解决方案

西门吹雪

07-07

1万+

echats 渲染，第一次的时候只出现Y轴数值，不出现X轴数值，切换下页面，X轴数值就能出现。

关于小程序接入echarts二次渲染的问题

qq_37018640的博客

02-13

1269

#关于小程序接入echarts二次渲染的问题 echarts接小程序官方接受文档 //小程序接echarts function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setC...

1 条评论您还未登录，请先登录后发表或查看评论

解决echarts数据二次渲染不成功的问题

10-15

主要介绍了解决echarts数据二次渲染不成功的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决echarts第二次不渲染问题

甜心的专栏

08-01

1857

echarts第一次能渲染，但点击其他页面在点击回来就不渲染了。查看dom属性发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。

vue中切换tab时echart不显示或显示不正常

weixin_45654230的博客

02-21

2379

项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）

echart二次渲染option不成功，第一次与第二次数据混乱问题

daniella05的博客

03-31

1118

echarts 二次不渲染

08-09

在使用 Echarts 进行图表绘制时，有时会遇到二次不渲染的问题。二次不渲染是指在页面加载完成后，对某个指定的区域进行图表渲染时，图表不能正常显示，而是空白或显示异常。这个问题可能由多种原因导致。首先，...

echarts第一次正常渲染，第二次不能渲染（二次不渲染）

huai42717的博客

11-13

1989

在使用vue模板中需要echarts图表就重新写了一个，发现第一次能渲染，但点击其他页面在点击回来就不渲染了。图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。echarts每次绘制都需要创建一个Echarts的实例，返回echartsInstance。echarts的渲染是从setOption中开始的，不是从echarts.init()开始。

错题笔记: echart-渲染过程

qq_43455862的博客

06-01

1000

echart

解决定时刷新页面echarts只更新数据，不重新绘制的问题

最新发布

weixin_45713650的博客

02-24

1351

使用getInstanceByDom方法，去判断图表的dom是否有实例，如果有的话，就代表已经绘制过了，不需要重新init了，直接重新更新setOption就好了，如果没有实例，那证明是第一次绘制，需要init，这样在更新页面的过程中，就不会有重新绘制的效果了。解决了每次更新页面重新绘制的问题，突然发现，怎么切换页面再切换回来，图表又没了啊，又出现了上次的问题（有点崩溃...）继上篇博客，实现了每次页面切换回来，图表消失的问题，解决办法是，页面重新加载时，清除盒子的。很好，和第一个问题冲突了...

echarts地图二次渲染不显示问题

LL22222222的博客

06-25

567

echarts二次渲染不正常

Vue 项目使用 ECharts 切换页面回来图表不显示

weixin_49809163的博客

04-11

7150

在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了

路由切换再回来Echart图表消失问题

右见小栈

12-07

5505

问题描述使用echarts图表时，首次可以加载出来，但是切换到其他的路由之后再切换回来 echarts图表就不显示了，刷新之后又可以显示出来。原因分析首先我们要知道 echarts的渲染逻辑，如果未实例化的盒子则进行实例化,在此期间会在div容器生成一个 _echarts_instance_ 属性，该属性值就是当前echarts的ID,然后进入后边的渲染操作流程当经过切换路由在回来时， echarts的ID就回到初始状态，所以和原先的指定id 的 div 的_

vue3使用echarts切换路由页面空白及resize报错

Liyan_Yanna的博客

07-29

1889

vue3中使用echarts遇到的两个问题。1、切换路由后再切回来，图标显示空白。2、resize报错。

echarts

小小程序猿洋的博客

03-13

153

不清空的话会导致echarts 认为容器没有变化。重新回到页面以后需要执行这个否则不会重新渲染。echarts的一个很容易遇到的坑。

vue3中如何解决echarts 二次渲染时不显示的问题

weixin_55721538的博客

11-24

1197

vue3 解决echarts 二次渲染不显示问题

ECharts的使用

寻道书生的博客

05-10

282

背景最近公司有做数据面板的需求，需要后台前端用的是Vue+Element，选用强大的是Apache ECharts。 Apache ECharts 官网官网 https://echarts.apache.org/zh/index.html 导入依赖 TypeScript 版本 npm install echarts --save npm install @types/echarts JavaScript版本 npm install echarts --save 页面代码单折现 <tem.