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

已于 2022-07-19 17:10:43 修改
阅读量1.4k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： react Vue echarts 文章标签： echarts 前端 javascript
于 2022-07-19 17:06:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CCQStudy/article/details/125875372
本文探讨了在React和Vue项目中，由于Echarts图表渲染容器ID写死导致的图表覆盖问题。通过在组件引用时传递不同的自定义ID，可以避免这个问题，确保每个图表实例都能正常显示。文中展示了正确的显示效果，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

vue封装的echarts组件多次被同一个页面重复调用且自适应(带源码)
m0_49714202的博客
03-03 3012
一.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
vue3封装echarts组件---通俗易懂
weixin_48420104的博客
06-03 3247
如果在vue项目中有多个组件或者同个组件多出地方需要不同的图表，因此自己封装一个方便多次复用的Mycharts图表组件。使用： :style="{ transform: `scale(${scale})` }"这样你就成功封装好了一个echarts图表组件并成功使用啦！2.1 安装echarts。
echarts封装多次调用只渲染出一个图表,以及只有最后一个图表自适应问题
yy_nf666的博客
04-13 1598
解决多次调用只渲染一个 不通过id获取容器,采用ref获取 myChart = echarts.init(this.$refs.main) 解决echarts多次调用只有最后一个自适应 window.addEventListener('resize', function () { myChart.resize() })
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 1009
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
m0_67841039的博客
03-25 1193
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
我只是个很菜的前端
05-17 1120
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
解决：vue项目中多个echarts图表只有最后一个随浏览器变化改变大小
weixin_30652271的博客
04-28 440
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组件
brrdg_sefg的博客
12-26 1202
ECharts，作为一款强大的图表库，提供了丰富的图表类型和高度定制化的选项，深受开发者喜爱。很多时候，封装封装组件，并不是一次性就能做到很完美的状态，而是在使用中， 不断去优化，取改进的。组件可以通过isEmpty，来设置echarts图表空状态，类型可以是Boolean，也可以是个函数，方便灵活调用，还可以设置description，空数据时的展示文字。细心的网友会发现，其中，变化最多的，是第四个步骤“图表的配置项和数据”。首先，封装一个组件，我需要考虑什么，从哪方面考虑，让我们看看ai的回答。
Echarts:父组件中两次调用echarts子组件只渲染一个问题
weixin_38942919的博客
01-06 1638
当echarts图表定义在子组件中，父组件在同一个页面两次调用子组件渲染页面时，只有最后一个子组件被渲染，这是因为在子组件里面是document.getElementById()，而dom里面只有一个id，所以一个id把另一个id覆盖了导致其中一个子组件无法显示。 这时，在子组件中不用id，用ref。 <div class="chartBar" ref="bar"></div> 初始化echarts如下： const chart: any | null = this.$
包含Echarts的模块多处引用导致显示异常问题的解决方案
总柴的博客
05-28 2143
包含Echarts的模块多处引用导致显示异常问题的解决方案 业务场景： 一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次 但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示 两处Echarts图表数据传输没问题 问题原因： 多次引用在同一个大型项目中，会导致id为myChart的Echarts图表容器出现两次，每次执行 this.myChart = echarts.init(document.
uni-app页面有多个echarts图表只显示一个图表
约妲己吃火锅的博客
04-11 2194
上一篇文章简单介绍的renderjs-echarts-deom怎么使用。但是大家想要一个页面有多个图表就不行了，只显示一个，或者上面都没有，也不报错！ 现在来解决这个问题！ 思想： 1.vue的组件引入方式，引入图表 2.注意引入的组件id不可重名，不然一样没结果，只占位一个或者都不显示 我想到这里大家都明白我的意思了吧！ ...
Echart圖表，切換多個圖表時，後面幾個圖表不顯示
weixin_46848830的博客
07-25 211
EChart切換多個圖表遇到的問題
echarts 初次渲染先显示最后一项
agua001的博客
08-16 1007
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 767
echarts明明拿到数据了，却只渲染部分
echarts.js文件引用顺序
kangyushuju的博客
10-14 439
echarts中js文件引用顺序： 如果需要展示地图图表，在引入js文件时，需先引入echarts.min.js，再引入echarts.wrold.js/echarts.china.js ## echarts.js文件引用顺序
vue组件在同一个页面复用Echarts，出现后面的图表覆盖前面的图表问题
团酱
10-10 2475
vue组件在同一个页面复用Echarts，出现后面的图表覆盖前面的图表问题
【微信小程序】使用echarts实现一个界面动态刷新多个柱状图
WCQ的博客
04-05 3635
最近在写微信小程序遇到了图表相关的问题，项目要求是要用柱状图，同时由于数据较多，需要将一组数据用多个图表表示，而且还要实现动态刷新数据。 关于echarts的下载和引入不多加介绍。 效果图 这里只取一部分数据做展示 JS部分 定义全局变量 import * as echarts from '../../utils/ec-canvas/echarts'; //引入echarts.js var da...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值