当前位置: 首页 > news >正文

Vue实现柱状图横向自动滚动

Vue实现柱状图横向自动滚动

  • 1. 前言
  • 2. 代码
  • 3、实现效果图

1. 前言

原理:通过定时器修改Echarts的配置(options)达到我们想要的效果。

此外,我们还需要了解Echarts中dataZoom这个组件,这个组件用于:用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。简单来说就是,在数据量多的时候,既能保持Echarts美观度,也能让用户自由查看所有数据。
dataZoom组件中有三种类型,在本次需求中,使用的是内置型数据区域缩放组件(dataZoomInside)

2. 代码

<script>
export default {data() {return {time: ['06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16', '07-17', '07-18', '07-19', '07-20', '07-21', '07-22', '07-23', '07-24', '07-25', '07-26'],income:  [383251.478, 0, 0, 0, 0, 0, 0, 270.992, 42.411, 30.737, 0, 0, 0, 371.994, 218.245, 0, 73.898, 86.697, 0, 108.093, 0, 270.528, 0, 0, 0, 0, 0, 271.527, 0, 0],};},mounted() {// 初始化this.drawIncomeEcharts();},methods: {drawIncomeEcharts () {let that = thisvar chartDom = document.getElementById('income-echarts')var myChart = echarts.init(chartDom)var optionoption = {xAxis: {type: 'category',axisTick: {show: false},data: that.time,axisLabel: {textStyle: {color: '#fff',//坐标值得具体的颜色}},splitLine: {show: false     //去掉网格线},axisLine: {lineStyle: {type: 'solid',color: '#fff', //左边线的颜色                        width: '1' //坐标线的宽度                    }},},yAxis: {name: '收益(元)',type: 'value',axisTick: {show: false},splitLine: {// show: false,lineStyle: {type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线},},axisLabel: {textStyle: {color: '#fff',//坐标值得具体的颜色}},axisLine: {lineStyle: {type: 'solid',color: '#fff', //左边线的颜色                        width: '1' //坐标线的宽度                    }},},tooltip: {trigger: 'axis',},dataZoom: [{xAxisIndex: 0, 	//这里是从X轴的0刻度开始show: false, 	//是否显示滑动条,本次需求中,设置为falsetype: "inside", // 类型:内置型数据区域缩放组件startValue: 0, 	// 从头开始。endValue: 6, 	// 一次性展示几个。},],grid: {left: '4%',top: '15%',right: '4%',bottom: '5%',containLabel: true},series: [{name: '收益(元)',type: 'bar',barWidth: "30%", // 柱子宽度核心代码data: that.income,itemStyle: {color: '#1A9EFF'}}]}setInterval(function () {// 每次向左滑动一个,最后一个从头开始。if (option.dataZoom[0].endValue == income.length) {option.dataZoom[0].startValue = 0option.dataZoom[0].endValue = 6} else {option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1}myChart.setOption(option)}, 2000)option && myChart.setOption(option)window.addEventListener('resize', () => {myChart.resize()})},}
}</script>

3、实现效果图

在这里插入图片描述

相关文章:

Vue实现柱状图横向自动滚动

Vue实现柱状图横向自动滚动 1. 前言2. 代码3、实现效果图 1. 前言 原理&#xff1a;通过定时器修改Echarts的配置&#xff08;options&#xff09;达到我们想要的效果。 此外&#xff0c;我们还需要了解Echarts中dataZoom这个组件&#xff0c;这个组件用于&#xff1a;用于区域…...

解决构建maven工程时,配置了阿里云的前提下,依旧使用中央仓库下载依赖导致失败的问题!!!

问题描述&#xff1a; 在使用spring进行构建项目时&#xff0c;出现下载依赖迟迟不成功&#xff0c;显示maven wrapper 下载失败的问题。 Maven wrapper Cannot download ZIP distribution from https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.8.7/ap…...

MYSQL DCL语句

MySQL DCL语句 简介 DQL是用于查询和检索数据库数据的重要工具。它具有丰富的功能和灵活性&#xff0c;可以根据不同的查询需求进行条件过滤、排序、聚合计算等操作。通过合理使用DQL&#xff0c;可以从数据库中提取有用的数据以进行数据分析和决策支持。 DCL语句的分类 DC…...

4H-SiC nMOSFETs的亚阈值漏电流扫描滞后特性

目录 标题&#xff1a;On the Subthreshold Drain Current Sweep Hysteresis of 4H-SiC nMOSFETs研究了什么文章创新点文章的研究方法文章得出的结论 标题&#xff1a;On the Subthreshold Drain Current Sweep Hysteresis of 4H-SiC nMOSFETs 亚阈值滞后&#xff08;Subthresh…...

设计模式(单例模式)

概念 保证指定的类只有一个实例&#xff0c;不能创建出其他的实例 实现方式 1.饿汉模式 1.1 代码展示 package 设计模式;/*** Created with IntelliJ IDEA.* Description:* User: wuyulin* Date: 2023-07-28* Time: 11:28*///单例模式&#xff08;饿汉模式&#xff09; //保证…...

[SQL挖掘机] - 算术函数 - sqrt

介绍: 当谈到 SQL 中的 sqrt 函数时&#xff0c;它用于计算一个数值的平方根。 用法: sqrt 函数使用以下语法&#xff1a; sqrt(x)其中&#xff0c;x 是要计算平方根的数值。 注意: 当使用负数参数调用 SQL 中的 sqrt 函数时&#xff0c;具体的错误消息可能因不同的数据库…...

数据结构--顺序表、单链表

线性表是指顺序表和单链表 //顺序表数据结构 typedef struct { ElemType data[MaxSize];//顺序表元素 int length; //顺序表当前长度 }SqList; //单链表结点数据结构 typedef struct LNode { ElemType data;//数据域 struct LNode *next;//指针域 }LNode,*LinkList; 顺序表 …...

云安全攻防(一)之 云原生

前言 随着公有云和私有云的广泛部署&#xff0c;云计算基础设施成为企业部署新业务的首选。可以说&#xff0c;云计算已进入下半场&#xff0c;各大云计算服务商的厮杀日益激烈&#xff0c;新的概念也不断的层出不穷。近年来&#xff0c;云原生安全&#xff08;Cloud Native C…...

#vue3报错 Cannot read properties of null (reading ‘isCE‘)#

场景&#xff1a;使用 npm 安装依赖包的时候&#xff0c;如如安装 npm i xlsx npm i file-saver 重新运行报错 Cannot read properties of null (reading isCE)# 解决办法&#xff1a; 使用的vite vue 在vite.config.ts添加如下配置&#xff1a; dedupe: [ vue ]...

【计算机视觉中的 GAN 】 - 生成学习简介(1)

一、说明 在阅读本文之前&#xff0c;强烈建议先阅读预备知识&#xff0c;否则缺乏必要的推理基础。本文是相同理论GAN原理的具体化范例&#xff0c;阅读后有两个好处&#xff1a;1 巩固了已经建立的GAN基本概念 2 对具体应用的过程和套路进行常识学习&#xff0c;这种练习题一…...

深度学习实战44-Keras框架下实现高中数学题目的智能分类功能应用

大家好,我是微学AI ,今天给大家介绍一下深度学习实战44-Keras框架实现高中数学题目的智能分类功能应用,该功能是基于人工智能技术的创新应用,通过对数学题目进行智能分类,提供个性化的学习辅助和教学支持。该功能的实现可以通过以下步骤:首先,采集大量的高中数学题目数据…...

Redis Sentinel 及 Redis Cluster

Redis Sentinel Redis-Sentinel(哨兵模式)是Redis官方推荐的高可用性(HA)解决方案&#xff0c;当用Redis做Master-slave的高可用方案时&#xff0c;假如master宕机了&#xff0c;Redis本身(包括它的很多客户端)都没有实现自动进行主备切换&#xff0c;而Redis-sentinel本身也是…...

shell中按照特定字符分割字符串,并且在切分后的每段内容后加上特定字符(串),然后再用特定字符拼接起来

文件中的内容&#xff0c;可以这么写&#xff1a; awk -F, -v OFS, {for(i1;i<‌NF;i){$i$i"_suffix"}}1 input.txt-F,&#xff1a;设置输入字段分隔符为逗号&#xff08;,&#xff09;&#xff0c;这将使awk按照逗号分割输入文本。-v OFS‘,’&#xff1a;设置输…...

探寻智能化未来:AI与Web3共创金融领域巨大潜力

人工智能&#xff08;AI&#xff09;和Web3技术的迅猛发展为我们带来了许多新的机遇和影响。在数字经济和社会的浪潮中&#xff0c;结合了AI的智能化能力和Web3的去中心化与区块链技术&#xff0c;我们将进入一个智能化的Web3时代。人工智能和Web3技术是开拓生产力极限和重新定…...

Django学习笔记-表单(forms)的使用

在Django中提供了了form表单&#xff0c;可以更为简单的创建表单模板信息&#xff0c;简化html的表单。 一、网页应用程序中表单的应用 表单通常用来作为提交数据时候使用。 1.1 创建表单模板文件夹 在项目文件夹下创建一个template文件夹&#xff0c;用于存储所有的html模…...

机器学习分布式框架ray运行TensorFlow实例

使用Ray来实现TensorFlow的训练是一种并行化和分布式的方法&#xff0c;它可以有效地加速大规模数据集上的深度学习模型的训练过程。Ray是一个高性能、分布式计算框架&#xff0c;可以在集群上进行任务并行化和数据并行化&#xff0c;从而提高训练速度和可扩展性。 以下是实现…...

QT【day4】

chat_QT服务器端&#xff1a; //.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> //服务器类 #include<QTcpSocket> //客户端类 #include<QMessageBox> //对话框类 #include<QList> //链表容器 #inc…...

java中方法相关知识点详解

方法 简介 方法是一段用来完成特定功能的代码片段&#xff0c;用于定义该类或该类的实例的行为特征和功能实现语句块【复合语句】 语句块中定义的变量只能用于自己&#xff0c;外部不能使用 语句块可以使用外部的变量&#xff0c;而外部不能使用语句块的变量语法 [修饰符1 修饰…...

【算法训练营】Fibonacci数列+合法括号序列判断+两种排序方法

7.29 Fibonacci数列题目解析代码 合法括号序列判断题目题解代码 两种排序方法题目&#xff1a;题解代码 Fibonacci数列 题目 题目链接: 点击跳转 解析 【题目解析】&#xff1a; 本题是对于Fibonacci数列的一个考察&#xff0c;Fibonacci数列的性质是第一项和第二项都为1&am…...

【Rasa】入门案例学习

Rasa初体验--构建对话机器人 NLU数据 version: "3.1"nlu:- intent: greetexamples: |- Hi- Hey!- Hello- Good day- Good morning- intent: subscribeexamples: |- I want to get the newsletter- Can you send me the newsletter?- Can you sign me up for the ne…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...