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…

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;宏的作用的是…

【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…

Tap虚拟网卡

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

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

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

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、地面添加盒状碰撞器 运行则能看到小鸟下坠并落到地面上

Windows本地如何添加域名映射?(修改hosts文件)

1. DNS(域名系统) Domain Name System(域名系统)&#xff1a;为了加快定位IP地址的速度, 将域名映射进行层层缓存的系统. 目的&#xff1a;互联网通过IP&#xff08;10.223.146.45&#xff09;定位浏览器建立连接&#xff0c;但是我们不易区别IP&#xff0c;为了方便用户辨识I…

柏睿网络分析:为什么微模块化机房越来越受欢迎?

与传统机房相比&#xff0c;微模块化机房的建设周期更短&#xff0c;扩展性更强&#xff0c;能耗更低&#xff0c;运维难度也相对较低。因此&#xff0c;微模块化机房是一种高效、灵活、节能的机房解决方案&#xff0c;适用于各种规模的数据中心。 一体化分布式部署&#xff1a…

idea利用SpringMVC框架整合ThymeLeaf

简洁一些&#xff1a;两个重要文件 1.controller指定html文件:我们访问http://localhost:8080/test package com.example.appledemo.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import o…

甘草书店:#9 2023年11月23日 星期四 「麦田创业历程分享1——联合创始人的魔幻相遇」

既然甘草是一家创业主题的书店咖啡馆&#xff0c;那就从我&#xff0c;从麦田开始分享一下创业历程吧。 需要声明的是&#xff0c;我从不认为我有资格对别人的创业指指点点&#xff0c;每位创业者的性格、背景、基础、诉求各有不同&#xff0c;时代发展也日新月异&#xff0c;…

netty07-粘包半包以及解决方案

粘包指的是发送方在发送数据时&#xff0c;多个数据包被合并成一个大的数据包发送到接收方&#xff0c;接收方在接收时无法准确地区分各个数据包的边界&#xff0c;从而导致数据粘在一起。 半包指的是发送方发送的数据包被拆分成了多个小的数据包&#xff0c;在接收方接收时&a…

Vue的Nuxt项目部署在服务器,pm2动态部署和npm run build静态部署

Nuxt项目的部署有两种方式&#xff0c;一种是静态部署&#xff0c;一种是动态部署 静态部署需要关闭项目的ssr功能&#xff0c;动态部署则不需关闭&#xff0c;所以怎么部署项目就看你用不用ssr功能了 。 1.静态部署 先说静态部署&#xff0c;很简单&#xff0c;只需要在nuxt…

【C语言】程序设计加密解密

&#x1f6a9;write in front&#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评百大博…

黛姿秘语,匠心之作,严谨工艺铸就完美肌肤

在喧嚣的都市中&#xff0c;我们每个人都渴望找到一款可以信赖长期使用的护肤品&#xff0c;让匹配的肌肤重新焕发光彩&#xff0c;找到更加年轻的自己&#xff0c;但是目前市面上的产品让人眼花缭乱&#xff0c;作为普通的消费者&#xff0c;无法去辨别什么产品好&#xff0c;…