echarts 柱形图 Y轴数据多,鼠标滚动显示数据,不缩放

news2024/11/26 0:36:57

坐标轴数据太多,只能滚动显示,滚动的时候,不想缩放,单纯平移就好。

滚动后第二屏的截图

 

没滚动的,第一屏的截图

 

option = {
          title: {
            // text: 'World Population',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          axisLine: {
            show: false,
          },

          xAxis: {
            type: 'value',
            min:0,
            max:25, //指定一个x轴的最大值,才会再滚动到第二屏的时候柱形长度不变长
          },
          dataZoom: [
            {
              type: 'inside', // 支持内部鼠标滚动平移
              start: 25,
              end: 100,
              yAxisIndex: 0,
              zoomOnMouseWheel: false, // 关闭滚轮缩放
              moveOnMouseWheel: true, // 开启滚轮平移
              moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
            },
          ],
          yAxis: {
            type: 'category',
            axisTick: {
              show: false,
            },
            minInterval: 1,
            axisLine: {
              show: false,
            },
            // min: 1, // 设置 y 轴显示的最小值
            // max: 50, // 设置 y 轴显示的最大值
            data: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K","L", "M", "N", "O", "P"],
          },

          series: [
            {
              // name: '2011',
              type: 'bar',
              data: [2, 1,1, 1, 1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 25],
              boundaryGap: false, // 关闭坐标轴两端的空白
              // min: , // 设置 y 轴显示的最小值
              // max: 11, // 设置 y 轴显示的最大值
              barWidth: 10, // 柱条的宽度,不设时自适应
              itemStyle: {
                color: 'rgba(147,98,246,1)',
              },
              label: {
                show: true,
                position: 'right',
                color: 'rgba(147,98,246,1)',
                fontSize: 14,
              },
            },
          ],
        }

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

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

相关文章

15 年开源路,从大厂搬砖到创业挖坑

上个月回蚂蚁做了一场有关开源的分享,让我讲讲离开公司自己做开源创业后的感想。 正好借着端午节的时间,也更完整地回顾一下自己职业生涯 15 年来和开源结缘的经历。 邂逅 Cappuccino 08 年参加工作后,第一个投入精力的开源项目是 Objective…

安装Home Assistant

文章目录 前言1. 安装Home Assistant2. 配置Home Assistant3. 安装cpolar内网穿透3.1 windows系统3.2 Linux系统3.3 macOS系统 4. 映射Home Assistant端口5. 公网访问Home Assistant6. 固定公网地址6.1 保留一个固定二级子域名6.2 配置固定二级子域名 转载自远程穿透的文章&…

网络安全 | 密码基础知识介绍

概述 密码介绍 安全问题 保密性:对发送的消息进行获取完整性:对发送的消息进行篡改身份伪造:对发送的主体身份进行篡改,a发的消息,篡改为b发的行为抵赖:对发送的消息进行否认,丧失行为的可追…

VulnHub打靶记录——easy_cloudantivirus

靶机下载地址:https://www.vulnhub.com/entry/boredhackerblog-cloud-av,453/ 将靶机设置为NAT模式并启动。 主机发现&信息收集 nmap扫描本地网段 nmap -sn 192.168.50.1/24136是kali,137就是我们的目标靶机。 接着收集靶场信息: n…

【 Android11 WiFi开发 二 】WiFi连接、断开

前言 上篇文章介绍了WiFi列表的获取与展示和WiFi状态改变的广播监听,本篇将介绍介绍对WiFi的操作,连接、忘记,查看已连接的WiFi信息等。 相关文章 1、【 Android11 WiFi开发 一 】WiFi列表获取与展示 说明 老规矩,先把WiFi连接和…

卷积基础知识总结

卷积是卷积神经网络中的核心模块,卷积的目的是提取输入图像的特征,如下图所示,卷积可以提取图像中的边缘特征信息。卷积也称为过滤器,即Filter 1 卷积的计算方法 卷积运算本质上就是在滤波器和输入数据的局部区域间做点积 注意…

MyBatis介绍与安装下载

目录 MyBatis 介绍 MyBatis 主要特点 MyBatis 下载 创建 Maven 工程 IDEA 连接数据库 导入JAR文件到项目 MyBatis 介绍 MyBatis是一种开源的Java持久化框架,用于将SQL数据库访问和映射任务与Java对象之间的映射分离。它提供了一种简单的方式来对数据库进行操…

