前端项目多次引用echarts组件只显示之后一次问题解决

解决Echarts图表渲染容器ID冲突问题
原创 已于 2022-07-19 17:10:43 修改 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

于 2022-07-19 17:06:18 首次发布
本文探讨了在React和Vue项目中，由于Echarts图表渲染容器ID写死导致的图表覆盖问题。通过在组件引用时传递不同的自定义ID，可以避免这个问题，确保每个图表实例都能正常显示。文中展示了正确的显示效果，并提供了解决方案。

前言： 这个解决方案不管是react项目还是vue项目都适用（我采用的是获取dom的id然后渲染效果的方式）

应该是你给echarts图表渲染的渲染容器id值写死了，所以DOM在构建的时候会销毁覆盖之前加载效果，然后只有最后一处引用会显示图表效果。

页面效果：
在这里插入图片描述
我的项目里，我是将折线图组件抽离，单独封装一个组件然后引用，这里我们可以通过在组件引用的时候向引用的子组件传递一个自定义的不同的id值
在这里插入图片描述
在这里插入图片描述
这时候正常的显示效果：
在这里插入图片描述

Vue页面多次渲染echarts封装的组件但只出现一个
mynameisjinxiaokai的博客
06-14 703
原因分析 首先我们要知道echart实例的创建方式 通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形 解决方案 上面已经得出了 因为id相同导致渲染不出来的 原因，所以经过验证有目前我想出了方案：1.切换为ref获取元素 dom只有一个id，所以会出现覆盖的情况。我们需要把id改为通过ref获取到组件 使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。...
vue封装的echarts组件多次被同一个页面重复调用且自适应(带源码)
m0_49714202的博客
03-03 3050
一.echarts组件封装调用父组件源码homeBase.vue子组件源码BasicLine.vue 1.单个组件封装调用，用下面这个 var myChart = echarts.init(document.getElementById("main_basicLine")); 2.多个组件封装调用，用下面这个 var myChart = echarts.init(this.$refs.echarts); this.$nextTick(() => { myChart.resiz
echarts封装多次调用只渲染出一个图表,以及只有最后一个图表自适应问题
yy_nf666的博客
04-13 1616
解决多次调用只渲染一个 不通过id获取容器,采用ref获取 myChart = echarts.init(this.$refs.main) 解决echarts多次调用只有最后一个自适应 window.addEventListener('resize', function () { myChart.resize() })
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 1051
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
m0_67841039的博客
03-25 1294
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
我只是个很菜的前端
05-17 1216
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
解决：vue项目中多个echarts图表只有最后一个随浏览器变化改变大小
weixin_30652271的博客
04-28 447
window.onresize = () => { this.initChart()}改为 window.addEventListener('resize', () => { this.initChart()}) 转载于:https://www.cnblogs.com/FengWenQi/p/10783990.html
解决vue一个页面中复用同一个echarts组件的问题
10-15
当在Vue模板中多次使用相同的ECharts组件时，每个组件都会尝试通过相同的id初始化ECharts实例，从而导致了图表无法正常显示的问题。 为了解决这个问题，我们可以为每个ECharts实例创建一个唯一的id。这可以通过在...
echarts uniapp组件
最新发布
05-19
ECharts uniapp组件是前端开发中一个非常实用的组件，它结合了 ECharts 强大的图表展示能力和 UniApp 的跨平台特性，为开发者提供了灵活的数据可视化解决方案，使开发者可以在移动端应用中轻松实现复杂且专业的数据...
vue3封装echarts组件---通俗易懂
weixin_48420104的博客
06-03 3453
如果在vue项目中有多个组件或者同个组件多出地方需要不同的图表，因此自己封装一个方便多次复用的Mycharts图表组件。使用： :style="{ transform: `scale(${scale})` }"这样你就成功封装好了一个echarts图表组件并成功使用啦！2.1 安装echarts。
Echarts:父组件中两次调用echarts子组件只渲染一个问题
weixin_38942919的博客
01-06 1663
当echarts图表定义在子组件中，父组件在同一个页面两次调用子组件渲染页面时，只有最后一个子组件被渲染，这是因为在子组件里面是document.getElementById()，而dom里面只有一个id，所以一个id把另一个id覆盖了导致其中一个子组件无法显示。 这时，在子组件中不用id，用ref。 <div class="chartBar" ref="bar"></div> 初始化echarts如下： const chart: any | null = this.$
包含Echarts的模块多处引用导致显示异常问题的解决方案
总柴的博客
05-28 2270
包含Echarts的模块多处引用导致显示异常问题的解决方案 业务场景： 一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次 但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示 两处Echarts图表数据传输没问题 问题原因： 多次引用在同一个大型项目中，会导致id为myChart的Echarts图表容器出现两次，每次执行 this.myChart = echarts.init(document.
解决同一个页面渲染两次同一个组件只显示一次的问题
m0_58340181的博客
09-11 401
bug场景：在项目同一个页面有两个打开甘特图的按钮，点击任意一个按钮都能正常渲染，点击其中一个按钮后点击另一个无法渲染。（呈空白状态没有数据）尝试网上绑定key的解决方法不生效。
uni-app页面有多个echarts图表只显示一个图表
约妲己吃火锅的博客
04-11 2240
上一篇文章简单介绍的renderjs-echarts-deom怎么使用。但是大家想要一个页面有多个图表就不行了，只显示一个，或者上面都没有，也不报错！ 现在来解决这个问题！ 思想： 1.vue的组件引入方式，引入图表 2.注意引入的组件id不可重名，不然一样没结果，只占位一个或者都不显示 我想到这里大家都明白我的意思了吧！ ...
Echart圖表，切換多個圖表時，後面幾個圖表不顯示
weixin_46848830的博客
07-25 231
EChart切換多個圖表遇到的問題
echarts 初次渲染先显示最后一项
agua001的博客
08-16 1051
1、按正常的做法，都是从左往右排（最左最新数据，对应右侧的顶部数据） 2、测试老大可能太闲，说不要这样的效果，他想初次进来显示最新的数据，而且是在x轴的左右边，看其他数据的需要往右滑动。 3、去官方文档看了看，有个倒排的属性：inverse，官方地址：https://echarts.apache.org/zh/option.html#xAxis.inverse xAxis: [{ type: 'category', boundaryGap: true, alignWithLabel: true,
echarts有数据却只渲染部分的原因：数据格式
weixin_44914810的博客
10-21 791
echarts明明拿到数据了，却只渲染部分
echarts.js文件引用顺序
kangyushuju的博客
10-14 462
echarts中js文件引用顺序： 如果需要展示地图图表，在引入js文件时，需先引入echarts.min.js，再引入echarts.wrold.js/echarts.china.js ## echarts.js文件引用顺序
vue组件在同一个页面复用Echarts，出现后面的图表覆盖前面的图表问题
团酱
10-10 2531
vue组件在同一个页面复用Echarts，出现后面的图表覆盖前面的图表问题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值