Echarts柱状图数据过多设置滚动条效果

news2024/11/24 20:07:06

未设置前:

 可以看出数据全部挤压在一起了


设置后:

下面多出一个滚动条,并且鼠标可以拖动数据 


dataZoom: [
			{
				show: true,
				height:8,
				bottom:0,
				startValue: 0, //起始值
				endValue: 5, //结束值
				showDetail: false,
				fillerColor: "rgba(1, 132, 213, 0.4)", // 滚动条颜色
		        borderColor: "rgba(17, 100, 210, 0.12)",
		        backgroundColor: 'rgba(221, 220, 107, .1)',//两边未选中的滑动条区域的颜色
		        handleSize: 0,      //两边手柄尺寸
		        showDetail: false, //拖拽时是否展示滚动条两侧的文字
		        zoomLock: true,         //是否只平移不缩放
		        moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                // minValueSpan: 5,  // 放大到最少几个
                // maxValueSpan: 5,  //  缩小到最多几个
			},
			{
		        type: "inside",  // 支持内部鼠标滚动平移
		        start: 0,
		        // end: 20,
		        startValue: 0, // 从头开始。
		        endValue: 5,  // 最多5个
		        zoomOnMouseWheel: false,  // 关闭滚轮缩放
		        moveOnMouseWheel: true, // 开启滚轮平移
		        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
		    }
		],

 

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

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

相关文章

10 Web全栈 组件化设计

前端架构层次设计 前端技术体系庞大,层级也非常分明,在架构设计领域中不能一概而论,任何应用种类都有自己独立的架构体系。比如在前端开发领域,在框架基础上进行应用构建的开发者锁思考的问题,与在组件库设计方面的开…

科大讯飞狂撒钱,400 万助力 AI 大赛

大家好,我是二哥呀。 6 月 15 日,科大讯飞的星火认知大模型 APP 上线,我第一时间带大家体验了一把,当时可以说是好评如潮。 后续有很多读者,比如说下面这位,私下找到我,让我帮忙审核通过一下他…

SpringCloud入门实战(十)- SpringCloud Bus消息总线

📝 学技术、更要掌握学习的方法,一起学习,让进步发生 👩🏻 作者:一只IT攻城狮 ,关注我,不迷路 。 💐学习建议:1、养成习惯,学习java的任何一个技术…

MySQL表聚合函数

前言 哈喽,各位小伙伴大家好,本篇文章为大家介绍几个MySQL中常用的聚合函数,什么是聚合函数,相信第一次看到这个名词的小伙伴是比较懵的,举个例子,比如说统计表中数据的个数,就可以使用MySQL中提…

软件测试技术分享丨支付测试

支付测试 引言:如今,随着非现金支付手段的不断推广和应用,“非现金社会”正在形成。非现金支付已成为日常生活中不可或缺的伙伴。那么,对于互联网产品来说,支付也是涉及到公司收入的一个重大环节。对于我们测试人员&am…

JavaScript 处理字符串数组数据方法

前端三件套中 JavaScript 就是充电处理业务逻辑的一个角色,在很多情况之下,或像在做项目之中去发起一些数据请求之后待服务器响应回馈给到客户端的时候,对于返回的数据需要进行一个格式的处理,比如有JSON,字符串&#…

Python 集合探索:解密高效数据操作和快速算法的奇妙世界

前言 在 Python 的众多数据结构中,集合(Sets)是一个引人注目且实用的概念。集合提供了一种存储无顺序、唯一元素的数据结构,它们不仅可以帮助我们高效处理数据,还能应用于各种算法和问题。 本博客将带您踏上一段关于…

python 从一个文件夹里面复制 符合要求的文件

记事本格式 import os def copy(src_file, dst_file):import shutil# 执行复制操作shutil.copy2(src_file, dst_file)def main(parent,data,dest_path):_list []for line in open(data, encoding"utf-8"):line line.strip()_list.append(line.split("\t&quo…

渠道归因(二)基于马尔可夫链的渠道归因

渠道归因(二)基于马尔可夫链的渠道归因 在应用当中,序列中的每个点通常映射为一个广告触点,每个触点都有一定概率变成真正的转化。通过这种建模,可以选择最有效,概率最高的触点路径。这种方法需要较多的数…

你知道怎么通过ai绘画图片描述生成图片吗