消息中间件的首选之一:探索RocketMQ的优势和特性

​​​​​​​ 1、简介 RocketMQ 是一款开源的分布式消息队列系统,由阿里巴巴集团开发并开源。它是为了满足大规模分布式系统中的消息通信和异步解耦需求而设计的,具有高吞吐量、低延迟、可靠性强等特点。下面将详细介绍 RocketMQ 的架构、组件和关键特…

【网络进阶】Posix API与网络协议栈(三)

文章目录 1. 网络攻击和POSIX API与网络协议栈的关系1.1 网络攻击的基本概念和它们对协议栈的影响1.2 分布式拒绝服务(DDoS)攻击和网络协议栈1.3 地址解析协议(ARP)欺骗和POSIX API 2. 网络协议栈的理解和划分2.1 OSI七层模型2.2 …

AI 边缘计算控制器GEAC91

1 产品概览 产品概览 GEAC91 AI边缘计算控制器是一款基于 NVIDIA Jetson AGX Xavier处理 器、面向智能边缘计算应用场景的解决方案。 GEAC91控制器具有 控制器具有 GMSL2、 千兆网口CAN总线、 RS232、RS422、 USB3.0、USB2.0、SD卡等丰富的外设接口 ,支持常见激光雷…

记录--不定高度展开收起动画 css/js 实现

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 不定高度展开收起动画 最近在做需求的时候,遇见了元素高度展开收起的动画需求,一开始是想到了使用 transition: all .3s; 来做动画效果,在固定高度的情况下&#xf…

霍尔闭环电流传感器在电动观光旅游车上的应用

摘要:本文介绍了基于霍尔闭环原理,即磁平衡式原理的电流传感器在电动观光旅游车上的使用方法,替代传统的霍尔器件,较好的解决了电动车行业现有霍尔传感器的基本问题,在稳定性上更加优越。 关键词:霍尔闭环…

2022 年首届“钉钉杯”大学生大数据挑战赛B题:航班数据分析与预测——国奖论文代码分享

2023年的钉钉杯挑战赛马上要来了~这里给大家分享一下去年的国奖论文思路与代码 摘要: 随着民航事业的迅速发展 , 飞机出行已成为未来发展的一种必然趋势,然而近年来, 航班延误现象频频发生,成为困扰机场和航空公司的难题。对航班…

Idea项目application.properties配置文件默认GBK,如何设置默认为UTF-8编码

简述:java程序在项目中一般设置都是UTF-8编码格式,但是项目application.properties 文件默认是GBK,需要手工修改默认编码格式 步骤: file->setting->editor->file encodings下,勾选transparent native-to-ascll conver…

AR远程协助平台运用到建筑领域能带来哪些帮助?

随着科技的不断发展,远程协同培训已经成为了一种越来越受欢迎的学习方式。在建筑施工领域中,这种学习方式同样具有很大的应用价值。本文将探讨AR远程协助平台在建筑施工中的应用。 首先,AR远程协助平台可以提高建筑施工的效率和质量。传统的…

Java学习之Varargs机制

概述 Varargs,即variable number of arguments,variable arguments。中文一般译为,可变长度参数,或简称可变参数,参数具体来说是形参。 自JDK5引入,借助这一机制,可以定义能和多个实参相匹配的…

基于Java+SpringBoot+Vue的流浪动物救助平台设计与实现

博主介绍:✌擅长Java、微信小程序、Python、Android等,专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟 Java项目精品实战案…

【前端|CSS系列第2篇】CSS零基础入门之常用样式属性

欢迎来到CSS零基础入门系列的第二篇博客!作为前端开发的关键技术之一,CSS(层叠样式表)能够为网页添加各种样式和布局效果。对于前端零基础的小白来说,了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解…

基本的组合门电路、以及二极管、三极管(详细讲解)

基本门电路、二极管、三极管 1.基本的组合门电路1.1 与门(AND Gate):2.2 或门(OR Gate):1.3 非门(NOT Gate):1.4 异或门(XOR Gate): 2…

chatgpt赋能python:Python面向对象和面向过程编程

Python面向对象和面向过程编程 Python是一种高级编程语言,可以使用不同的编程风格进行开发。本篇文章将讨论Python面向对象和面向过程编程风格的概念、差异和优缺点。 什么是面向对象编程? 面向对象编程是一种编程范式,它将现实世界的概念…