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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

内容平台加码旅游:谁是下一个网红城市

“姐妹们&#xff0c;你们五一啥安排&#xff1f;”早在3月中旬&#xff0c;小威就在询问两个好朋友的行程&#xff0c;“不早早问&#xff0c;怕约不上你们。” 去年以来&#xff0c;国人的旅游需求快速复苏&#xff0c;像小威的朋友一样&#xff0c;之前爱玩的、不爱玩的似乎…

使用Unity扫描场景内的二维码,使用插件ZXing

使用Unity扫描场景内的二维码&#xff0c;使用插件ZXing 使用Unity扫描场景内的二维码&#xff0c;ZXing可能没有提供场景内扫描的方法&#xff0c;只有调用真实摄像机扫描二维码的方法。 实现的原理是&#xff1a;在摄像机上添加脚本&#xff0c;发射射线&#xff0c;当射线打…

世界首台能探测单个原子的量子模拟器,诞生!

量子物理学依赖于高精度的传感技术&#xff0c;以便深入研究材料的微观特性。近期开发的模拟量子处理器显示出量子气体显微镜在原子层面理解量子系统方面的强大潜力。这种显微镜可以生成极高分辨率的量子气体图像&#xff0c;甚至能够检测到单个原子。 在西班牙巴塞罗那的ICFO&…

XxlJob外网访问

Xxl-Job使用外网访问 服务注册中心配置 ### web server.port8088 server.servlet.context-path/xxl-job-admin### actuator management.server.base-path/actuator management.health.mail.enabledfalse### resources spring.mvc.servlet.load-on-startup0 spring.mvc.static…

Java练习题

打印9*9乘法口诀表 解析&#xff1a;利用for循环解决 代码如图所示&#xff1a; public class Cc {public static void main(String[] args) {for (int i 1; i < 10; i){ //从1遍历到9 for(int j 1; j < i; j){ System.out.print(j "*" i "&…

由于找不到steam_api64.dll,无法继续执行代码的解决方法

当用户在尝试启动某款基于Steam平台的游戏时&#xff0c;遇到了“游戏显示找不到steam_api64.dll”的错误提示&#xff0c;这会导致无法正常启动游戏。这究竟是什么原因导致的呢&#xff1f;本文将介绍五种解决方法&#xff0c;帮助大家解决这一问题。 一&#xff0c;了解steam…

实现ALV页眉页脚

1、文档介绍 在ALV中&#xff0c;可以通过增加页眉和页脚&#xff0c;丰富ALV的展示。除了基本的页眉和页脚&#xff0c;还可以通过插入HTML代码的方式展示更加丰富的页眉和页脚&#xff0c;本篇文章将介绍ALV和OOALV中页眉页脚的使用。 2、ALV页眉页脚 效果如下 2.1、显示内…

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

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

翻译《The Old New Thing》 - What‘s so special about the desktop window?

Whats so special about the desktop window? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20040224-00/?p40493 Raymond Chen 2004年02月24日 简介 桌面窗口在 Windows 编程中具有特殊的地位&#xff0c;因为它代表整个桌面环境。滥用…

常见大厂面试题(SQL)01

知乎问答最大连续回答问题天数大于等于3天的用户及其对应等级 1.描述 现有某乎问答创作者信息表author_tb如下(其中author_id表示创作者编号、author_level表示创作者级别&#xff0c;共1-6六个级别、sex表示创作者性别)&#xff1a; author_id author_level sex 101 …

ARP 攻击神器:ARP Spoof 保姆级教程

一、介绍 arpspoof是一种网络工具&#xff0c;用于进行ARP欺骗攻击。它允许攻击者伪造网络设备的MAC地址&#xff0c;以欺骗其他设备&#xff0c;并截获其通信。arpspoof工具通常用于网络渗透测试和安全评估&#xff0c;以测试网络的安全性和漏洞。 以下是arpspoof工具的一些…

LabVIEW学习记录 - 实时显示时间

LabVIEW操作 - 实时显示时间 在程序框图&#xff0c;选择函数->定时->格式化日期/时间字符串 该函数的使用手册说明&#xff1a; 鼠标选择“格式化日期/时间字符串”->创建->输入控件->输入格式 查看时间代码格式&#xff1a; 编程->定时->获取时间日…

业务复习知识点Oracle查询

业务数据查询-1 单表查询 数据准备 自来水收费系统建表语句.sql 简单条件查询 精确查询 需求 &#xff1a;查询水表编号为 30408 的业主记录 查询语句 &#xff1a; select * from t_owners where watermeter 30408; 查询结果 &#xff1a; 模糊查询 需求 &#xff1a;查询业…

每日汇评:捍卫 2318美元的支撑位对于黄金至关重要

金价仍保持防御性&#xff0c;但周三早盘守住 2300 美元。&#xff1b; 在中东紧张局势缓和之际&#xff0c;美元下跌给金价带来了安慰。 只要 21 日均线守住&#xff0c;金价下跌空间似乎有限&#xff0c;因为 RSI 保持看涨&#xff1b; 周三早盘&#xff0c;金价维持在2300美…

机器学习-随机森林算法预测房租模型

文章目录 机器学习-随机森林算法预测房租模型解决问题数据集探索性数据分析数据预处理构建模型并训练结果分析与评估参数调优结果预测模型保存经验总结参考文章 机器学习-随机森林算法预测房租模型 解决问题 根据待租房源相关信息&#xff0c;通过随机森林机器学习算法构件预…

045、seq2seq

之——序列生成 杂谈 基于RNN实现&#xff0c;通过RNN生成器不断获取输入&#xff0c;更新隐藏状态&#xff0c;将最后生成的隐藏状态传递给解码器&#xff0c;然后自循环迭代直到输出停止。 正文 1.训练 训练时候解码器使用目标句子不断作为输入&#xff0c;就算解码错了输入…

Docker向harbor上传大镜像的413报错

文章目录 一、背景二、问题三、处理1.调整harbor相关大小2.正向代理的nginx参数 一、背景 最近遇到了个需求&#xff0c;某厂商的系统模块以容器模式部署在我们的内网环境中&#xff0c;厂商为我们提供了一个公网仓库&#xff0c;需要我们自己下载相关镜像。因此&#xff0c;获…

华为机考入门python3--(18)牛客18- 识别有效的IP地址和掩码并进行分类统计

分类&#xff1a;字符串 知识点&#xff1a; 字符串是否由数字组成 my_str.isdigit() 字符串填充 不足8位左侧填充0 my_str.zfill(8) 题目来自【牛客】 import sys def classify_ip(ip_mask): ip_class, is_private_ip, mask_class ignore_ip, 0, valid_mask# 解…

值传递和地址传递

文章目录 目录值传递地址传递 目录 值传递 package com.zhang.parameter; //值传递 public class MethodDemo1 {public static void main(String[] args) {int a 10;System.out.println(a);System.out.println("~~~~~~~~~~~~~~~");change(a);//无论你传入的是什么 …

基于AARRR模型的录音笔在电商平台进行推广的建议

基于AARRR模型&#xff0c;即Acquisition&#xff08;获取用户&#xff09;、Activation&#xff08;提高活跃度&#xff09;、Retention&#xff08;提高留存率&#xff09;、Revenue&#xff08;获取收入&#xff09;和Refer&#xff08;自传播&#xff09;&#xff0c;以下是…