echarts 模拟时间轴播放效果

x,y轴为数值轴,通过设置bar的数据模拟时间播放。标签可通过formatter自定义为时间,播放/停止/速度可通过setInterval来控制(待完善)

在这里插入图片描述

代码可直接放echart官方示例执行

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,100];
option = {
  color: ['#3398DB'],
  tooltip: {
    trigger: 'axis',
    showContent: false,
    axisPointer: {
      type: 'line'
    }
  },
  grid: {
    top: '8%',
    bottom: '90%'
  },
  xAxis: [
    {
      type: 'value',
      axisPointer: {
        show: true
      },
      axisTick: {
        inside: true
      },
      minorTick: {
        show: true
      },
      splitLine:{show:false},
      splitNumber:10
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: false
    }
  ],
  series: [
    {
      name: 'x',
      type: 'bar',
      barWidth: '3',
      animation: false,
    }
  ]
};
let index = 0;
setInterval(() => {
  const temp = index++%Math.max(...data);
  myChart.setOption({
    series: [
      {
        name: 'x',
        data: Array(Math.max(...data)).fill().map((it, i) => {
          return [i, i===temp];
        })
      }
    ]
  });
},200);

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

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

相关文章

代码随想录算法训练营第二天|977、有序数组的平方

977. 有序数组的平方 已解答 简单 相关标签 相关企业 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。 示例 1: 输入:nums [-4,-1,0,3,10] 输出:[0,1,9,16,…

Linux Ubuntu系统安装MySQL并实现公网连接本地数据库【内网穿透】

文章目录 前言1 .安装Docker2. 使用Docker拉取MySQL镜像3. 创建并启动MySQL容器4. 本地连接测试4.1 安装MySQL图形化界面工具4.2 使用MySQL Workbench连接测试 5. 公网远程访问本地MySQL5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主…

基于Flask的宠物领养系统的设计与实现

基于Flask的宠物领养系统的设计与实现 涉及技术:python3.10flaskmysql8.0 系统分为普通用户和管理员两种角色,普通用户可以浏览搜索宠物,申请领养宠物;管理员可以分布宠物信息,管理系统等。 采用ORM模型创建数据&am…

chrome浏览器插件content.js和background.js还有popup都是什么,怎么通讯

popup 在用户点击扩展程序图标时(下图中的下载图标),都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的(比如就叫popup.js)。它会在每次点击插件图标——popup页面弹出时,重新载入。…

高并发服务器模型

高并发服务器模型 1.高并发服务器模型--select2.高并发服务器模型--poll3.epoll模型3.1 epoll原理3.2epoll反应堆 1.高并发服务器模型–select 我们知道实现服务器的高并发,可以用多线程或多进程去实现。但还可以利用多路IO技术:select来实现,它可以同时…

html唐诗鉴赏

<!DOCTYPE html> <html> <head><title>文字网页</title> </head> <body><h2 align"center">唐诗鉴赏</h2><hr width"100%" size"1" color"#00ffee"><p align"…

“2024第九届国际发酵培养基应用与发展技术论坛”圆满落幕

3月5日&#xff0c;“2024第九届国际发酵培养基应用与发展技术论坛”在济南圆满落幕。论坛吸引了来自发酵行业400多名代表现场参会&#xff0c;1600多名代表线上参会。本次论坛由中国生物发酵产业协会主办&#xff0c;安琪酵母股份有限公司承办。中国生物发酵产业协会理事长于学…

抽奖小程序怎么一键生成_揭秘这款火爆的抽奖小程序

一键生成&#xff0c;梦想触手可及&#xff01;揭秘这款火爆的抽奖小程序 在快节奏的现代生活中&#xff0c;每个人都渴望找到一份属于自己的幸运与惊喜。而今天&#xff0c;我要为大家介绍的这款抽奖小程序&#xff0c;正是实现这一愿望的神器&#xff01;它不仅操作简单&…

Linux服务器安装nvm

1、 首先查看服务器有没有安装git git --version 2、如果没有安装&#xff1a;在Linux上是有yum安装Git&#xff0c;非常简单&#xff0c;只需要一行命令 yum -y install git 3、git安装完成后&#xff0c;使用以下其中一个命安装NVM # 能访问github的话&#xff0c;使用这…

逆变器专题(17)-下垂控制(1)

相应仿真原件请移步资源下载 通常情况下&#xff0c;离网型逆变器采用的控制方法为电压电流双闭环控制&#xff0c;而常规的电压电流双闭环控制会存在电压跌落&#xff0c;频率失稳等情况&#xff0c;通俗的将就是没有电压和频率的支撑 。 下垂控制是现如今较为常用的李网逆变…

Python接口自动化之cookie、session应用!

以下介绍cookie、session原理及在接口自动化中的应用。 HTTP 协议是一种无状态协议&#xff0c;即每次服务端接收到客户端的请求时&#xff0c;都是一个全新的请求&#xff0c;服务器并不知道客户端的历史请求记录&#xff1b;Session 和 Cookie 的主要目的就是为了弥补 HTTP 的…

运维工单系统哪家好?

数字化转型数字化时代已然到来&#xff0c;企业运维工作的重要性日益突出。为了满足各类企业的运维需求&#xff0c;市场上涌现了诸多运维工单系统厂家&#xff0c;包括卓豪ServiceDesk Plus、Zendesk、Zenduty、Jira Service Desk等。 而选择合适的运维工单系统&#xff0c;对…

《剑指 Offer》专项突破版 - 面试题 74 : 合并区间(C++ 实现)

题目链接&#xff1a;LCR 074. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 输入一个区间的集合&#xff0c;请将重叠的区间合并。每个区间用两个数字表示&#xff0c;它们分别表示区间的起始位置和结束位置。例如&#xff0c;输入区间集合 [[1, 3], …

【异常处理】BadSqlGrammarException低级SQL语法异常

报错 org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use …

每日一练 | 华为认证真题练习Day194

1、下面是路由器Huawei的部分输出配置&#xff0c;关于该部分配置描迷正确的是: [huawei] bgp 100 [huawei-bgp]peer 12.12.12.2 ip-prefix P1 export [huawei]ip-prefix P1 index 5 deny 10.0.0.0 0 greater-equal 8 less-equal 32 [huawei]ip-prefix P1 index 5 deny 172…

做副业千万不要在抖音开个人店,个人店血泪史,千万别碰!

大家好&#xff0c;我是电商花花。 抖音小店个人店已经开放了很长时间了&#xff0c;个人店以不用营业执照&#xff0c;不用保证金&#xff0c;凭借身份证就可以在抖音上开抖音小店&#xff0c;就可以做电商&#xff0c;做老板。 目前抖音小店的流量可以说是非常大&#xff0…

【MetaGPT】多智能体协作——你画我猜(文字版)

多智能体协作 本篇将学习 MetaGPT中的 Environment 、 Team 组件。 1. Muti Agent 概念概述 多智能体系统 (Multi-Agent System, MAS) 是由一群具有一定自主性、协同性和学习能力的智能体组成的系统。智能体在环境中相互协作&#xff0c;以达到某种目标或完成特定任务。 2. 多…

哪里下载Mac上最全面的系统清理工具,CleanMyMac X4.15中文版永久版资源啊

哪里下载Mac上最全面的系统清理工具&#xff0c;CleanMyMac X4.15中文版永久版资源啊&#xff0c;CleanMyMac X4.15中文版是一款全面的Mac系统优化工具。它能够扫描、检测并清理不需要的文件和应用程序&#xff0c;优化内存使用和磁盘空间&#xff0c;提高Mac的性能表现。此外&…

运行json文件变成api服务器模拟,json-server

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 json-server数据运行 json-server数据运行 安装json-server // 命令 路径 端口 "server": "json-server ./server/data.json --port 8080",

LeetCode 2673. 使二叉树所有路径值相等的最小代价【贪心】1917

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…