echarts 柱状图 定时自动轮播(非提示框轮播)

看了很多文档都是实现提示框轮播的,而我要实现的功能是:柱状图有多条数据时,轮播展示其中几条,比如我有100条数据,不能全部展示,设置轮播5条或者10条,依次显示数据,并形成闭环。

(实现提示框轮播:echarts 提示框 自动轮播)

  • 重点:设置option中的属性: dataZoom
dataZoom: {show: false,startValue: 0, // 从头开始。endValue: 5, // 一次性展示几个
},
  • demo.vue
<template><v-echarts ref="chart"></v-echarts>
</template>
<script>
import  options from "../../utils/options";
export default {data() {return {};},created() {},mounted() {this.getChart();},beforeDestroy() {this.clearInterval();},methods: {getChart() {let seriesData = [12.3, 22.1, 12.4, 33.3, 1, 18.3, 2.1, 12.4, 3.3, 10];let xAxisData= ["一号","二号","三号","四号","五号","六号","七号","八号","九号","十号",];this.$refs.chart.setOption(options(seriesData, xAxisData));if (xAxisData.length <= 5) return;this.szTime = setInterval(() => {seriesData.push(seriesData.shift());xAxisData.push(xAxisData.shift());this.$nextTick(() => {this.$refs.chart.setOption(options(seriesData, xAxisData));});}, 3000);},clearSzInterval() {while (this.szTime >= 0) {clearInterval(this.szTime);this.szTime--;}},},
};
</script>
  • …/…/utils/options
    在这里插入图片描述

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

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

相关文章

zabbix配置snmp trap--使用snmptrapd和Bash接收器--图文教程

1.前言 我的zabbix的版本是5.0版本&#xff0c;5.0的官方文档没有使用bash接收器的示例&#xff0c;6.0的官方文档有使用bash接收器的示例&#xff0c;但是&#xff0c;下载文件的链接失效&#xff1f;&#xff01; 这里讲解zabbix-server端配置和zabbix web端配置 2.zabbix-…

11、pytest断言预期异常

官方用例 # content of test_exception_zero.py import pytestdef test_zero_division():with pytest.raises(ZeroDivisionError):1/0# content of test_exception_runtimeerror.py import pytestdef test_recursion_depth():with pytest.raises(RuntimeError) as excinfo:def…

高效的单行python脚本

#-- coding: utf-8 -- “”" Created on Wed Dec 6 13:42:00 2023 author: czliu “”" 1. 平方列表推导 #使用列表推导法计算从 1 到 10 的数字平方 squares [x**2 for x in range(1, 11)] print(squares)2.求偶数 #可以使用列表推导式从列表中筛选偶数。还可以…

【Docker】 Docker attach 命令卡死的解决方案

在启动较早期的容器时&#xff0c;出现了使用 docker attach container_name 命令后卡死的问题。本文介绍了如何解决该问题。 首先&#xff0c;在使用 docker attach container_name 命令前需要先保证容器已经开启。此时&#xff0c;输入 docker attach container_name 命令后…

ncnn模型部署——使用VS2019把项目打包成DLL文件

一、项目打包成DLL文件 1.创建动态链接库DLL项目 创建完成&#xff0c;项目中包含源文件dllmain.cpp, pch.cpp&#xff0c;头文件framework.h, pch.h 2.编写和配置DLL项目 &#xff08;1&#xff09;配置pch.h文件&#xff0c;在头文件pch.h中定义宏&#xff0c;宏的作用的是…

【PyTorch】模型

文章目录 1. 模型的创建1.1. 创建方法1.1.1. 通过使用模型组件1.1.2. 通过继承nn.Module类 1.2. 将模型转移到GPU 2. 模型参数初始化3. 模型的保存与加载3.1. 只保存参数3.2. 保存模型和参数 1. 模型的创建 1.1. 创建方法 1.1.1. 通过使用模型组件 可以直接使用模型组件快速…

【Unity动画】Unity 2D动画创建流程

本文以2D为案例&#xff0c;讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…

什么是SPA(Single Page Application)?它的优点和缺点是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

IT外包对中小企业的独特优势

在竞争激烈的商业环境中&#xff0c;企业的发展稍有缓慢&#xff0c;就很有可能被竞争对手快速赶超、趁机抢占市场。一些中小企业为了更好地应对市场变化和提高自身竞争力&#xff0c;越来越多地转向了IT外包服务。相较于大型企业&#xff0c;中小企业在选择IT外包时能够获得一…

