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

已于 2022-07-19 17:10:43 修改
阅读量1.2k 收藏 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值
在这里插入图片描述
在这里插入图片描述
这时候正常的显示效果：
在这里插入图片描述

你的玄烨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上的点联动两个饼图数据 2、处理ECharts饼图数据为0或者是空时饼图消失问题 2、 在对ECharts图表进行init // 饼图初始option const initPieOption = { // tooltip: { // show: false, // }, dataset: { dimensions: ['de
echarts折线图默认显示最后一个点的数据
热门推荐
jinglianglove的博客
04-03 1万+
echarts折线图默认显示最后一个点的数据 想要达到这种效果图如下： 如果你给折线图设置数据显示，那么要不就全部隐藏，要不就全部显示在折线上。实现指定点的显示就需要你自己去处理这个数据了。 方式有两种： 方法1：利用formatter函数(推荐) 在echarts的series里面的formatter ,可以给每一根你要渲染的折线加上这个函数，打印事件源参数你就可以发现每一项数据和折线的关系：...
echarts 关闭boundarygap最后一个数据不显示_数据可视化详解
weixin_32122595的博客
12-26 796
1.数据可视化相关的库D3 是一个JavaScript数据可视化库用于HTML和SVG。它旨在将数据带入生活，强调Web标准，将强大的可视化技术与数据驱动的文档对象模型(DOM)操作方法相结合。 D3是Github上最流行的数据可视化项目，在数据科学界有很好的表现。点击去往官方网址。ECharts提供了常规的折线图、柱状图等；用于地理数据可视化的图；用于关系数据可视化的图表；还有用于 BI 的漏斗...
echarts折线图只显示最后一个点（可根据自己所需展示点的个数及形状）
yy18194342771_zybzyb的博客
12-09 3514
1.创建一个具有宽高的盒子 2.获取到数据中的最后一个数据的索引index 3.option let myChart2 = this.$echarts.getInstanceByDom( document.getElementById("jhqBottom") ); if (myChart2 == null) { // 如果不存在，就进行初始化 myChart2 = this.$echa
echarts堆叠面积图只展示最后一个节点 / 修改legend样式
anny_mei的博客
08-03 705
echarts
echarts通过ajax动态加载数据x轴显示不全问题
Dev_Hugh的博客
06-19 753
X轴数据显示不全问题 原本应该显示的x轴数据 实际上图表中展示的x轴数据 原因 是图表初始化的宽度的问题 解决方法 1、将容器初始化的宽度拓宽 这里宽度设置为1400px，成功显示了所有数据 <div id="linetable" style="width:1400px;height:400px;"> </div> 2、增加x轴的滚动条 具体可以参考echarts官网文档关于dataZoom的教程 ：dataZoom 如果对容器宽度有限制的话，可以使用滚动条的形式，只需
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
m0_67841039的博客
03-25 730
echarts折线图只显示最后一个数据且去掉折点数据标志的圆圈点
包含Echarts的模块多处引用导致显示异常问题的解决方案
总柴的博客
05-28 1721
包含Echarts的模块多处引用导致显示异常问题的解决方案 业务场景： 一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次 但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示 两处Echarts图表数据传输没问题 问题原因： 多次引用在同一个大型项目中，会导致id为myChart的Echarts图表容器出现两次，每次执行 this.myChart = echarts.init(document.
echarts封装多次调用只渲染出一个图表,以及只有最后一个图表自适应问题
yy_nf666的博客
04-13 1431
解决多次调用只渲染一个 不通过id获取容器,采用ref获取 myChart = echarts.init(this.$refs.main) 解决echarts多次调用只有最后一个自适应 window.addEventListener('resize', function () { myChart.resize() })
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 758
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
做前端项目时遇到的一些问题和自己的解决方式
07-27
自己的端问题及解决方式
记一次react前端项目打包优化的方法
11-20
之前一年多前接手的一个react项目，前段时间因为做业务中台项目，对公司现有的应用项目做中台化改造，这期间将项目部署到uat环境，测试期间，测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久，白屏时间超过...
vue组件如何被其他项目引用
08-30
主要为大家详细介绍了vue组件如何被其他项目引用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端啃算法，一次性解决前端工程师的算法学习问题.zip
最新发布
02-28
前端啃算法，一次性解决前端工程师的算法学习问题.zip
前端项目-echarts.zip
09-03
前端项目-echarts,echarts是一个使用javascript实现的开源可视库，可以在PC和移动设备上运行，兼容当前绝大部分浏览器（ie8/9/10/11，chrome，firefox，safari等），底层依靠轻量化的海量图形库zrender，提供直观，...
React项目如何实现登录密码MD5加密
kilig
04-04 5997
第一步： 我们全局安装MD5依赖 npm install --save js-md5 第二步： 在相应的组件部分引入使用，本案例世界在登录组件页面引入使用 // 密码MD5加密 import md5 from 'js-md5'; React.Component.prototype.$md5 = md5; 本案例在登录验证部分输出的密码数据，这里并没有结合后台，只是单纯的演示MD5加密后的密码数据效果 const onFinish = (values: any) => { const
修改ant design的tooltip组件中的字体颜色（2分钟解决战斗）
kilig
08-21 4571
理解： 通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。说的通俗一点，就是私有数据在组件之间实现传递共享。 示例：将class定义的组件的的私有状态通过props传递到function定义的组件中，做一个条件渲染。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont
AntDesign自定义Drawer抽屉组件内容样式不生效问题
kilig
04-20 4144
1.先看一下效果： 抽屉里自定义内容样式正常生效效果 2.场景阐述： 使用antd + less书写自定义抽屉组件中的内容，如下图代码所示。less样式文件中的样式使用包含结构，结果发现样式不生效。 3.问题排查： 当我开始用浏览器开发工具定位页面内容元素时，发现抽屉内容是一个独立的DOM，因此我们只需要将抽屉里自定义内容的样式定义部分放在和页面父容器平级即可。 4.问题解决 ...
react中报错Failed to set an indexed property on ‘CSSStyleDeclaration‘: Index property setter is not sup
kilig
10-26 4057
其实这不算是一个问题，是你的一个小疏忽！ 当我们在react中使用less文件书写CSS样式的时候，组件中我们声明页面元素的类名应该写成： <Row className={style.mainContainer}></Row> 注： 这个style是我们引入的less文件的别名 import style from './style.less'; 而出现上面的报错是因为你疏忽在行内样式声明里写了元素的类名，如下： <Row style={s
前端一次性加载太多chart图如何优化
07-20
对于前端一次性加载太多的chart图，可以考虑以下优化方案： 1. 数据分页加载：将图表数据进行分页，每次只加载当前页面需要展示的图表数据。可以通过懒加载或者滚动加载的方式，在用户滚动到图表所在位置时再进行加载。 2. 延迟加载：将部分图表的加载延迟到用户真正需要查看时再进行加载。可以通过监听用户的操作或者滚动行为，在用户需要查看某个图表时才进行加载。 3. 图表数据压缩：对于图表的数据进行压缩处理，减小数据量，从而减少前端加载时间和带宽消耗。可以使用一些数据压缩算法或者使用更简洁的数据表示方式。 4. 图表渲染优化：对于大量图表的渲染，可以使用一些性能较好的图表库或者框架，如echarts、D3.js等。同时，可以对图表进行缓存，避免重复渲染。 5. 图表异步加载：对于页面上的多个图表，可以使用异步加载的方式，避免一个图表的加载阻塞其他图表的展示。 6. 图表数据缓存：对于一些静态数据或者不经常变动的数据，可以进行缓存，避免每次都重新请求数据。可以使用localStorage或者sessionStorage进行数据缓存。 7. 图表懒加载：只加载当前可见区域内的图表，当用户滚动到其他区域时再进行加载。 综合使用以上优化方案，可以有效减少前端一次性加载太多chart图所带来的性能问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值