echarts中如何给柱状图增加滚动条

需求:当后台传递过来的数据过多的时候 页面的柱图就会很拥挤 如下图:

 所以我们需要有一个横向的滚动条,让所有的柱子都能够展示

1.echarts中有一个dataZoom属性 可以给图形增加一个横向的滚动条

 dataZoom:[  
                    {
                        type: 'slider', //滑动条型数据区域缩放组件
                        realtime: true, //拖动时,是否实时更新系列的视图。如果设置为 false,则只在拖拽结束的时候更新。
                        height: 4,
                        endValue: 13,  //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
                        fillerColor:ref == 'zhu1' ? " rgba(0,0,0,0.3)" :"transparent" , // 滚动条颜色
                        borderColor: "transparent",
                        handleSize:0, // 两边手柄尺寸
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top:'96%', //组件离容器上侧的距离
                        zoomLock:true, // 是否只平移不缩放
                    },
                    {
                        
                        type: "inside",  //内置型数据区域缩放组件
                        endValue: 13,  // 最多14个
                        zoomOnMouseWheel: false,  // 关闭鼠标滚轮缩放
                        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
                        moveOnMouseMove: true  // 开启鼠标移动窗口平移
                        }
                    ],

最终效果:

2.当图像是纵向的时候 我们就需要增加一个纵向的滚动条  如图

 dataZoom: [//滚动条
                {
                    yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: true,//是否显示滑动条,不影响使用
                    weight:2,
                    type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    // startValue: value.length-1, // 从头开始。
                    // endValue: (value.length-1)+4, // 一次性展示5个。
                    startValue: 0, // 从头开始。
                    endValue: 4,
                    zoomOnMouseWheel: false,  // 关闭滚轮缩放
                    moveOnMouseWheel: true, // 开启滚轮平移
                    moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                },
               {
                   yAxisIndex: 0,//这里是从X轴的0刻度开始
                    show: true,//是否显示滑动条,不影响使用
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    realtime: false,
                    fillerColor: " rgba(0,0,0,0.15)", // 滚动条颜色
                    borderColor: "transparent",
                    zoomLock:false, // 是否只平移不缩放
                    handleSize:0, // 两边手柄尺寸
                    width:this.getFontSize(8),
                    heigh:this.getFontSize(8),
                    bottom: this.getFontSize(25),
                    backgroundColor: 'transparent',
                    // borderRadius: 5,
                    brushSelect:false,
                    showDetail:false,
                    showDataShadow:false,
                }
            ],

 注意:这个属性是写在option里面的

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

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

相关文章

【小吉带你学Git】idea操作(2)_版本和分支的相关操作

🎊专栏【Git】 🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【Counting Stars 】 欢迎并且感谢大家指出小吉的问题🥰 文章目录 🍔版本⭐首先创建一个项目⭐添加暂存区⭐提交本地库&#x1f33…

Redis键值设计

1.1、优雅的key结构 Redis的Key虽然可以自定义,但最好遵循下面的几个最佳实践约定: 遵循基本格式:[业务名称]:[数据名]:[id]长度不超过44字节不包含特殊字符 例如:我们的登录业务,保存用户信息,其key可以…

Linux 中利用设备树学习Ⅳ

