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

news2024/11/17 6:54:59

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

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

效果如下:

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

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

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

 

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

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

相关文章

对接京东SDK踩坑

背景 最近刚好需要对接京东本地生活,部分接口和数据可以直接对接京东的开放平台,有一些敏感数据需要在京东云鼎上面入驻,然后在鼎内做一些业务逻辑,然后再将数据做一个转发,然后踩了一个坑就是京东SDK打包时未打包依赖…

C语言第十弹---函数(上)

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 函数 1、函数的概念 2、库函数 2.1、标准库和头文件 2.2、库函数的使用方法 2.2.1、功能 2.2.2、头文件包含 2.2.3、实践 2.2.4、库函数文档的⼀般格式 …

C++实现推箱子游戏

推箱子游戏 运行之后的效果如视频所示,在完成游戏后播放音乐 准备工作:建立一个新的文件夹,并在文件夹中任意增加一张背景图片,以及各个部件的照片文件 因为这里用到了贴图技术,要使用graphic.h这个函数&#xff0c…

【DeepLearning-8】MobileViT模块配置

完整代码: import torch import torch.nn as nn from einops import rearrange def conv_1x1_bn(inp, oup):return nn.Sequential(nn.Conv2d(inp, oup, 1, 1, 0, biasFalse),nn.BatchNorm2d(oup),nn.SiLU()) def conv_nxn_bn(inp, oup, kernal_size3, stride1):re…

C/C++:混肴点分析

C中的常量介绍 字面常量 字面常量是指直接出现在代码中的常量值。例如,整数常量10、浮点数常量3.14、字符常量A等都属于字面常量。字面常量的值在编译时就已经确定,并且不能被修改。 字面常量存在类型,但没有地址 注意字符常量和只包含一个字…

关于我写过那些MySQL专栏

写在文章开头 这是截至今日写过的文章汇总,对于关注笔者公众号有一段时间的读者都知道,笔者会每周对自己写过的文章整理至相关专栏,以便读者可以按需进行检索阅读。 你好,我叫sharkchili,目前还是在一线奋斗的Java开…

免费开源的微信小程序源码、小游戏源码精选70套!

微信小程序已经成为我们日常的一部分了,也基本是每个程序员都会涉及的内容,今天给大家分享从网络收集的70个小程序源码。其中这些源码包含:小游戏到商城小程序,再到实用的工具小程序,以及那些令人惊叹的防各大站点的小…

Docker数据卷操作 Docker挂载Nginx、MySQL数据卷

容器与数据(容器内文件)耦合: 不便于修改:如果需要修改配置文件,需要进入容器的内部。数据不可复用:容器内的修改对外不可见,无法复用。升级维护困难:如果想要升级容器,…

pinia实现todos

store/todos.js //导入defineStore import {defineStore} from pinia const userTodosStoredefineStore(todos,{ state:()>({// list:[// {id:1,name:吃饭,done:false},// {id:2,name:睡觉,done:true},// {id:3,name:打豆豆,done:false}// ],list:JSON.parse(l…

wireshark利用sshdump自身组件进行远程实时抓包过滤

引言 以前在不了解wireshark可以远程抓包的时间,经常通过tcpdump在远程linux主机将抓包文件保存下来后,然后拖拽入windows中再打开,进行分析查看。 此过程比较繁琐,也不够实时。比较常用的抓包动作是仅出现某特征的报文后&#…

六、VTK创建平面vtkPlaneSource

vtkPlaneSource创建位于平面中的四边形数组 先看看效果图: vtkPlaneSource 创建一个 m x n 个四边形数组,这些四边形在平面中排列为规则平铺。通过指定一个原点来定义平面,然后指定另外两个点,这两个点与原点一起定义平面的两个轴。这些轴不必是正交的 - 因此您可以创建平行…

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

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

Excel导出指定格式

期望 实现 Slf4j RequestMapping(value "/data") RestController public class DataStatController {GetMapping(value "/export", produces MediaType.APPLICATION_OCTET_STREAM_VALUE)public void export(HttpServletResponse response) {final Stri…

docker 存储管理

文章目录 docker 存储管理容器存储方案docker 容器存储解决方案 docker 存储驱动基本概述存储驱动的选择原则主流的 docker 存储驱动docker 版本支持的存储驱动 overlay2 存储驱动OverlayFSoverlay2 存储驱动要求配置 docker 使用 overlay2 驱动 overlay2 存储驱动的工作机制Ov…

mybatis-plus常用使用方法

** mybaits-plus常用使用方法 ** 常用三层分别继承方法 1.1mapper层&#xff08;接口定义层&#xff09;可以用BaseMapper<> 例如&#xff1a; 1.2.里面常用的封装方法有 1.3常用方法介绍 【添加数据&#xff1a;&#xff08;增&#xff09;】int insert(T entity);…

Neo4j 国内镜像下载与安装

Neo4j 5.x 简体中文版指南 社区版&#xff1a;https://neo4j.com/download-center/#community 链接地址&#xff08;Linux版&#xff09;&#xff1a;https://neo4j.com/artifact.php?nameneo4j-community-3.5.13-unix.tar.gz 链接地址&#xff08;Windows&#xff09;&#x…

uml时序图刻画多个线程的活动

使用box关键字圈入不同线程内的组件 使用loop关键字客刻画线程的定时活动 示例

新建一个基于标准库的工程(STM32)

目录 1.新建存放工程的文件夹 2.打开KEIL5软件 3.新建一个本次工程的文件夹 4.添加工程的必要文件 4.1打开STM32的启动文件 ​编辑 4.2&#xff1a; 4.3添加内核寄存器文件 ​编辑 5.回到keil5软件&#xff0c;将刚才复制的那些文件添加到工程中 5.1添加一个启动文件&am…

vue3+naiveUI二次封装的v-model cascader联级选择框

组件 v-model 源码 <template><div class"clw-cascader pt-3"><n-cascaderref"cascader":value"value":title"title"filterableclearable:check-strategy"checkStrategy":label-field"labelField"…

在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作

前言&#xff1a;什么是操作筛选器 操作筛选器是 ASP.NET Core Web API 中的一种过滤器&#xff0c;用于在执行控制器操作&#xff08;Action&#xff09;之前或之后执行一些代码&#xff0c;完成特定的功能&#xff0c;比如执行日志记录、身份验证、授权、异常处理等通用的处…