热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

解决echartsecharts数据动态更新和dataZoom被重置问题

这篇文章主要介绍了解决echartsecharts数据动态更新和dataZoom被重置问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1.全局绑定滚轮事件,获得dataZoom最新的位置:

myChart.on('dataZoom',function(event){
   if(event.batch){
   start=event.batch[0].start;
   end=event.batch[0].end;
   }else{
   start=event.start;
   end=event.end;
   };
});

2.把最新的start和end赋值给要更新的option

window.setInterval(function () {
  num=Math.random()*num+100;
 data0.splice(0,1);
 data0.push(num);
 
 option.dataZoom[0].start=start;
 option.dataZoom[0].end=end;
 myChart.setOption(option);  
},3000);

3.echart数据增量刷新还可以用appendData

补充知识:echarts动态添加数据

我就废话不多说了,大家还是直接看代码吧~



补充

主动使用echarts的resize方法改变图表大小:

(opts?: {
  width?: number|string,
  height?: number|string,
  silent?: boolean
})

当在参数中填入宽高,this.echarts.resize({width:300}),dom层必须有一个初始化像素的宽高,百分比的宽高该方法不会生效。

以上这篇解决echarts echarts数据动态更新和dataZoom被重置问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 深入解析Pod中的容器关系
    容器之间的紧密协作如何实现?本文探讨了Kubernetes中Pod的概念及其在处理容器间超亲密关系中的作用。 ... [详细]
  • 通过马老师的视频学习了Java中的容器相关内容,包括Collection、Set、List、Map及其常见实现类,并深入了解了这些容器的基本操作方法。 ... [详细]
  • ECharts 官方提供了丰富的图表示例,但实际项目中往往需要从后端动态获取数据。本文将详细介绍如何从后端获取数据并将其转换为 ECharts 所需的 JSON 格式,以实现动态饼图的展示。 ... [详细]
  • Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • 本文介绍了在 Java 编程中遇到的一个常见错误:对象无法转换为 long 类型,并提供了详细的解决方案。 ... [详细]
  • 前言Spring中一个Bean的创建过程是十分复杂的,这里通过源码来简单分析一下。原理分析相关类图如下DefaultListableBeanFactory就是IOC容器的最终实现, ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • async/await 是现代 JavaScript 中非常强大的异步编程工具,可以极大地简化异步代码的编写。本文将详细介绍 async 和 await 的用法及其背后的原理。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 本文主要探讨了Java中处理ActionEvent事件的接口,以及一些常见的编程问题和解决方案,包括方法重载、成员变量访问、镜片质量检测等。 ... [详细]
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • C# 实现可浮动工具栏功能
    本文介绍如何在 C# 中实现一个可浮动的工具栏,即工具栏可以从其初始位置拖出,并且可以重新拖回原位。通过创建一个新的窗口作为工具栏的容器,并利用 .NET Framework 提供的 ToolStrip 控件,可以轻松实现这一功能。 ... [详细]
  • 3D打印技术的最新进展及其产业应用前景
    今年5月,我国成功发射的长征五号B运载火箭携带了新一代载人飞船试验船,船上首次搭载了一台3D打印机,标志着我国在太空3D打印领域的重大突破。本文将探讨3D打印技术的最新进展及其对未来产业的潜在影响。 ... [详细]
  • Python 3 Scrapy 框架执行流程详解
    本文详细介绍了如何在 Python 3 环境下安装和使用 Scrapy 框架,包括常用命令和执行流程。Scrapy 是一个强大的 Web 抓取框架,适用于数据挖掘、监控和自动化测试等多种场景。 ... [详细]
  • Docker 中创建 CentOS 容器并安装 MySQL 进行本地连接
    本文详细介绍了如何在 Docker 中创建 CentOS 容器,并在容器中安装 MySQL 以实现本地连接。文章内容包括镜像拉取、容器创建、MySQL 安装与配置等步骤。 ... [详细]
author-avatar
zjymeimei706
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有