ECharts海量数据渲染解决卡顿

file模块用来写文件
我们首先使用node来生成10万条数据;
借助node的fs模块就行;
如果不会的小伙伴;也不要担心;超级简单
// 引入模块
let fs = require('fs');
// 数据内容
let fileCont='我是文件内容'
/*** 第一个参数是文件名* 第二个参数是文件内容,这个文件的内容必须是字符串哈(特别注意)* 第三个参数是回调函数, 回调函数中有两个参数,* 第一个参数是错误信息,* 第二个参数是写入成功后的返回值* */ 
fs.writeFile('./demodata.txt',fileCont, (error, data) => {if (!error) {console.log('写入成功了',data)} else {console.log('写入失败了',error)}
})

现在我们需要创建一个指定类型的数据格式
我们等会从2022.1.1开始;每条数据间隔5分钟;产生10万条数据。
time的值是时间戳,我们可以通过 new Date().getTime() 来获取
value的值是温度,我们通过Math.random() * 50+10来获取
time的时间间隔是每隔5分钟
数据格式如下[{"time":1640966400000,"value":36.57},{"time":1640966700000,"value":31.68},
]
// 引入模块
let fs = require('fs');
// 生成100000条符合要求的数据格式
function timeFn(total){// 获取2022年1月1日的时间戳let dateTimeStamp = new Date(2022, 0, 1).getTime(); // 2022年1月1日 // 5分钟的时间戳是多少let oneHourStamp = 1000 * 60*5;let newArr = []for(let i= 0;i<total; i++){// 构造我们需要的数据格式newArr.push({ time: dateTimeStamp + oneHourStamp* i,value:Math.random() * 50+10 })}return newArr
}
let needData = timeFn(100000)fs.writeFile('./demodata.js',JSON.stringify(needData), (error, data) => {// JSON.stringify(needData) 将数组转为字符串if (!error) {console.log('写入成功了',data)} else {console.log('写入失败了',error)}
})

10万条数据渲染耗时10秒,且页面非常卡顿
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document&l

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/645232.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年 团体程序设计天梯赛个人总结

前言&#xff1a; 这是一个悲伤的故事~ &#x1f3c6;题目传送门 ⭐L1一阶题⭐L1-097 编程解决一切&#xff08;5分&#xff09;⭐L1-098 再进去几个人&#xff08;5分&#xff09;⭐L1-099 帮助色盲&#xff08;10分&#xff09;⭐L1-100 四项全能&#xff08;10 分&#xff0…

NeRF in the Wild: Neural Radiance Fields for Unconstrained Photo Collections

NeRF in the Wild: Neural Radiance Fields for Unconstrained Photo Collections(野外的 NERF: 用于无约束照片采集的神经辐射场&#xff09; Abstract 我们提出了一种基于学习的方法来合成新的视图的复杂场景使用只有非结构化的收集野生照片。我们建立在神经辐射场(neRF)的…

ONLYOFFICE:一站式在线协作办公好选择

&#x1f6f5;前言 随着信息技术的迅猛发展&#xff0c;人们对办公方式的需求也在不断变化。传统的办公软件已经无法满足现代企业的需求&#xff0c;而在线协作办公软件则成为了一个热门选择。 在众多在线协作办公软件中&#xff0c;ONLYOFFICE凭借其强大的功能和灵活的部署方…

如何远程实时监控员工的电脑屏幕?

企业规模的扩大和管理的复杂化&#xff0c;远程实时监控员工的电脑屏幕成为了许多企业管理者的需求。 这种监控不仅可以帮助管理者了解员工的工作状态&#xff0c;提高工作效率&#xff0c;还能在一定程度上保障企业的信息安全。 那么&#xff0c;如何实现远程实时监控员工的电…

Spring三级缓存源码解析

Spring三级缓存 前置知识三级缓存定义SpringBean生命周期 Bean的初始化getSingleton 分析加入一级缓存 CreateBean过程(A)A填充属性BB填充属性A,执行getSingleton&#xff08;A&#xff09;B完成初始化 前置知识 三级缓存定义 public class DefaultSingletonBeanRegistry ext…

玩转PyCharm

玩转PyCharm PyCharm是由JetBrains公司开发的提供给Python专业的开发者的一个集成开发环境&#xff0c;它最大的优点是能够大大提升Python开发者的工作效率&#xff0c;为开发者集成了很多用起来非常顺手的功能&#xff0c;包括代码调试、高亮语法、代码跳转、智能提示、自动补…

对于地理空间数据,PostGIS扩展如何在PostgreSQL中存储和查询地理信息?

文章目录 一、PostGIS扩展简介二、PostGIS存储地理空间数据1. 创建空间数据表2. 插入空间数据 三、PostGIS查询地理空间数据1. 查询指定范围内的地理空间数据2. 计算地理空间数据之间的距离3. 对地理空间数据进行缓冲区分析 四、总结 地理空间数据是指描述地球表面物体位置、形…

BUUCTF——[网鼎杯 2018]Fakebook

BUUCTF——[网鼎杯 2018]Fakebook 1.测试SQl注入的注入点1 2.尝试使用-- -进行闭合&#xff0c;但是不行 3.尝试使用数字型的SQL注入&#xff0c;使用--进行注入后面的SQL语句 4.尝试使用and 11 判断其是否真的存在SQL注入 5.尝试使用and 12进行判断 6.发现这个地方确实存…

attempt to compare nil with number -- 黑马点评出现问题

问题情况 : 主要问题 : 调用lua执行redis时&#xff0c;有一个值会接受nil&#xff08;因为redis中没有该数据&#xff09;或者数值&#xff0c;当该值为nil时执行报错&#xff0c;因为会用到将该值与其他数字比较&#xff0c;故报错attempt to compare nil with number 当然…

react,Chart

一、基础图&#xff1a;https://ant-design-charts.antgroup.com/ Ant Design Charts 1. 首先要下载ant-design/charts&#xff0c;然后在页面中添加如下柱状图代码: import React from react; import { Column } from ant-design/chartsconst DemoColumn: React.FC () …

两天速通阿里

感觉这一周太梦幻了&#xff0c;就像一个梦&#xff0c;很不真实~~~ 感觉这个暑期&#xff0c;我的运气占了99成&#xff0c;实力只有百分之一 4.15上午 腾讯csig 腾讯云部门&#xff0c;面完秒进入复试状态 4.16下午 美团优选供应链部门&#xff0c;4.18上午发二面 4.17晚上 阿…

芜湖市夜间景区、文娱主题活动、夜读空、精品文艺演出、数字促销补助等夜间经济奖励政策申报条件、材料

芜湖市示范街区、示范门店、夜间景区、文娱主题活动、体育赛事、夜读空、精品文艺演出、数字促销补助等夜间经济奖励政策申报条件、材料及补贴标准整理如下 芜湖市2023年促进夜间经济发展若干政策申报时间&#xff1a; 针对2023年度促进夜间经济发展若干政策&#xff08;商务局…