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

已于 2022-07-19 17:10:43 修改
阅读量1.4k 收藏 1
点赞数 1
分类专栏： react Vue echarts 文章标签： echarts 前端 javascript
于 2022-07-19 17:06:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CCQStudy/article/details/125875372
版权
react 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
Vue
7 篇文章 0 订阅
订阅专栏
echarts
5 篇文章 0 订阅
订阅专栏

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

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

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

你的玄烨
关注
专栏目录
vue封装的echarts组件多次被同一个页面重复调用且自适应(带源码)
m0_49714202的博客
03-03 2887
一.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组件
九仞山的专栏
06-30 1227
介绍了Vue3中封装Echarts组件的方法
echarts 被封装后多次复用，图表被覆盖，解决方法
qq_58340302的博客
05-27 963
多个父级页面使用这个盒子后，发现只有第一个盒子展示图表，但展示的是最后一个图片的样式，其他都空白。为了方便样式统一，封装了一个盒子，其中包含echarts，option是从父组件传来的。将原本id或class选择器改为ref方式，代码如下。
Echarts:父组件中两次调用echarts子组件只渲染一个问题
weixin_38942919的博客
01-06 1559
当echarts图表定义在子组件中，父组件在同一个页面两次调用子组件渲染页面时，只有最后一个子组件被渲染，这是因为在子组件里面是document.getElementById()，而dom里面只有一个id，所以一个id把另一个id覆盖了导致其中一个子组件无法显示。 这时，在子组件中不用id，用ref。 <div class="chartBar" ref="bar"></div> 初始化echarts如下： const chart: any | null = this.$
echarts封装多次调用只渲染出一个图表,以及只有最后一个图表自适应问题
yy_nf666的博客
04-13 1528
解决多次调用只渲染一个 不通过id获取容器,采用ref获取 myChart = echarts.init(this.$refs.main) 解决echarts多次调用只有最后一个自适应 window.addEventListener('resize', function () { myChart.resize() })
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 904
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
m0_67841039的博客
03-25 994
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
解决：vue项目中多个echarts图表只有最后一个随浏览器变化改变大小
weixin_30652271的博客
04-28 399
window.onresize = () => { this.initChart()}改为 window.addEventListener('resize', () => { this.initChart()}) 转载于:https://www.cnblogs.com/FengWenQi/p/10783990.html
包含Echarts的模块多处引用导致显示异常问题的解决方案
总柴的博客
05-28 1895
包含Echarts的模块多处引用导致显示异常问题的解决方案 业务场景： 一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次 但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示 两处Echarts图表数据传输没问题 问题原因： 多次引用在同一个大型项目中，会导致id为myChart的Echarts图表容器出现两次，每次执行 this.myChart = echarts.init(document.
解决vue一个页面中复用同一个echarts组件的问题
10-15
当在Vue模板中多次使用相同的ECharts组件时，每个组件都会尝试通过相同的id初始化ECharts实例，从而导致了图表无法正常显示的问题。 为了解决这个问题，我们可以为每个ECharts实例创建一个唯一的id。这可以通过在...
记一次react前端项目打包优化的方法
10-15
在本文中，我们将深入探讨如何优化一个React前端项目，特别是针对打包过程中的性能问题。首先，我们遇到的问题是在uat环境中，由于bundle.js文件过大（3.6MB），导致页面加载时白屏时间超过30秒，严重影响用户体验。...
【ECharts系列】ECharts 图表渲染问题&解决方案
热门推荐
西门吹雪
07-07 1万+
echats 渲染，第一次的时候只出现Y轴数值，不出现X轴数值，切换下页面，X轴数值就能出现。
uni-app页面有多个echarts图表只显示一个图表
约妲己吃火锅的博客
04-11 2077
上一篇文章简单介绍的renderjs-echarts-deom怎么使用。但是大家想要一个页面有多个图表就不行了，只显示一个，或者上面都没有，也不报错！ 现在来解决这个问题！ 思想： 1.vue的组件引入方式，引入图表 2.注意引入的组件id不可重名，不然一样没结果，只占位一个或者都不显示 我想到这里大家都明白我的意思了吧！ ...
Echart圖表，切換多個圖表時，後面幾個圖表不顯示
weixin_46848830的博客
07-25 175
EChart切換多個圖表遇到的問題
echarts 初次渲染先显示最后一项
agua001的博客
08-16 899
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 703
echarts明明拿到数据了，却只渲染部分
echarts.js文件引用顺序
kangyushuju的博客
10-14 382
echarts中js文件引用顺序： 如果需要展示地图图表，在引入js文件时，需先引入echarts.min.js，再引入echarts.wrold.js/echarts.china.js ## echarts.js文件引用顺序
vue组件在同一个页面复用Echarts，出现后面的图表覆盖前面的图表问题
团酱
10-10 2374
vue组件在同一个页面复用Echarts，出现后面的图表覆盖前面的图表问题
【微信小程序】使用echarts实现一个界面动态刷新多个柱状图
WCQ的博客
04-05 3530
最近在写微信小程序遇到了图表相关的问题，项目要求是要用柱状图，同时由于数据较多，需要将一组数据用多个图表表示，而且还要实现动态刷新数据。 关于echarts的下载和引入不多加介绍。 效果图 这里只取一部分数据做展示 JS部分 定义全局变量 import * as echarts from '../../utils/ec-canvas/echarts'; //引入echarts.js var da...
连续加载多个封装echarts好的图标组件只有最后一个组件的图标根据屏幕尺寸自适应
最新发布
10-12
当你在前端使用ECharts这个强大的数据可视化库时，连续加载多个封装后的ECharts图表组件，并且希望每个组件都能根据屏幕尺寸自适应显示，可能会遇到一个问题：由于ECharts本身的设计，在动态创建和初始化图表时，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值