ECharts 横向柱状图自动滚动

news2024/11/28 0:57:28

核心代码

const seriesList = [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 120, 200];
const xAxisList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const dataZoomEndValue = 6; // 数据窗口范围的结束数值(一次性展示几个)
dataZoom: [
  {
    show: false, // 是否显示滑动条
    xAxisIndex: 0, // 这里是从X轴的0刻度开始
    startValue: 0, // 数据窗口范围的起始数值
    endValue: dataZoomEndValue // 数据窗口范围的结束数值(一次性展示几个)
  }
],
if (xAxisList.length > 0 && seriesList.length > 0) {
  setInterval(function () {
    // 每次向后滚动一个,最后一个从头开始
    if (option.dataZoom[0].endValue === xAxisList.length) {
      option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值
      option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值
    } else {
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; // 数据窗口范围的起始数值
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; // 数据窗口范围的结束数值
    }
    myChart.setOption(option);
  }, 2000);
}

完整代码:

import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

const seriesList = [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 120, 200];
const xAxisList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const dataZoomEndValue = 6; // 数据窗口范围的结束数值(一次性展示几个)

const option = {
  xAxis: {
    type: 'category',
    data: xAxisList
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [
    {
      show: false, // 是否显示滑动条
      xAxisIndex: 0, // 这里是从X轴的0刻度开始
      startValue: 0, // 数据窗口范围的起始数值
      endValue: dataZoomEndValue // 数据窗口范围的结束数值(一次性展示几个)
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      data: seriesList
    }
  ]
};
if (xAxisList.length > 0 && seriesList.length > 0) {
  setInterval(function () {
    // 每次向后滚动一个,最后一个从头开始
    if (option.dataZoom[0].endValue === xAxisList.length) {
      option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值
      option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值
    } else {
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; // 数据窗口范围的起始数值
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; // 数据窗口范围的结束数值
    }
    myChart.setOption(option);
  }, 2000);
}

option && myChart.setOption(option);

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

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

相关文章

Java面向对象高级【类加载器】

目录 Java程序是怎样被运行的 类加载器的作用 加载类文件 链接类 定位类 类加载器间的委派 实现类的隔离 类加载器的类型 启动类加载器(Bootstrap Class Loader) 扩展类加载器(Extension Class Loader) 应用程序类加载器…

数据结构和算法学习记录——二叉树的非递归遍历(中序遍历、先序遍历、后序遍历)

目录 中序遍历 代码实现 思路图解 先序遍历 代码实现 后序遍历 思路图解 二叉树的非递归遍历运用到堆栈 中序遍历 循环的思路是 遇到一个节点,就把它压栈,并去遍历它的左子树。当左子树遍历结束之后,从栈顶弹出这个节点并访问…

MybatisPlus主键策略

Mybatis默认主键策略是TableId(type IdType.ASSIGN_ID) 这是默认策略雪花算法 此时主键类型可以是String 数据表字段类型可以是bigint int varchar 无需数据表主键自增 TableId(type IdType.ASSIGN_AUTO) 是主键自增策略:该策略为跟随数据库表的主键递增策略&…

大数据挖掘建模平台产品功能特点

大数据挖掘建模平台是面向大数据挖掘教学实训的工具。在“泰迪杯”数据挖掘挑战赛中大多学生都有使用到该工具,平台采用可视化操作方式,通过丰富内置算法,帮助用户快速、一站式的进行数据分析及挖掘建模。可应用于处理海量数据、高复杂性的数…

C语言判断素数的实现及数学原理

本篇博客会讲解如何使用C语言来判断一个整数是不是素数。 实现方法 如何判断一个数是不是素数呢?如果这个数只能被1或者它自己整除,那么它就是一个素数。 如何写代码来判断呢?假设要判断一个数num是不是素数,就让2~(num-1)的数…

LeetCode037之解数独(相关话题:回溯法)

题目描述 编写一个程序,通过填充空格来解决数独问题。 数独的解法需 遵循如下规则: 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。(请参考示例图)数独部分空格内已填入了数字,空白格用 . 表示…

Nginx入门和使用

Nginx入门 基础 https://blog.csdn.net/weixin_40792878/article/details/83316519 快速入门 Nginx 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少,并发能力强; 代理:用于隐藏客户端或者目标服务器,是客…

通过案例来了解响应式开发(HTML,CSS)的视频控件

目录 前言 一、视频控件的使用方法 1.语法 二、部分属性 二、案例举例 三、播放效果 前言 1.本文讲解的响应式开发技术(HTML5CSS3Bootstrap)的HTML5表单等功能方法的代码,这也是很多教材的一个典型案例; 2.本文将讲解涉及到…

腾讯轻联测试预览报错怎么办?

在腾讯轻联配置过程中,经常遇到测试预览失败的报错。首先我们整体介绍一下【测试预览】的作用。增加【测试预览】的节点的作用主要有两个: ● 第一个作用是为了保证我们应用连接能通畅,可以获取到数据,避免后续由于设置问题&…

IntelliJ IDEA安装及jsp开发环境搭建

一、前言 现在.net国内市场不怎么好,公司整个.net组技术转型,就个人来说还是更喜欢.net,毕竟不是什么公司都像微软一样财大气粗开发出VS这样的宇宙级IDE供开发者使用,双击sln即可打开项目,一直想吐槽为嘛java项目只能i…

Docker Registry 本地镜像发布到私有库

本地镜像发布到私有库流程 是什么1 官方Docker Hub地址:https://hub.docker.com/,中国大陆访问太慢了且准备被阿里云取代的趋势,不太主流。2 Dockerhub、阿里云这样的公共镜像仓库可能不太方便,涉及机密的公司不可能提供镜像给公…

【Spring Security】 入门实战

文章目录一、基本概念二、Spring Security第一个程序三、Spring Security没有生效四、修改默认账号密码(appliction.yml)五、修改默认账号密码(配置类)六、Spring Security的三个configure方法七、Spring Security的三种身份的验证…

Android 面试—深入理解Android类加载机制

前言 任何一个java程序都是由一个或者多个class文件组成,在程序运行时,需要将class文件加载到JVM中才可以使用,负责加载这些class文件的就是java的类加载机制。ClassLoader的作用简单的来说就是加载class文件,提供给程序运行时使…

结构体联合体sizeof内存求值 - 对齐数

讲解下struct和union的内存求值和对齐 以题目讲解 结构体联合体sizeof内存求值 - 对齐数不同位数下类型字节大小内存对齐规则struct 内存对齐求值嵌套struct内存对齐求值union的内存大小求值union大小计算准则struct嵌套union内存对齐求值不同位数下类型字节大小 一定要搞清楚…

【机器学习】P18 反向传播(导数、微积分、链式法则、前向传播、后向传播流程、神经网络)

反向传播反向传播反向传播中的数学导数与python链式法则简单神经网络处理流程从而理解反向传播神经网络与前向传播神经网络与反向传播反向传播 反向传播(back propagation)是一种用于训练神经网络的算法,其作用是计算神经网络中每个参数对损…

【Java虚拟机】JVM核心基础和常见参数实战

1.新版JVM内存组成部分和堆空间分布 JVM内存的5大组成(基于JDK8的HotSpot虚拟机,不同虚拟机不同版本会有不一样) 名称作用特点程序计数器也叫PC寄存器,用于记录当前线程执行的字节码指令位置,以便线程在恢复执行时能…

常见的DNS攻击与相应的防御措施

DNS查询通常都是基于UDP的,这就导致了在查询过程中验证机制的缺失,黑客很容易利用该漏洞进行分析。DNS服务可能面临如下DNS攻击风险: 黑客伪造客户端源IP地址发送大量的DNS请求报文,造成DNS request flood攻击。 黑客伪造成授权服…

MongoDB实现---存储机制

储存 GridFS机制 GridFS:将大文件分隔成多个小文档存放,这样我们能够有效的保存大文档,而且解决了BSON对象有限制的问题;通过两个集合实现:两个集合分别存储存储实际数据和存储文件的元数据: 元数据文件&…

一篇文章搞定《动手学深度学习》-(李沐)PyTorch版本的所有内容

目录 目录 简介 阅读指南 1. 深度学习简介 2. 预备知识 3. 深度学习基础 4. 深度学习计算 5. 卷积神经网络 6. 循环神经网络 7. 优化算法 8. 计算性能 9. 计算机视觉 10. 自然语言处理 环境 参考(大家可以在这里下载代码) 原书地址&#…

四结(4.13)多线程学习

今天又进行了一次学长授课,关于MySQL和JDBC本来学了增删查改操作,用IDEA也可以操作数据库,今天讲了一些数据库的规范(三大范式)、以及er图。了解了一下项目。 项目要分为客户端和服务端(C/S)来写…