开个定时器给echarts组件配置定时更新

我在js文件中开了个定时器，每1s从后端获取数据并解析，然后用异步方法就渲染不出来，改成同步就可以了。
这个解决方法来自于这篇文章，我出的问题和他一样：关于ajax中readyState的值一直为1的问题
这里将ajax参数修改为false即可：

xmlhttp.open("GET","http://www.test.com/getData.php?q=",false);

但是还有个问题，更改数据后还需要更新echarts组件的配置，否则页面不会动态刷新，还是静态的。
根据mychart组件使用的三部曲：

实例化对象
指定配置项和数据
把配置项给实例对象
我们在第一次setOption之后开一个定时器，在内部更新数据，然后对于option的需要更新的参数重新赋值，然后再次调用setoption，这样数据发生改变后，我们的组件也会动态刷新了。

// 3. 把配置项给实例对象myChart.setOption(option);setInterval(function() {// 读取数据库文件,更新配置var obj= Myupdate();if (obj != null) {option.xAxis.data = obj.mytype;option.series.data = obj.mydata;myChart.setOption(option,true);}}, 500);

这里执行号Myupdate()函数之后，obj的mytype和mydata的值都是正确的，但是在网页端debug发现，赋值之后查看option的xAxis的data还是没有被赋值，经过翻阅相关博客，以及再次查看网页端代码发现是这个问题:

封装好的数组应该赋给：

option.xAxis[0].data = obj.mytype;
option.series[0].data = obj.mydata;

因为这两个配置都是数组…绝了

update函数内容如下：

function Myupdate() {var xmlhttp=new XMLHttpRequest();var mytype = new Array();var mydata = new Array();xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState == 4 && xmlhttp.status == 200){var txt = xmlhttp.responseText;// 解析for (var i = 0; i < txt.length; i++) {if (txt[i] == '#') {var m_type = "";while(i + 1 < txt.length && txt[i+1] != '$') {i++;m_type += txt[i];} mytype.push(m_type);} else if (txt[i] == '$') {var m_data = "";while(i + 1 < txt.length && txt[i+1] != '@') {i++;m_data += txt[i];} mydata.push(Number(m_data));} else {i++;}} // QualityIndexType = mytype;// QualityIndexData = mydata;}}xmlhttp.open("GET","http://www.test.com/getData.php?q=",false);xmlhttp.send();return {mytype,mydata};
}

开个定时器给echarts组件配置定时更新相关推荐

java对日开发中常用词汇（一） / java対日ソフトウェア开発中よく使える単語 (不定时更新)
日语 (英语对照) 中文含义バックエンド(backend) 后端,后台フロントエンド(frontend) 前端,前台プロセス(process) 运行,执行,处理プログラム(program) 项 ...
Apache2获取免费https证书并定时更新
Apache2获取https证书并定时更新一.获取Let's Encrypt证书准备工作获取证书二.配置证书前置条件证书路径配置开启重写模块(看个人需要) 配置https强制跳转(看个人 ...
VSCODE+Arduino生态快速入门ESP32(一)——点个呼吸灯、开个定时器
VSCODE+Arduino生态快速入门ESP32(一)--点个呼吸灯.开个定时器我手里这块是ESP32WROOM开发板,20多块钱,性价比非常高. 1.环境搭建环境搭建就不在此赘述,CSDN上的 ...
【Android FFMPEG 开发】FFMPEG 交叉编译配置 ( 下载 | 配置脚本 | 输出路径 | 函数库配置 | 程序配置 | 组件配置 | 编码解码配置 | 交叉编译配置 | 最终脚本 )
文章目录一.FFMPEG 源码下载解压二.交叉编译工具三.configure 脚本及帮助命令四.配置 configure 脚本五.输出目录配置六.函数库配置七.程序配置选项八.组件配 ...
单片机中断程序实例_单片机定时器中断实现长时间定时程序
单片机定时器中断实现长时间定时程序 #include // 包含51单片机寄存器定义的头文件 sbit D1=P2^0; //将D1位定义为P2.0引脚 unsigned char Countor; ...
C51实现时钟12MHz，使用定时器T1的方式1定时20mS ，做一个时分秒的电子钟。
/***************************************************** *任务要求 *1.时钟12MHz,使用定时器T1的方式1定时20mS: *2.对20mS计 ...
十七、.net core（.NET 6）搭建基于Quartz组件的定时调度任务
搭建基于Quartz组件的定时调度任务先在package包项目下,添加Quartz定时器组件: 新建类库项目Wsk.Core.QuartzNet,并且引用包类库项目.然后新建一个中间调度类,叫Qu ...
NXP JN5169使用定时器进行PWM输出和定时功能
NXP JN5169使用定时器进行PWM输出和定时功能一.定时器介绍 1.定时器介绍 2.定时器可操作的模式 3.定时器DIO 4.定时器和PWM模式 5.定时器中断二.实现代码 1.PWM输出 ...
阿里云大数据组件零碎点总结（不定时更新）
阿里云组件的更新频率很快,存在部分内容描述与现版本不一致的情况,最新版本特性请参考阿里云官方文档. 阿里云官方帮助文档链接:https://help.aliyun.com/ 阿里云各组件简介:http ...

开个定时器给echarts组件配置定时更新

开个定时器给echarts组件配置定时更新相关推荐

最新文章

热门文章