汤姆: 嘿,听说了吗?有几个特别酷的方法可以通过ai绘画图片描述生成出上面这些惊艳的图像! 玛丽: 真的吗?那听起来好神奇啊!怎么做到的? 汤姆: 其实很简单!你只需要用文字描述你想要的图片&…

POI批量导入和echars图表

下载模板 userList.jsp <a href"downloadUserExcel">下载模板</a>DownloadUserServlet.java /*** 下载*/ WebServlet("/downloadUserExcel") public class DownloadUserServlet extends HttpServlet {protected void doGet(HttpServletReq…

关于环肽试剂:118477-06-8,Cyclo(L-Phe-trans-4-hydroxy-L-Pro),知识普及

●中文名&#xff1a;环(L-苯丙氨酰-反式-4-羟基-L-脯氨酸) ●英文名&#xff1a;Cyclo(L-Phe-trans-4-hydroxy-L-Pro) 西安凯新生物科技有限公司供应的​各种环肽&#xff0c; 任何结构的环肽&#xff0c;可以进行相应的定制服务。环二肽&#xff1a; 2000/g or 3000/g 纯度…

idea 自带git down分支出现莫名其妙的文件

是个坑 大部分场景下&#xff0c;会先down master 再去down 对应分支 例如dev 会出现一种内容&#xff0c;master里面有但dev没有当前文件&#xff0c;直接报错而且引入包排查没任何问题 解决方式&#xff1a; 用tortoiseGit 直接选对应分支。idea目前2022不支持

uniapp - [全端兼容] 多选弹框选择器,弹框形式的列表多选选择器组件插件(底部弹框式列表多选功能,支持数据回显、动态数据、主题色等配置)

前言 网上的教程都太乱了,各种不兼容且 BUG 太多,注释也没有很难进行改造。 本文 实现了 uniapp 全端兼容的弹框多选选择器,从底部弹出列表项进行多选(可回显已选中和各种主题色、样式配置), 您可以直接复制代码,稍微改改样式就能用了。 如下图所示,数据列表(支持接口…

关于找不到msvcp120.dll,无法继续执行代码的解决方案

小伙伴们知道msvcp120.dll是什么文件吗?那么今天小编就来讲解电脑出现msvcp120.dll丢失的解决方法介绍&#xff0c;希望能够帮助到大家呢。 msvcp120.dll 是windows系统中必备的动态链接库文件。msvcp120.dll可以解决某些大型游戏、程序由于vs2010编译系统中缺失此dll的问题。…

【电子量产工具】大纲分析

前言 最近看了 电子量产工具 这个项目&#xff0c;本专栏是对该项目的一个总结。 项目大纲&#xff1a; 可以看到上面的框图&#xff0c;我们可以分为三大部分&#xff1a; 从最下面的 第 1 层开始。这是整个项目的最底层&#xff0c;主要负责处理数据和逻辑&#xff0c;与板…

Docker发布JAVA vhr微人事后端(确保打包没问题再发布)

本文代码来源于&#xff08;感谢作者&#xff09; GitHub - lenve/vhr: 微人事是一个前后端分离的人力资源管理系统&#xff0c;项目采用SpringBootVue开发。1.创建DockerFile文件 创建mail文件夹 创建web文件夹 以下为mail dockerfile FROM java:8 Add *.jar /app/app.ja…

算法chatgpt回答

算法 红黑树和AVL树区别 红黑树和AVL树区别

Windows系统提示丢失xlive.dll怎么办?

xlive.dll微软的动态链接库&#xff08;DLL&#xff09;的一部分&#xff0c;当它被删除或者损坏时&#xff0c;会出现错误消息&#xff0c;提示xlive.dll丢失或未找到。那么Windows系统提示丢失xlive.dll怎么办呢&#xff1f; Windows计算机丢失xlive.dll如何修复&#xff1f;…

云原生之深入解析Docker容器的核心Cgroups的相关概念和使用实现

一、Cgroups 简介 Cgroups 是 Linux 系统内核提供的一种机制&#xff0c;这种机制可以根据需求将一些列系统任务机器子任务整合或分离到按资源划分登记的不同组内&#xff0c;从而为系统资源管理提供一个的框架。简单地说&#xff0c;Cgroups 可以限制、记录任务组所使用的物理…