echarts 柱状图数据过多时自动滚动

        当我们柱状图中X轴数据太多的时候,会自动把柱形的宽度挤的很细,带来的交互非常不好,我们可以用dataZoom属性来解决
简易的版本,横向滚动。

option.dataZoom = [
    {
        type: "slider",
        show: true,
        startValue: 0, //数据窗口范围的起始百分比
        endValue: 8,
     },
];

效果如下:

如果需要自动滚动,需要再加个定时器,

还可以在标签上设置鼠标放上去停止滚动

@mouseover="hovers = true" @mouseleave="hovers = false"

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hive实战 —— 电商数据分析(全流程详解 真实数据)

目录 前言需求概述数据清洗数据分析一、前期准备二、项目1. 数据准备和了解2.确定数据粒度和有效列3.HDFS创建用于上传数据的目录4.建库数仓分层 5.建表5.1近源层建表5.2. 明细层建表为什么要构建时间维度表?如何构建时间维度表? 5.3 轻聚层建表6. 指标数…

实现负载均衡

1.安装依赖 sudo apt insta11 libgd-dev 2.下载nginx wget http://nginx.org/download/nginx-1.22.1.tar.gz 3.解压nginx tar -zvxf nginx-1.22.1.tar.g2 4.编译安装 cd nginx-1.22.1 5.编译并指定安装位置,执行安装之后会创建指定文件夹/www/env/nginx ./configure…

【干货】【常用电子元器件介绍】【电阻】(二)--敏感电阻器

声明:本人水平有限,博客可能存在部分错误的地方,请广大读者谅解并向本人反馈错误。   电子电路中除了采用普通电阻器外,还有一些敏感电阻器(如热敏电阻器、压敏电阻器、光敏电阻器等)也被广泛地应用。然而…

ubuntu_qtcreator安装

https://download.qt.io/official_releases/qtcreator/ 5.15 以上安装 QT5.15以上不再提供离线安装包,只能在线安装,– 下载 下载地址如下: 腾讯云的国内资源: Index of /qt/official_releases/online_installers/ 官网下载:…

已解决:安卓,怎么优雅接入科大讯飞语音评测功能?

写在前面: 网上关于讯飞接入的博客都很少,按说讯飞都是业界翘楚,不知为何,很少搜索到精品,一搜就是一个要求开会员的博客,我也是醉了。讯飞提供的文档也是不清晰,我是摸着石头过河,…

如何用甘特图跟踪项目进度

甘特图是一个简单但是极其强大的项目管理工具,能够清晰可视化复杂项目的进度,在项目跟踪和控制上发挥重要作用。任何一个严肃的项目组织者都会使用甘特图来规划和管理项目中的任务。 甘特图的纵坐标表示项目的各项活动或任务,横坐标表示项目的时间进度。每个任务用一条横条表示…

掌握Pyecharts:绘制炫酷词云图的参数解析与实战技巧【第36篇—python:词云图】

文章目录 安装Pyecharts基本的词云图绘制自定义词云图样式多种词云图合并高级词云图定制与交互1. 添加背景图片2. 添加交互效果 使用自定义字体和颜色从文本文件生成词云图总结: 在数据可视化领域,词云图是一种极具表现力和趣味性的图表,能够…

C++(搜索二叉树)