系列文章目录 第一章 Linux 中内核与驱动程序 第二章 Linux 设备驱动编写 (misc) 第三章 Linux 设备驱动编写及设备节点自动生成 (cdev) 第四章 Linux 平台总线platform与设备树 第五章 Linux 设备树中pinctrl与gpio(…

24届近5年东华大学自动化考研院校分析

今天给大家带来的是东华大学控制考研分析 满满干货~还不快快点赞收藏 一、东华大学 学校简介 东华大学(Donghua University),地处上海市,是教育部直属全国重点大学,国家“双一流”、“211工程”建设高校…

HBase-写流程

写流程顺序正如API编写顺序,首先创建HBase的重量级连接 (1)读取本地缓存中的Meta表信息;(第一次启动客户端为空) (2)向ZK发起读取Meta表所在位置的请求; (…

力扣62.不同路径(动态规划)

/*** 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。* 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。* 问总共有多少条不同的路径? *…

elevation mapping学习笔记3之使用D435i相机离线或在线订阅点云和tf关系生成高程图

文章目录 0 引言1 数据1.1 D435i相机配置1.2 协方差位姿1.3 tf 关系2 离线demo2.1 yaml配置文件2.2 launch启动文件2.3 数据录制2.4 离线加载点云生成高程图3 在线demo3.1 launch启动文件3.2 CMakeLists.txt3.3 在线加载点云生成高程图0 引言 elevation mapping学习笔记1已经成…

SSL VPN

SSL工作过程 SSL(Secure Sockets Layer,安全套接层)是一种常用的加密协议 客户端发起连接请求:客户端向服务器发送连接请求,请求建立一个安全的SSL连接。 服务器响应:服务器接收到客户端的连接请求后&…

Linux网络服务之自动装机(PXE+KICKSTART)详解

自动装机 一、启动操作系统的方式1.1 系统装机的三种引导方式1.2 系统安装过程1.3 三大文件1.4 如何实现自动装机? 二、PXE2.1 PXE的简介和优点2.2 实现PXE的前提条件2.3 PXE实现过程2.5 要安装的服务2.6 实现PXE2.6.1 前置准备2.6.2 安装并配置DHCP2.6.3 安装并配置…

Vue3 第二节 Vue3的响应式

1.Vue3的响应式原理 2.ref函数和reactive函数的对比 3.setup注意点 一.Vue3的响应式原理 1.Vue2.x中的响应式原理 ① 实现原理 对象类型:通过Object.defineProperty() 对属性的读取,修改进行拦截(数据劫持)数组类型&#xf…

ES6 - 对象新增的一些常用方法

文章目录 1,Object.is()2,Object.asign()3,Object.getOwnPropertyDescriptors()4,Object.setPrototypeOf()和getPrototypeOf()5,Object.keys()、values() 和 entries()6,Object.fromEntries()7,…

【零基础??天速成 Java】Day2 - 初识面向对象

目录 前言 1. 可变参数的使用 2. 构造器 3. 包 1、包的创建 2、包的使用 3、包的命名规范 4、常用的包 5. 访问修饰符 6. 继承 7. super 关键字 8. 方法重写 Override 写在最后: 前言 我的 java 基础学习,跟的是韩顺平的 java 课程~ 本篇…

【腾讯云Cloud Studio实战训练营】React 快速构建点餐页面

前言: Cloud Studio是一个在线的云集成开发环境(IDE),可以让开发人员在浏览器中轻松地开发、测试、调试和部署应用程序。它提供了基于云的计算资源和工具,例如代码编辑器、编译器、调试器、版本控制系统和项目管理工具…

Spring Boot2.xx开启监控 Actuator

spring boot actuator介绍 Spring Boot包含许多其他功能,可帮助您在将应用程序推送到生产环境时监视和管理应用程序。 您可以选择使用HTTP端点或JMX来管理和监视应用程序。 审核,运行状况和指标收集也可以自动应用于您的应用程序。 总之Spring Boot Ac…

8月8日上课内容 研究nginx组件rewrite

location 匹配uri location 匹配的规则和优先级。(重点,面试会问,必须理解和掌握) nginx常用的变量,这个要求掌握 rewrite:重定向功能。有需要掌握,有需要理解的。 location匹配:…

用Vue实现页面访问拦截

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 页面访问拦截 1.创建axios实例 2.添加拦截器 3.全局前置守卫 可选的第三个参数 next 总结&#xff1a…

状态模式(C++)

定义 允许一个对象在其内部状态改变时改变它的行为。从而使对象看起来似乎修改了其行为。 应用场景 在软件构建过程中,某些对象的状态如果改变,其行为也会随之,而发生变化,比如文档处于只读状态,其支持的行为和读写…

使用 Python 和 Flask 构建简单的 Restful API 第 1 部分

一、说明 我将把这个系列分成 3 或 4 篇文章。在本系列的最后,您将了解使用flask构建 restful API 是多么容易。在本文中,我们将设置环境并创建将显示“Hello World”的终结点。 我假设你的电脑上安装了python 2.7和pip。我已经在python 2.7上测试了本文…

无涯教程-Perl - fcntl函数

描述 该函数是系统fcntl()函数的Perl版本。使用FILEHANDLE上的SCALAR执行FUNCTION指定的功能。 SCALAR包含函数要使用的值,或者是任何返回信息的位置。 语法 以下是此函数的简单语法- fcntl FILEHANDLE, FUNCTION, SCALAR返回值 该函数返回0,但如果fcntl()的返回值为0,则返…

【Go语言】Golang保姆级入门教程 Go初学者chapter2

【Go语言】变量 VSCode插件 setting的首选项 一个程序就是一个世界 变量是程序的基本组成单位 变量的使用步骤 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zuxG8imp-1691479164956)(https://cdn.staticaly.com/gh/hudiework/imgmain/image-20…