echarts性能优化

news2024/11/24 19:28:52

echarts数据量多的时候优化方案:
在这里插入图片描述渲染的数据太多时,渲染的速度会变慢。

let data = [];

for (let i = 0; i < 100000; i++) {
  let style = {};
  if (i % 2 == 0) {
    style.color = "red";
  }
  data.push({
    value: i,
    itemStyle: style,
  });
}
myEcharts = init(canvas, null, {
    width: 500,
    height: 500,
    devicePixelRatio: window.devicePixelRatio,
    locale: "ZH",
  });
  options = {
    tooltip: {},

    xAxis: {
      type: "category",
      data: data.map((item) => item.data),
    },
    yAxis: {},

    series: [
      {
        type: "scatter",
        name: "line",
        data: data,
      },
    ],
  };

在这里插入图片描述

使用 large 优化

使用 large 优化后不能自定义设置单个数据项的样式。
largeThreshold 开启绘制优化的阈值

 series: [
      {
        large: true,
        largeThreshold: 2000, //在2000时开启优化
        type: "scatter",
        name: "line",
        data: data,
      },
    ],

在这里插入图片描述

使用渐进渲染 progressive

本身就开启着的,需要调节数值。
progressive :每一帧绘制图形数量

 series: [
      {
        progressive: 5000,
        type: "scatter",
        name: "line",
        data: data,
      },
    ],

在这里插入图片描述
progressiveThreshold :启用渐进式渲染的图形数量阈值
progressiveChunkMode: 分片的方式,渲染的模式。
1. ‘sequential’:按照数据的顺序分片。缺点是渲染过程不自然。
2. mod 取模分片,即每个片段中的点会遍布于整个数据,从而能够视觉上均匀得渲染

   
 series: [
   {
     progressive: 5000,
     progressiveChunkMode: "mod",
     type: "scatter",
     name: "line",
     data: data,
   },
 ],

在这里插入图片描述

使用 appendData

appendData() 添加完数据后,不会重新渲染,要想重新渲染可以调用.resize(),而setOption要整个重新渲染,resize不会整个重新渲染。

let data = [];
let data1 = [];
let now = 0;
let current = 0;
for (let i = 0; i < 100000; i++) {
  if (now < 5000) {
    data1.push({
      value: i,
    });
    now++;
  } else {
    data.push(data1);
    data1 = [];
    now = 0;
  }
}
 series: [
      {
        progressive: 5000,
        progressiveChunkMode: "mod",
        type: "scatter",
        name: "line",
        data: data[0],
      },
    ],
 myEcharts.on("finished", () => {
    current++;
    if (current < data.length) {
      myEcharts.appendData({
        seriesIndex: 0,
        data: data[current],
      });
      myEcharts.resize();
    }
  });

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数字孪生3D智慧园区可视化能耗管控平台

智慧园区是园区与互联网的完美融合。通过整合信息技术和各类资源&#xff0c;我们实现了园区内各个服务的数字化运营&#xff0c;不仅降低了企业的运营成本&#xff0c;更提高了管理效率 智慧园区3D互动大屏系统利用web3d开发、三维可视化、模拟仿真和数字孪生技术&#xff0c;…

AlexNet,LeNet-5,ResNet,VGG-19,VGG-16模型

模型 AlexNet导入必要的库&#xff1a;加载类别名称&#xff1a;创建标签映射字典&#xff1a;加载图像数据和对应的标签&#xff1a;构建AlexNet模型&#xff1a;编译模型&#xff1a;训练模型&#xff1a; LeNet-5导入必要的库&#xff1a;加载类别名称&#xff1a;创建标签映…

Centos7网络故障,开机之后连不上网ens33mtu 1500 qdisc noop state DOWN group default qlen 1000

说明 这是Linux系统网络接口的信息&#xff0c;其中"mtu 1500"表示最大传输单元大小为1500字节&#xff0c;“qdisc noop”表示没有设置特殊的队列算法&#xff0c;“state down”表示该接口当前处于关闭状态&#xff0c;“group default”表示该接口属于“default”…

GPT-4O神器来袭!自动生成Figma设计稿,移动端开发瞬间加速!

2024年5月29日- 近日&#xff0c;一款基于GPT-4O技术的创新工具成功实现根据产品需求文档&#xff08;PRD&#xff09;自动生成Figma设计稿的功能&#xff0c;为移动端应用开发者带来革命性的便捷。据悉&#xff0c;该功能主要针对移动端应用进行优化&#xff0c;并支持使用高质…

《平渊》· 伍 —— 做副业,如何看待被骗?

《平渊》 伍 "真正的象棋高手&#xff0c;不会因为一子的得失去计较。" 今天聊聊做副业过程中&#xff0c;如何看待被骗。 首先我想聊聊全盘战略的思想&#xff0c;孔明在《隆中对》中就提出了「全盘战略」思想&#xff0c;建议刘备首先稳固荆州和益州&#xff0c;然…

PyMySQL连接池

背景 在用python写后端服务时候&#xff0c;需要与mysql数据库进行一些数据查询或者插入更新等操作。启动服务后接口运行一切正常&#xff0c; 隔了第二天去看服务日志就会报错&#xff0c;问题如下&#xff1a; pymysql.err.OperationalError: (2006, "MySQL server ha…

NCNN中的模型量化解决方案:源码阅读和原理解析

