原生js 中 多处使用同一echarts ，造成页面混乱

最新推荐文章于 2024-05-20 16:13:36 发布
最新推荐文章于 2024-05-20 16:13:36 发布
阅读量565 收藏
点赞数
分类专栏： echarts 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44603011/article/details/125742861
版权

在项目中，有很多树形图，点击树形图节点，要弹出另一个echarts图表。

因为使用的是同一个图表，仅仅点击接口后，数据不一样。

但是这样会造成在图表渲染的时候，数据混乱。

解决的方法是：

 

逆风优雅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts重复加载解决办法
03-01
解决用百度echarts日历添加点击或双击事件后，会出现重复加载情况。
关于vue 结合原生js 解决echarts resize问题
10-15
在Vue项目中，ECharts图表的resize问题常常发生在页面布局发生变化时，比如侧边栏的收缩或展开。ECharts本身提供了resize方法来调整图表大小，但有时需要配合其他手段才能达到理想的效果。本文将详细介绍如何利用Vue...
React Native一个页面使用多个Echarts图表出现错误
XKFC1的博客
05-25 190
React Native使用Echarts图表本质是通过webview展示的。 react-native-echarts-pro官网 安装 npm install react-native-echarts-pro --save 或者 yarn add react-native-echarts-pro 环境要求 react-native 版本大于或等于 0.59. react-native-webview 版本大于或等于 6.9.0. 使用案例 import React from "react"; impo
Echarts 多个图表共用一个tooltip和X轴
最新发布
weixin_42044241的博客
05-20 204
【代码】Echarts 多个图表共用一个tooltip和X轴。
vue封装的echarts组件多次被同一个页面调用出现的问题
eliodadada的博客
07-26 486
问题： 今天第一次使用echarts时，将它封成了一个组件，然后在同一个页面多次引入时，会出现数据覆盖等一系列问题，导致最后只有一个能够成功渲染出来。 解决： 查阅资料后发现，只要把id选择器改为ref就行了。 改前： 改后： 然后把原来的id选择器 id = "echartss" 改为ref = "echartss"就行了； ...
echarts在同一个dom下动态渲染值，值相互影响解决办法
LQ271524的博客
07-12 728
1、每次init之后，先dispose释放下资源，再重新init var myChart=Echart.init(document.getElementById(DomID)); myChart.dispose()； myChart=Echart.init(document.getElementById(DomID)); 2、setOption时候，设置setOption（option，true） ，true表示数据不合并 ...
Echarts二次渲染，出现渲染不全，dom已存在，上次渲染视图遗留问题.
weixin_40992252的博客
01-31 611
Echarts二次渲染，出现渲染不全，dom已存在，上次渲染试图遗留问题.
原生js检测页面加载完毕的实例
10-18
原生JavaScript提供了多种方法来检测页面是否已经加载完毕。让我们深入探讨这些方法。 首先，最常见的一种方式是使用`window.onload`事件。这个事件会在整个页面（包括所有资源如图片、脚本、样式表等）加载完成后...
html css 原生js实现动态京东页面
12-24
在本项目中，我们将深入探讨如何使用HTML、CSS和原生JavaScript来实现一个动态的京东页面，这个页面包含了丰富的交互功能，如轮播图、自动轮播、倒计时（适用于秒杀模块）以及点击切换等特性。这些技术是前端开发的...
原生js验证简洁注册登录页面
10-20
主要为大家详细介绍了原生js验证简洁美观注册登录页面的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在Taro小程序中使用原生echarts——ec-canvas.doc
09-02
在 Taro 小程序中使用原生 eCharts —— ec-canvas 在 Taro 小程序中使用原生 eCharts 需要使用 ec-canvas 组件，这个组件提供了一个基于 HTML5 canvas 元素的图表绘制引擎，它可以在小程序中轻松地实现复杂的图表...
echats 同一页面使用多个图表，显示异常问题
weixin_30292843的博客
08-30 818
echarts绘制图表计算宽度的时候，由于第二个tab的属性display: none;所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%转为100，所以计算出的图表宽度为100px，效果如下： 我自己使用的解决办法，内嵌css样式中使用媒体查询，设置图表的宽度（如果在行内style中设置宽度，自适应不起作用）...
vue中在一个页面复用同一个echarts写的组件，会出现图表无法正常显示的问题！
Hcyul的博客
01-13 2067
vue中在一个页面复用同一个echarts写的组件，会出现图表无法正常显示的问题！ 出错原因： 因为echarts组件是用id来找div容器，两个复用的容器的id名字都相同，为FiveBarEchart，所以一个页面只会渲染出第一个echart图表，并且后面的数据会覆盖掉第一个图表的原数据。 解决办法： 那我们就换一种找div容器的方法。 在div容器上写一个ref 标记，用ref来获取div容器。就能解决一个页面复用同一个echart图表问题。 代码如下： <template> <d
页面多个echarts图表切换，出现无法加载完全问题，自适应图表问题解决办法
qq_20783497的博客
06-25 833
如图所示出现这种问题，是在加载的时候，使用了v-show的原因，导致首次加载的时候全部挂载，但不在该页面下，而在切换到这边的时候就出现加载不完全，解决办法是使用v-if保证每个图表单独加载完整。 ...
多个页面使用echarts图表，出现部分图表内容不显示问题
知所云
07-22 3161
最近开发一个项目，主要是对数据进行图表展示，之前用echarts 也就一两个页面会用，这次是十几个页面都有要用图表，多多少少，开发的过程中出现了一些bug（emmm。。。。）其中就遇到一个问题，多个页面，点击其他页面这个页面的数据就能展示，但是点击另一个页面的时候，报表就显示不出来了，当时找了另一个前端一起看，研究半天没找到问题（只能说我俩当时都没有想到id名上去，因为想着vue单页面随着路由切换应该互不影响的），可是这个图表还真是相互影响的，如果绘制图表的div的id名称是一摸一样的两个页面就会出现点击一
echarts中多树图切换时出现的图形混乱问题
MISS_zhang_0110的博客
03-02 486
ECharts的多树图切换时出现的图形混乱问题关键代码 关键代码 // An highlighted block var option = { tooltip: { trigger: 'item', hideDelay: 0 // chart.refresh();刷新时会维持当时图表的所有状态，所以设置隐藏延迟为0，否则在快速选择另一个节点时（尤其是数据比较多时）导致无法显示选择中的tooltip // 无法完全避免但是很大减轻
uniapp 通过ruander.js 展示echarts 图表
weixin_45986657的博客
06-29 324
uniappecharts图表通过rander.js展示折线图项目模板-Javascript文档类资源-CSDN下载echarts在uniapp上面展示的，通过rander.js实现曲线图，可动态请求接口渲染更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_45986657/85825759.........
解决vue⼀个页面中复用同⼀个echarts组件的问题
qq_52337177的博客
06-15 1021
解决vue⼀个页面中复用同⼀个echarts组件的问题
原生js数据大屏中的echarts饼状图如何实现动画
07-27
在原生 JavaScript 数据大屏中，可以使用 Echarts 来实现饼状图的动画效果。下面是一个简单的示例代码，演示如何使用 Echarts 创建并动态更新饼状图的数据： ```javascript // 创建饼状图实例 var chart = echarts.init(document.getElementById('chartContainer')); // 初始化数据 var data = [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ]; // 配置项 var option = { series: [ { name: '访问来源', type: 'pie', radius: '55%', data: data } ] }; // 设置初始配置项 chart.setOption(option); // 更新数据和动画效果 function updateData(newData) { // 更新配置项中的数据 option.series[0].data = newData; // 使用动画效果渲染新数据 chart.setOption(option, true); } // 示例更新数据的方法 setTimeout(function() { var newData = [ { value: 500, name: '直接访问' }, { value: 200, name: '邮件营销' }, { value: 150, name: '联盟广告' }, { value: 80, name: '视频广告' }, { value: 300, name: '搜索引擎' } ]; updateData(newData); }, 2000); ``` 以上代码中，我们首先创建了一个饼状图实例，然后通过配置项 `option` 来设置初始数据和样式。然后，我们使用 `chart.setOption(option)` 将配置项应用到饼状图中。 在需要更新数据时，我们可以通过调用 `updateData(newData)` 方法来更新配置项中的数据，并使用 `chart.setOption(option, true)` 方法来使用动画效果渲染新数据。 你可以根据实际需求修改示例代码中的数据和样式来适应你的项目。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值