数据结构实验任务七:基于广度优先搜索的六度空间理论验证

问题描述 “六度空间”理论又称作“六度分隔(Six Degrees of Separation)”理论。这个理论 可以通俗地阐述为:“你和任何一个陌生人之间所间隔的人不会超过六个&#xff0c;也就是 说&#xff0c;最多通过五个人你就能够认识任何一个陌生人。”假如给你一个社交网络图&#xf…

java中用thumbnailator依赖写一个压缩图片的类,只要图片大小超过几兆就无限循环下去的详细代码实例?(经典)

下面是使用Thumbnailator依赖编写的一个压缩图片的类。该类会不断循环压缩图片&#xff0c;直到图片大小小于指定的阈值&#xff08;以字节为单位&#xff09;。 java Copy code import net.coobird.thumbnailator.Thumbnails; import java.io.File; import java.io.IOExcept…

Tap虚拟网卡

1 概述 Tap设备通常用于虚拟化场景下&#xff0c;其驱动代码位于drivers/net/tun.c&#xff0c;tap与tun复用大部分代码&#xff0c; 注&#xff1a;drivers/net/tap.c并不是tap设备的代码&#xff0c;而是macvtap和ipvtap&#xff1b; 下文中&#xff0c;我们统一称tap&#…

父子进程继承问题:OSError: [Errno 88] Socket operation on non-socket错误记录

目录 1 错误:self.server_address = self.socket.getsockname()OSError: [Errno 88] Socket operation on non-socket 2 错误排查过程 3 解决方法

java中用thumbnailator依赖写一个压缩图片的类,只要图片大小超过固定尺寸就无限循环下去的详细代码实例?

下面是使用thumbnailator依赖编写的一个压缩图片类的详细代码示例&#xff0c;该类会对大小超过固定尺寸的图片进行无限循环压缩。 java Copy code import net.coobird.thumbnailator.Thumbnails; import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import…

四、分代垃圾回收机制及垃圾回收算法

学习垃圾回收的意义 Java 与 C等语言最大的技术区别&#xff1a;自动化的垃圾回收机制&#xff08;GC&#xff09; 为什么要了解 GC 和内存分配策略 1、面试需要 2、GC 对应用的性能是有影响的&#xff1b; 3、写代码有好处 栈&#xff1a;栈中的生命周期是跟随线程&…

重型堆垛机钢丝绳维护经验

钢丝绳是重型堆垛机一个非常重要的组成部分&#xff0c;平时我们给一些客户做堆垛机的维保&#xff0c;每次都会特地去检查堆垛机的钢丝绳&#xff0c;如果发现起毛刺&#xff0c;那必须得赶紧跟客户讲&#xff0c;让客户自己的维修人员不定期地观察&#xff0c;情况严重就要做…

CPU密集型和IO密集型对 CPU内核之间的关系

多线程如何合理的配置核心线程数&#xff1f; 对于 CPU 密集型任务&#xff0c;由于 CPU 密集型任务的性质&#xff0c;导致 CPU 的使用率很高&#xff0c;如果使用线程池中的核心线程数量过多&#xff0c;会增加上下文切换的次数&#xff0c;带来额外的开销。因此&#xff0c…

Python 日志(略讲)

日志操作 日志输出&#xff1a; # 输出日志信息 logging.debug("调试级别日志") logging.info("信息级别日志") logging.warning("警告级别日志") logging.error("错误级别日志") logging.critical("严重级别日志")级别设置…

Java程序员,你掌握了多线程吗?(文末送书)

目录 01、多线程对于Java的意义02、为什么Java工程师必须掌握多线程03、Java多线程使用方式04、如何学好Java多线程送书规则 摘要&#xff1a;互联网的每一个角落&#xff0c;无论是大型电商平台的秒杀活动&#xff0c;社交平台的实时消息推送&#xff0c;还是在线视频平台的流…

unity 2d 入门 飞翔小鸟 下坠功能且碰到地面要停止 刚体 胶囊碰撞器 (四)

1、实现对象要受重力 在对应的图层添加刚体 改成持续 2、设置胶囊碰撞器并设置水平方向 3、地面添加盒状碰撞器 运行则能看到小鸟下坠并落到地面上