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

相关推荐

  1. echarts数据数据造成处理

    2024-04-24 19:26:04       13 阅读
  2. oracle数据库sqlplus登录

    2024-04-24 19:26:04       39 阅读
  3. 解决Qt UI界面的优化方法

    2024-04-24 19:26:04       45 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-24 19:26:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-24 19:26:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-24 19:26:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-24 19:26:04       20 阅读

热门阅读

  1. 如何防止SQL注入攻击?

    2024-04-24 19:26:04       19 阅读
  2. 2024年最重要的AI趋势

    2024-04-24 19:26:04       13 阅读
  3. 【Linux】解决切换用户出现bash-4.2$问题

    2024-04-24 19:26:04       12 阅读
  4. 网络安全之数据库基础篇(基础入门)

    2024-04-24 19:26:04       15 阅读
  5. js 制作qq、微信 的表情

    2024-04-24 19:26:04       13 阅读
  6. 【PyTorch】3-基础实战(ResNet)

    2024-04-24 19:26:04       10 阅读
  7. 数仓建模—大数据建模

    2024-04-24 19:26:04       13 阅读
  8. Django的ORM使用filter以及Paginator分页器

    2024-04-24 19:26:04       10 阅读
  9. RTT学习

    2024-04-24 19:26:04       10 阅读
  10. 模糊视频图像智能处理

    2024-04-24 19:26:04       10 阅读
  11. 【软件工程中的螺旋模型】

    2024-04-24 19:26:04       13 阅读