前言&#xff1a;去年NCNN发布了模型量化的解决方案&#xff0c;作为目前中国大陆被使用最多的端侧模型推理解决方案&#xff0c;NCNN开源的代码值得认真阅读和研究。这篇博客笔者和大家一起探索NCNN的模型量化部分&#xff0c;希望大家在NCNN的世界里玩得开心。 目录 量化方法…

一文读懂python同级目录的调用附Demo(详细解读)

目录 前言1. 问题所示2. 原理分析3. 解决方法3.1 添加父目录3.2 相对路径3.3 添加init 前言 通过制作简易的Demo&#xff0c;让其更加深入的了解如何使用 1. 问题所示 发现python的同级目录相互调用会出Bug E:\software\anaconda3\envs\py3.10\python.exe F:\python_project…

PFC基础知识1

不同负载 1.当负载是电阻时&#xff0c; 阻值固定&#xff0c;阻性负载&#xff0c;相位相同&#xff0c;并且线性度非常好 &#xff0c;输出的电流全部被利用 2.当负载有电感时&#xff0c;相位有偏差&#xff0c;电流滞后于电压90。电源需要输出电流&#xff0c;但是电感并未…

C++ list类

目录 0.前言 1.list介绍 1.1优势 1.2劣势 1.3容器属性 2.list使用 2.1构造函数 2.1.1默认构造函数 2.1.2填充构造函数 2.1.3范围构造函数 2.1.4拷贝构造函数 2.1.5初始化列表构造函数 2.2迭代器 2.2.1 begin() 2.2.2 end() 2.2.3 cbegin() 2.2.4 cend() 2.2.…

CI/CD(基于ESP-IDF)

主要参考资料 B站乐鑫信息科技《【乐鑫全球开发者大会】DevCon23 #15 &#xff5c;通过 CI/CD 进行流水线开发》 pytest-embedded乐鑫文档: https://docs.espressif.com/projects/pytest-embedded/en/latest/api.html 目录 CI/CD简介乐鑫内部CI/CD测试GitLab CI/CDGitHub Actio…

Thingsboard规则链:Customer Attributes节点详解

在物联网(IoT)平台Thingsboard的规则引擎中&#xff0c;Customer Attributes节点扮演了至关重要的角色&#xff0c;它允许用户访问和操作与客户&#xff08;Customer&#xff09;实体相关的属性数据。这些属性可以是静态信息&#xff0c;如客户名称、联系信息&#xff0c;或是动…

【PHP项目实战训练】——laravel框架的实战项目中mysql数据库的数据的数据在blade.php中展示

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Kafka原生API使用Java代码-生产者-异步发送消息回调

文章目录 1、异步发送消息&回调1.1、pom.xml1.2、KafkaProducer1.java 1、异步发送消息&回调 回调就是接收kafka的响应 1.1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0&q…

创建QT项目后只有一个pro文件(已解决) QT Creator

1. 问题回顾 工程仅有xx.pro文件 工程文件夹里面却有文件 这种情况并非创建工程失败&#xff0c;而是没有配置好文件 界面左下角 2. 解决方法 点击项目模式 配置不了 有点生气。。卸载了 重新安装&#xff0c;这次选择了多个kit勾选 回到项目模式&#xff0c;点进去 发现这…

短视频矩阵系统源码---开发BS架构B/S(Browser/Server Architecture)架构

短视频矩阵系统源头开发------- 第一款叫做筷子科技&#xff0c;这个筷子科技剪辑和发布都是没有问题的&#xff0c;但是前一段时间他的剪辑发个公告&#xff0c;每个账号只能发两条&#xff0c;另外它的唯一缺点就是它成本比较高的&#xff0c;入门门槛应该在12800左右&#…

视频汇聚EasyCVR视频监控平台GA/T 1400协议特点及应用领域解析

GA/T 1400协议&#xff0c;也被称为视图库标准&#xff0c;全称为《公安视频图像信息应用系统》。这一标准在公安系统中具有举足轻重的地位&#xff0c;它详细规定了公安视频图像信息应用系统的设计原则、系统结构、视频图像信息对象、统一标识编码、系统功能、系统性能、接口协…

大规模服务治理中etcd的实践与深度应用

导读&#xff1a;随着企业对于服务治理的日益重视&#xff0c;特别是在云原生和微服务架构的广泛应用下&#xff0c;百度小程序团队基于大模型服务治理的实战经验&#xff0c;结合分布式开源KV产品etcd&#xff0c;分享了其核心技术Raft与boltdb的实现原理&#xff0c;并深入剖…

文件上传漏洞简介

目录 漏洞原理 漏洞危害 利用场景 检测方法 防御方法 绕过手段 前端JS绕过 构造可解析后缀 修改Content-Type&#xff08;MIME&#xff09; 大小写绕过 文件头绕过 图片马 截断与特殊文件名 其他绕过 尝试绕过的步骤 漏洞原理 原理 攻击者构造恶意文件进行上传…

RTPS协议之Behavior Module

目录 交互要求基本要求RTPS Writer 行为RTPS Reader行为 RTPS协议的实现与Reader匹配的Writer的行为涉及到的类型RTPS Writer实现RTPS WriterRTPS StatelessWriterRTPS ReaderLocatorRTPS StatefulWriterRTPS ReaderProxyRTPS ChangeForReader RTPS StatelessWriter BehaviorBe…