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. 前言 原理:通过定时器修改Echarts的配置(options)达到我们想要的效果。 此外,我们还需要了解Echarts中dataZoom这个组件,这个组件用于:用于区域…...
解决构建maven工程时,配置了阿里云的前提下,依旧使用中央仓库下载依赖导致失败的问题!!!
问题描述: 在使用spring进行构建项目时,出现下载依赖迟迟不成功,显示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是用于查询和检索数据库数据的重要工具。它具有丰富的功能和灵活性,可以根据不同的查询需求进行条件过滤、排序、聚合计算等操作。通过合理使用DQL,可以从数据库中提取有用的数据以进行数据分析和决策支持。 DCL语句的分类 DC…...
4H-SiC nMOSFETs的亚阈值漏电流扫描滞后特性
目录 标题:On the Subthreshold Drain Current Sweep Hysteresis of 4H-SiC nMOSFETs研究了什么文章创新点文章的研究方法文章得出的结论 标题:On the Subthreshold Drain Current Sweep Hysteresis of 4H-SiC nMOSFETs 亚阈值滞后(Subthresh…...
设计模式(单例模式)
概念 保证指定的类只有一个实例,不能创建出其他的实例 实现方式 1.饿汉模式 1.1 代码展示 package 设计模式;/*** Created with IntelliJ IDEA.* Description:* User: wuyulin* Date: 2023-07-28* Time: 11:28*///单例模式(饿汉模式) //保证…...
[SQL挖掘机] - 算术函数 - sqrt
介绍: 当谈到 SQL 中的 sqrt 函数时,它用于计算一个数值的平方根。 用法: sqrt 函数使用以下语法: sqrt(x)其中,x 是要计算平方根的数值。 注意: 当使用负数参数调用 SQL 中的 sqrt 函数时,具体的错误消息可能因不同的数据库…...
数据结构--顺序表、单链表
线性表是指顺序表和单链表 //顺序表数据结构 typedef struct { ElemType data[MaxSize];//顺序表元素 int length; //顺序表当前长度 }SqList; //单链表结点数据结构 typedef struct LNode { ElemType data;//数据域 struct LNode *next;//指针域 }LNode,*LinkList; 顺序表 …...
云安全攻防(一)之 云原生
前言 随着公有云和私有云的广泛部署,云计算基础设施成为企业部署新业务的首选。可以说,云计算已进入下半场,各大云计算服务商的厮杀日益激烈,新的概念也不断的层出不穷。近年来,云原生安全(Cloud Native C…...
#vue3报错 Cannot read properties of null (reading ‘isCE‘)#
场景:使用 npm 安装依赖包的时候,如如安装 npm i xlsx npm i file-saver 重新运行报错 Cannot read properties of null (reading isCE)# 解决办法: 使用的vite vue 在vite.config.ts添加如下配置: dedupe: [ vue ]...
【计算机视觉中的 GAN 】 - 生成学习简介(1)
一、说明 在阅读本文之前,强烈建议先阅读预备知识,否则缺乏必要的推理基础。本文是相同理论GAN原理的具体化范例,阅读后有两个好处:1 巩固了已经建立的GAN基本概念 2 对具体应用的过程和套路进行常识学习,这种练习题一…...
深度学习实战44-Keras框架下实现高中数学题目的智能分类功能应用
大家好,我是微学AI ,今天给大家介绍一下深度学习实战44-Keras框架实现高中数学题目的智能分类功能应用,该功能是基于人工智能技术的创新应用,通过对数学题目进行智能分类,提供个性化的学习辅助和教学支持。该功能的实现可以通过以下步骤:首先,采集大量的高中数学题目数据…...
Redis Sentinel 及 Redis Cluster
Redis Sentinel Redis-Sentinel(哨兵模式)是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端)都没有实现自动进行主备切换,而Redis-sentinel本身也是…...
shell中按照特定字符分割字符串,并且在切分后的每段内容后加上特定字符(串),然后再用特定字符拼接起来
文件中的内容,可以这么写: awk -F, -v OFS, {for(i1;i<NF;i){$i$i"_suffix"}}1 input.txt-F,:设置输入字段分隔符为逗号(,),这将使awk按照逗号分割输入文本。-v OFS‘,’:设置输…...
探寻智能化未来:AI与Web3共创金融领域巨大潜力
人工智能(AI)和Web3技术的迅猛发展为我们带来了许多新的机遇和影响。在数字经济和社会的浪潮中,结合了AI的智能化能力和Web3的去中心化与区块链技术,我们将进入一个智能化的Web3时代。人工智能和Web3技术是开拓生产力极限和重新定…...
Django学习笔记-表单(forms)的使用
在Django中提供了了form表单,可以更为简单的创建表单模板信息,简化html的表单。 一、网页应用程序中表单的应用 表单通常用来作为提交数据时候使用。 1.1 创建表单模板文件夹 在项目文件夹下创建一个template文件夹,用于存储所有的html模…...
机器学习分布式框架ray运行TensorFlow实例
使用Ray来实现TensorFlow的训练是一种并行化和分布式的方法,它可以有效地加速大规模数据集上的深度学习模型的训练过程。Ray是一个高性能、分布式计算框架,可以在集群上进行任务并行化和数据并行化,从而提高训练速度和可扩展性。 以下是实现…...
QT【day4】
chat_QT服务器端: //.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> //服务器类 #include<QTcpSocket> //客户端类 #include<QMessageBox> //对话框类 #include<QList> //链表容器 #inc…...
java中方法相关知识点详解
方法 简介 方法是一段用来完成特定功能的代码片段,用于定义该类或该类的实例的行为特征和功能实现语句块【复合语句】 语句块中定义的变量只能用于自己,外部不能使用 语句块可以使用外部的变量,而外部不能使用语句块的变量语法 [修饰符1 修饰…...
【算法训练营】Fibonacci数列+合法括号序列判断+两种排序方法
7.29 Fibonacci数列题目解析代码 合法括号序列判断题目题解代码 两种排序方法题目:题解代码 Fibonacci数列 题目 题目链接: 点击跳转 解析 【题目解析】: 本题是对于Fibonacci数列的一个考察,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…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...
LeetCode 0386.字典序排数:细心总结条件
【LetMeFly】386.字典序排数:细心总结条件 力扣题目链接:https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n ,按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...
