echarts 图表设置 滚动条

效果图: 

代码实现: 

第一种方式:

通过 dataZoom 属性缩放进行配置滚动条。

//给x轴设置滚动条
dataZoom: [{start:0,//默认为0end: 100-1500/31,//默认为100type: 'slider',show: true,xAxisIndex: [0],handleSize: 0,//滑动条的 左右2个滑动条的大小height: 10,//组件高度left: '10%', //左边的距离right: '10%',//右边的距离bottom: 26,//右边的距离borderColor: "#000",fillerColor: '#269cdb',borderRadius:5,backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色showDataShadow: false,//是否显示数据阴影 默认autoshowDetail: false,//即拖拽时候是否显示详细数值信息 默认truerealtime:true, //是否实时更新filterMode: 'filter',},//1.横向使用滚动条{type: 'slider',//有单独的滑动条,用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示show: true,//是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。start: 0,//数据窗口范围的起始百分比0-100end: 50,//数据窗口范围的结束百分比0-100xAxisIndex: [0],// 此处表示控制第一个xAxis,设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一,三个;xAxisIndex: 2 ,表示控制第二个。yAxisIndex属性同理bottom:-10 //距离底部的距离},//2.在内部可以横向拖动{type: 'inside',// 内置于坐标系中start: 0,end: 30,xAxisIndex: [0]},//3.纵向使用滚动条{type: 'slider',show: true,yAxisIndex: [0],//设置组件控制的y轴left: '93%',//距离左侧的距离 可以使百分比,也可以是像素 left: '30'(30像素)start: 29,end: 36},//4.在内部可以纵向拖动{type: 'inside',yAxisIndex: [0],start: 29,end: 36}
],

第二种方式:

通过动态获取数据长度,使用 getDom() 方法动态设置容器的高度/宽度,从而产生滚动条

<div id="excellentProjectBar" :style="{height:barHeight+'rem'}"></div>// 删除已存在的表格
echarts.dispose(document.getElementById('excellentProjectBar'));
// 基于准备好的dom,初始化echarts实例
zhu = echarts.init(document.getElementById('excellentProjectBar'));
vm.barHeight=2.75;
vm.barHeight = option.yAxis.data.length > 5 ? (option.yAxis.data.length/5)* vm.barHeight: "2.75";zhu.getDom().style.height = vm.barHeight * 100 + "px";
zhu.getDom().childNodes[0].style.height = vm.barHeight * 100 + "px";
zhu.resize(); 
zhu.setOption(option);

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql的instr()函数用法详解

最近接手了一个大型老项目&#xff0c;用到的jfinal技术&#xff0c;后端大部分都是拼写的sql&#xff0c;对一些sql函数不太理解的我算是一个挑战&#xff0c;也是一个进步的很大空间。 今天来说下instr这个函数 首先看下我们的表数据 我们先执行&#xff1a; SELECT * fro…

《Linux运维实战:Docker基础总结》

一、简介 1、docker的基本结构是什么&#xff0c;包含哪些组件&#xff1f; docker的基本机构是c/s模式&#xff0c;即客户端/服务端模式。 由docker客户端和docker守护进程组成。docker客户端通过命令行或其它工具使用docker sdk与docker守护进程通信&#xff0c;发送容器管理…

Qt 6. 其他类调用Ui中的控件

1. 把主类指针this传给其他类&#xff0c;tcpClientSocket new TcpClient(this); //ex2.cpp #include "ex2.h" #include "ui_ex2.h"Ex2::Ex2(QWidget *parent): QDialog(parent), ui(new Ui::Ex2) {ui->setupUi(this);tcpClientSocket new TcpClient…

Redis过期键删除策略

如果一个键过期了&#xff0c;那么它什么时候会被删除呢? 这个问题有三种可能的答案&#xff0c;它们分别代表了三种不同的删除策略&#xff1a; 1.定时删除&#xff1a;在设置键的过期时间的同时&#xff0c;创建一个定时器(timer)&#xff0c;让定时器在键的过期时间来临时…

Spring 创建和使用

文章目录 创建 Spring 项目1. 创建一个Maven项目2. 添加 Spring 框架支持3. 添加启动类 存储 Bean 对象创建一个 Bean将 Bean 注册到容器 获取并使用 Bean 对象创建 Spring 上下文获取指定的 Bean 对象使用 Bean 对象 getBean() 的用法总结 创建 Spring 项目 1. 创建一个Maven…

数据结构----结构--线性结构--链式存储--链表

数据结构----结构–线性结构–链式存储–链表 1.链表的特点 空间可以不连续&#xff0c;长度不固定&#xff0c;相对于数组灵活自由 搜索&#xff1a; 时间复杂度O(n) 增删: 头增头删时间复杂度O(1) 其他时间复杂度为O(n) 扩展&#xff1a;单向循环链表的特性 从任意节…

zookeeper+kafka分布式消息队列集群的部署

目录 一、zookeeper 1.Zookeeper 定义 2.Zookeeper 工作机制 3.Zookeeper 特点 4.Zookeeper 数据结构 5.Zookeeper 应用场景 &#xff08;1&#xff09;统一命名服务 &#xff08;2&#xff09;统一配置管理 &#xff08;3&#xff09;统一集群管理 &#xff08;4&…

C语言有关文件的操作

打开文件与关闭文件 在编写代码时&#xff0c;我有一个习惯是“保证一一对应”。 写下代码fopen()之后&#xff0c;还没有写对文件进行增删查改等操作的代码&#xff0c;先立刻写上fclose()&#xff0c;避免忘记关闭FILE* fd的情况。 不关闭fd&#xff0c;在fopen()次数较少的…

SAP度量单位转换功能

针对今天N2项目提出业务痛点&#xff1a;物料30011110的基本单位是KG&#xff0c;在XXX的BOM里单位是G&#xff0c;由于物料没配单位转换关系&#xff0c;但系统又能正常进行转换&#xff0c;开发需要技术支持。 经专项调查&#xff0c;G和KG的转换是SAP相同量纲转换标准功能&…

限流式保护器在高校宿舍电气防火的应用

安科瑞 华楠 引言 14日早晨6时10分左右&#xff0c;上海商学院徐汇校区学生宿舍楼发生火灾&#xff0c;4名女生从六楼宿合阳台跳下逃生当场死亡&#xff0c;酿成近年来惨烈的校园事故。宿舍火灾初步判断缘起于寝室里使用热得快导致电器故障并将周围可燃物引燃。 任何条生命都是…

Kafka与Zookeeper版本对应关系

文章目录 了解版本对应Kafka安装包Kafka源码包 了解 比如&#xff1a; kafka_2.11-1.1.1.jar包 其中2.11表示的是Scala的版本&#xff0c;因为Kafka服务器端代码完全由Scala语音编写。”-“后面的1.1.1表示的kafka的版本信息。遵循一个基本原则&#xff0c;Kafka客户端版本和服…

DC-8靶机

DC-8官网地址 信息收集 靶机MAC&#xff1a; 00:0C:29:3A:46:A1 主机发现 nmap -sP 192.168.80.0/24端口扫描 nmap -A -p- 192.168.80.142访问80端口 点击页面能点击的地方&#xff0c;发现每点击一个链接&#xff0c;地址栏的?nid后面的数字就会变 尝试在数字后面加个 引…

virtuoso 打开时没有原装的库

如果virtuoso打开没有下列库&#xff0c;一般是virtuoso的启动路径下的cds.lib文件配置错误 打开启动路径下的cds.lib文件&#xff0c;输入 SOFTINCLUDE “cadence安装路径”/IC617/share/cdssetup/cds.lib

快速解决IDEA中类的图标变成J,不是C的情况

有时候导入新的项目后&#xff0c;会出现如下情况&#xff0c;类的图标变成J&#xff0c;如图&#xff1a; 直接上解决方法: 找到项目的pom.xml&#xff0c;右键&#xff0c;在靠近最下方的位置找到Add as Maven Project&#xff0c;点击即可。 此时&#xff0c;一般类的图标就…

nginx实战

文章目录 nginx实战安装环境 实战主要学习静态网站配置基于端口的多虚拟主机访问日志 nginx代理服务 nginx实战 linux下如何安装一个工具 yum工具安装&#xff0c;自动下载nginx&#xff0c;且安装到固定的位置 源代码编译安装&#xff0c;更适合于专业的&#xff0c;企业服务…

任务12、Quality指令加持,Midjourney生成电影级数码作品

12.1 任务概述 本次实验任务旨在帮助你掌握Midjourney AI绘画中的Quality指令。通过深入介绍Quality指令的概念和作用,我们将解释为什么它在绘画中至关重要。通过测试不同的Quality参数对绘画效果的影响,并提供实战演示,你将学会如何在Midjourney中设置Quality参数以达到更…

MFC创建和使用OCX控件

文章目录 MFC建立OCX控件注册OCX控件与反注册使用Internet Explorer测试ocx控件OCX控件添加方法OCX控件添加事件Web使用OCX控件MFC使用OCX控件使用OCX控件调用ocx的功能函数对ocx的事件响应OCX控件调试工具tstcon32.exe加载ocx控件使用tstcon32.exe调试ocxMFC建立OCX控件 新建…

Q-Vision+Kvaser CAN/CAN FD/LIN总线解决方案

智能联网技术在国内的发展势头迅猛&#xff0c;随着汽车智能化、网联化发展大潮的到来&#xff0c;智能网联汽车逐步成为汽车发展的主要趋势。越来越多整车厂诉求&#xff0c;希望可以提供本土的测量软件&#xff0c;特别是关于ADAS测试。而Softing中国推出的Q-Vision软件不仅可…

PyCharm新手入门指南

安装好Pycharm后&#xff0c;就可以开始编写第一个函数&#xff1a;Hello World啦~我们就先来学习一些基本的操作&#xff0c;主要包含新建Python文件&#xff0c;运行代码&#xff0c;查看结果等等。 文章主要包含五个部分&#xff1a; 一、界面介绍 主要分为菜单栏、项目目录…

本地开发 npm 好用的http server、好用的web server、静态服务器

好用的web server总结 有时需要快速启动一个web 服务器&#xff08;http服务器&#xff09;来伺服静态网页&#xff0c;安装nginx又太繁琐&#xff0c;那么可以考虑使用npm serve、http-server、webpack-dev-server。 npm serve npm 的serve可以提供给http server功能&#…