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

未设置前:

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


设置后:

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


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  // 鼠标移动能触发数据窗口平移
		    }
		],

 

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

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

相关文章

(5)深度学习学习笔记-多层感知机

文章目录 多层感知机和激活函数代码来源 多层感知机和激活函数 通过在网络中加入一个或多个隐藏层来克服线性模型的限制,使其能处理更普遍的函数关系类型。最简单的方法是将多个全连接层堆叠在一起。每一层都输出到上面的层,直到生成最后的输出&#xf…

springboot开启热部署

第一步引入spring-boot-devtools依赖 <!--热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><!--默认false改依赖是否可以传递&…

虚幻引擎(UE5)-大世界分区WorldPartition教程(三)

文章目录 前言LevelInstance的使用1.ALevelInstance2.选择Actor创建关卡3.运行时加载LevelInstance 总结 上一篇&#xff1a;虚幻引擎(UE5)-大世界分区WorldPartition教程(二) 前言 在制作大关卡时&#xff0c;可能会遇到这样一种情况&#xff0c;就是关卡中的某些Actor会重复…

Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

1. bug重现 由于项目不便展示&#xff0c;因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 2. 调试 源码调试时发现下拉菜单是直接放在body 元素里&#xff0c;这时候希望它不要直接放在body里&#xff0c; 查阅文档看到这两个属性&#x…

量化研究丨全市场多空情绪

量化策略开发&#xff0c;高质量社群&#xff0c;交易思路分享等相关内容 大家好&#xff0c;我是Le Chiffre 今天我们简单的介绍一个天风期货工具复现&#xff0c;如下图所示&#xff1a; 其实我只是关注了公众号&#xff0c;但是从来没有认真看过他们的研究。在5月底的时候&…

计算机网络速成

更好的阅读体验 \color{red}{\huge{更好的阅读体验}} 更好的阅读体验 因特网概述 网络、互联网和因特网 网络&#xff1a;将多个计算机或计算机网络通过通信线路连接起来&#xff0c;使得它们可以相互通信和交换信息的系统。由若干节点&#xff08;Node&#xff09;和连接这些…

课程20:API项目重构

🚀前言 本文是《.Net Core从零学习搭建权限管理系统》教程专栏的课程(点击链接,跳转到专栏主页,欢迎订阅,持续更新…) 专栏介绍:以实战为线索,基于.Net 7 + REST + Vue、前后端分离,不依赖任何第三方框架,从零一步一步讲解权限管理系统搭建。 专栏适用于人群:We…

神经网络初谈

文章目录 简介神经网络的发展历程神经网络的初生神经网络的第一次折戟神经网络的新生&#xff0c;Hinton携BP算法登上历史舞台命途多舛&#xff0c;神经网络的第二次寒冬神经网络的重生&#xff0c;黄袍加身&#xff0c;一步封神神经网络的未来&#xff0c;众说纷纭其他时间点 …

Cisco ISR 4000 Series IOS XE Release Dublin-17.11.1a ED

Cisco ISR 4000 Series IOS XE Release Dublin-17.11.1a ED 思科 4000 系列集成服务路由器 请访问原文链接&#xff1a;https://sysin.org/blog/cisco-isr-4000/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 思科 4000 系列…

计算机视觉:分割一切AI大模型segment-anything

1 segment-anything介绍 Segment Anything Model (SAM)来源于Facebook公司Meta AI实验室。据Mata实验室介绍&#xff0c;SAM 已经学会了关于物体的一般概念&#xff0c;并且它可以为任何图像或视频中的任何物体生成 mask&#xff0c;甚至包括在训练过程中没有遇到过的物体和图…

面对“神奇的甲方”:如何应对匪夷所思的需求

在工作中&#xff0c;我们常常会遇到一些“神奇的甲方”&#xff0c;他们总是能给我们带来匪夷所思甚至无厘头的需求。本文将分享作者的经历&#xff0c;并提供一些建议&#xff0c;帮助读者应对这些“无理的需求”。 文章目录 方向一&#xff1a;分享那些你遇到的无理需求方向…

简单的手机记事本怎么把内容标记为完成状态?

很多人平时会在手机记事本上记录一些自己身边需要记住的事情&#xff0c;有的事情做完之后不想删除&#xff0c;又想要和未完成的内容区分开&#xff0c;那么这种情况下可以将它标记为已完成状态。简单的手机记事本怎么把内容标记为完成状态呢&#xff1f;以iPhone手机端敬业签…

【应用笔记】CW32 电容式触摸按键设计指南

前言 CW32 电容式触摸按键设计指南向客户提供一种利用 CW32 内部资源结合软件编程实现电容式触摸按键有效 触摸检测的方法。本指南的内容重点在于工作原理、软件检测过程以及调试指引。 利用芯源半导体的 CW32 系列小规模 MCU 的 IO、比较器、定时器、高速高精度内置 RC 时钟…

技术分享| 融合通讯的架构介绍

在融合通讯中&#xff0c;我们经常听到如下一些术语&#xff1a;MCU服务&#xff0c;SFU架构&#xff0c;MESH架构&#xff0c;星形网络等等。很多客户听到这些数据都是一脸雾水&#xff0c;经常说我们就是要一个可以把多种设备拉到同一个会议中&#xff0c;怎么搞这么复杂。今…

Web安全-Godzilla(哥斯拉)Webshell管理工具使用

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 工具下载地址02 运行环境03 工具介绍04 使用案例 01 工具下载地址 https://github.com/BeichenDream/Godzilla点击页面右侧"releases"&#xff0c;进入工具的版本下载页面。 在个人终端…

[Qt 教程之Widgets模块] —— QFontComboBox 字体选择器

Qt系列教程总目录 文章目录 3.2.1 创建 QFontComboBox3.2.2 成员函数1. 书写系统2. 字体过滤器3. 当前字体4. 信号 该控件用于选择字体&#xff0c;在一些软件中经常有类似控件&#xff0c;如下&#xff1a; Microsoft Office&#xff1a; Photoshop&#xff1a; QFontComboB…

QT调用glog日志流程

glog日志库是Google开源的轻量级的日志库&#xff0c;平时在开发过程中经常要使用到日志&#xff0c;本篇记录Qt项目使用glog日志库的记录。 1.首先下载cmake&#xff0c;Download | CMake 安装设置环境变量&#xff0c;检查安装情况 2.下载glog源码 git clone https://git…

JMeter录制HTTPS脚本解决办法

目录 前言&#xff1a; 背景 解决方法 前言&#xff1a; 在使用JMeter录制HTTPS脚本时&#xff0c;可能会遇到一些问题&#xff0c;例如SSL证书错误或请求失败等。解决这些问题的一种常见的方法是通过安装并信任服务器的SSL证书来解决。 背景 在对某项目进行脚本录制的时…

Django框架-5

路由系统 通过URL&#xff08;Uniform Resource Locator&#xff0c;统一资源定位符&#xff09;可以访问互联网上的资源——用户通过 浏览器向指定URL发起请求&#xff0c;Web服务器接收请求并返回用户请求的资源&#xff0c;因此可以将URL视为用户与服务器之间交互的桥梁。 …

Scrapy框架之MongoDB通过配置文件管理参数--Linux安装MongoDB--图形管理工具

目录 MongoDB通过配置文件 问题 解决方案 步骤 提示 Linux安装MongoDB 环境 下载依赖与安装包 解压安装 MongoDB GUI管理工具 独立软件GUI软件 Robo 3T使用 VSCode集成GUI插件 MongoDB通过配置文件 问题 启动MongoDB时&#xff0c;编写参数太麻烦 解决方案 通过配…