目录 前言: 1.二叉搜索树 1.1二叉搜索树的定义 1.2二叉搜索树的特点 2.二叉搜索树的实现 2.1框架 2.2查找 2.3插入 2.4删除 1.右子树为空 2.左子树为空 3.左右都不为空 3.递归版本 3.1前序遍历 3.2中序遍历 3.3后续遍历 3.4查找(递…

SPA单页面的讲解(超级详细)

目录 一、什么是SPA 二、SPA和MPA的区别 单页应用与多页应用的区别 单页应用优缺点 三、实现一个SPA 原理 实现 hash 模式 history模式 四、题外话:如何给SPA做SEO SSR服务端渲染 静态化 使用Phantomjs针对爬虫处理 一、什么是SPA SPA(sin…

Windows打开IE浏览器命令最简单的方法

问题场景: 许多插件或特定版本的系统需要使用ie浏览器来访问,window默认的ie浏览器是被禁用的如何快速打开ie浏览器解决问题 目录 问题场景: 测试环境: 检查环境是否支持: 问题解决: 方法一 方法二 方法…

支持IPv4与IPv6双协议栈的串口服务器,IPv6串口服务器

物联网是啥玩意儿?这是首先要搞明白的。按照百度百科的说法,是将各种信息传感设备,如射频识别(RFID)装置、红外感应器、全球定位系统、激光扫描器等种种装置与互联网结合起来而形成的一个巨大网络。这个说法有些复杂&a…

【JaveWeb教程】(33)SpringBootWeb案例之《智能学习辅助系统》的详细实现步骤与代码示例(6)修改员工的实现

目录 SpringBootWeb案例063. 修改员工3.1 查询回显3.1.1 接口文档3.1.2 实现思路3.1.3 代码实现3.1.4 postman测试 3.2 修改员工3.2.1 接口文档3.2.2 实现思路3.2.3 代码实现3.2.4 postman测试3.2.5 前后端联调测试 SpringBootWeb案例06 前面我们已经实现了员工信息的条件分页…

linux jenkins相关命令

1.jenkins启动命令 [rootlocalhost /]#service jenkins start 2.jenkins停止命令 [rootlocalhost /]#service jenkins stop 3.查询jenkins状态命令 [rootlocalhost /]#service jenkins status 4.重启jenkins命令 [rootlocalhost /]#service jenkins restart Jenkins默认的端口号…

牵手国际企业,OpenAI计划自己制造AI芯片

据外媒报道称,近日,OpenAI的首席执行官萨姆奥特曼正在积极洽谈一项规模达数十亿美元的投资项目,计划与多家顶级芯片制造商合作,建设一个覆盖全球的人工智能芯片生产网络。 奥特曼曾多次反馈目前的芯片已不能满足OpenAI公司的AI研发…

九、Kotlin 注解

1. 什么是注解 注解是对程序的附件信息说明。 注解可以作用在类、函数、函数参数、属性等上面。 注解的信息可用于源码级、编译期、运行时。 2. 注解类的定义 使用元注解 Retention 声明注解类的作用时期。 使用元注解 Target 声明注解类的作用对象。 定义注解类时可以声…

Linux详细笔记大全

第0章 Linux基础入门 什么是计算机 计算机的组成: 控制器,是整个计算机的中枢神经,根据程序要求进行控制,协调计算机各部分工作及内存与外设的访问等。 运算器,功能是对数据进行各种算术运算和逻辑运算。 存储器,功能是存储程序、数据和各种信号、命令等信息。 输入设备…

vue3-element-admin的组件el-time-picker设置只能选择上午或下午

上午&#xff1a; <el-time-picker style"width: 80%;" :disabled"!top_status" is-range v-model"top_time"range-separator"至" start-placeholder"开始时间" end-placeholder"结束时间" placeholder"…

Spring Security 存储密码之 JDBC

Spring Security的JdbcDaoImpl实现了UserDetailsService接口,通过使用JDBC提供支持基于用户名和密码的身份验证。 JdbcUserDetailsManager扩展了JdbcDaoImpl,通过UserDetailsManager接口提供UserDetails的管理功能。 当Spring Security配置为接受用户名/密码进行身份验证时,…

59.螺旋矩阵II(力扣LeetCode)

59.螺旋矩阵II 题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 2&#xff1a; 输…

Arduino开发实例-DRV8833电机驱动器控制直流电机

DRV8833电机驱动器控制直流电机 文章目录 DRV8833电机驱动器控制直流电机1、DRV8833电机驱动器介绍2、硬件接线图3、代码实现DRV8833 使用 MOSFET,而不是 BJT。 MOSFET 的压降几乎可以忽略不计,这意味着几乎所有来自电源的电压都会传递到电机。 这就是为什么 DRV8833 不仅比基…