echart折线图,调节折线点和y轴的间距(亲测可用)

news2024/9/23 5:34:41

options代码:

                    options = {
                        tooltip: {
                            trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                        },
                        xAxis: {
                            type: 'category',//类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
                            name: '日期',//坐标轴名称
                            boundaryGap: false,
                            data: dataYearCountName,
                            nameGap: 7,//坐标轴名称与轴线之间的距离。
                            axisTick: {//是否显示坐标轴刻度。
                                inside: true//坐标轴刻度是否朝内,默认朝外。
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '例数',
                            splitLine: {
                                show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
                            },
                            nameGap: 15,
                            axisTick: {
                                inside: true
                            }
                        },
                        series: [{
                            type: 'line',//线条
                            name: '例数',//系列名称,用于tooltip的显示
                            data: dataYearCountNum,
                            symbol: 'circle',//标记的类型:圆圈
                            label: {
                                show: true,
                                position: 'top'
                            },
                            itemStyle: {
                                normal: {
                                    shadowBlur: 50,//文字块的背景阴影长度。
                                    shadowColor: 'red',//文字块的背景阴影颜色。
                                    color: 'red',//图形的颜色
                                    lineStyle: {
                                        color: '#4d6dfd',//线的颜色
                                        width: 1//线的宽度
                                    }
                                }
                            }
                        }],
                        grid: {
                            x: '0', //相当于距离左边效果:padding-left
                            y: '15%',  //相当于距离上边效果:padding-top
                            bottom: '3%',
                            containLabel: true
                        }
                    };

调节前如图:

在这里插入图片描述

把xAxis中的boundaryGap属性注释或者将boundaryGap的值改为ture即可

在 Echarts 中,boundaryGap 属性用于控制柱状图、折线图、面积图等类别轴(如横轴为日期、时间等连续值的轴)的数据在坐标轴两端是否留白。

具体来说,当 boundaryGaptrue 时,数据会在坐标轴两端留出一定的空白,使得数据不会紧贴在坐标轴上,从而更加美观。当 boundaryGapfalse 时,数据会紧贴在坐标轴上,坐标轴的端点也会被数据包围。

默认情况下,boundaryGap 属性的值为 true,即数据会在坐标轴两端留白。如果需要修改这个属性,可以在 Echarts 的配置项中设置 boundaryGap 的值为相应的布尔值即可。例如:

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    boundaryGap: true, // 将 boundaryGap 设置为 false
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line'
  }]
};

调节后如图:

在这里插入图片描述

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

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

相关文章

申请开通【商家转账到零钱】超时后如何反馈?

前言 在微信开放社区看到很人【商家转账到零钱】超过了7-15个工作日没有回复,还在审核中,遇到这个问题怎么解决呢?我最近正好在申请,这篇文章我就要讲讲我是如何找到客服,并且得到反馈的。 步骤 1.关注【腾讯客服】公…

VBA技术资料MF34:检查Excel自动筛选是否打开

【分享成果,随喜正能量】聪明人,抬人不抬杠;傻子,抬杠不抬人。聪明人,把别人抬得很高,别人高兴、舒服了,看你顺眼了,自然就愿意帮你!而傻人呢?不分青红皂白&a…

nsq整体架构及各个部件作用详解

文章目录 前言 nsq的整体架构图 部件:nsqd 部件:nsqlookupd 部件:nsq连接库 部件:nsqadmin 前言 上两篇博客 centos环境搭建nsq单点_YZF_Kevin的博客-CSDN博客 linux环境搭建nsq集群_YZF_Kevin的博客-CSDN博客 我们讲了nsq是…

【Qt】QML-01:使用QtCreator10创建QML工程,并讲解第一个程序:Hello World

1、创建QML工程 1)新建工程 打开QtCreator10,依次点击“Create Project” --> “Application(Qt)” --> “Qt Quick Application(compat)” 注意:本人打算使用Qt5.15.2创建工程,而非Qt6,因此选择兼容低于Qt6版本的“Qt Quick Applicat…

深度学习入门教程(2):使用预训练模型来文字生成图片TextToImageGenerationWithNetwork

本深度学习入门教程是在polyu HPCStudio 启发以及资源支持下进行的,在此也感谢polyu以及提供支持的老师。 本文内容:在GoogleColab平台上使用预训练模型来文字生成图片Text To Image Generation With Network (1)你会学到什么&a…

TEE GP(Global Platform)技术委员会及中国任务小组

TEE之GP(Global Platform)认证汇总 一、TEE GP技术委员会 二、GP中国任务小组 参考: GlobalPlatform Certification - GlobalPlatform

QT: 用定时器完成闹钟的实现

闹钟项目&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include <QDebug> #include <QTextToSpeech> #include <QMessageBox> #include <QTimer>QT_BEGIN…

十三章:使用图像级监督学习像素级语义关联性的弱监督语义分割

0.摘要 分割标签的不足是野外语义分割的主要障碍之一。为了缓解这个问题&#xff0c;我们提出了一个新颖的框架&#xff0c;根据图像级别的类别标签生成图像的分割标签。在这种弱监督的设置下&#xff0c;已知训练模型更倾向于分割局部有区别的部分&#xff0c;而不是整个物体区…

springMVC--数据验证以及国际化

文章目录 springMVC--数据验证以及国际化概述JSR 303 验证框架Hibernate Validator 扩展注解 应用实例需求说明代码实现引入验证和国际化相关的jar 包修改Monster.java修改MonsterHandler.java测试效果配置国际化文件springDispatcherServlet-servlet.xml创建国际化文件springm…

.NET 8 Preview 5推出!

作者&#xff1a;Jiachen Jiang 排版&#xff1a;Alan Wang 我们很高兴与您分享 .NET 8 Preview 5 中的所有新功能和改进&#xff01;此版本是 Preview 4 版本的后续版本。在每月发布的版本中&#xff0c;您将看到更多新功能。.NET 6 和 7 用户可以密切关注此版本&#xff0c;而…

数据服务:保障数据安全、提升数据价值的利器

04-08把元数据以及在它基础上的五大应用场景&#xff1a;数据发现&#xff08;数据地图&#xff09;、指标管理、模型设计、数据质量、成本优化&#xff0c;全部讲完。这部分内容对应的就是数据中台OneData 方法论。学完这部分内容&#xff0c;你已了解OneData方法论在企业内部…

ctfshow-web3

0x00 前言 CTF 加解密合集CTF Web合集 0x01 题目 0x02 Write Up 这个题目一看就知道是一个文件包含漏洞 php://input可以访问请求的原始数据的只读流&#xff0c;将post请求的数据当作php代码执行。 GET http://3afc5257-7b7d-4917-a1eb-5ea59fc35d8c.challenge.ctf.show/…

Numpy 数据文件

Numpy 数据文件 Numpy 数据处理函数 loadtxt np.loadtxt()函数常用的传入参数 dtype&#xff1a;所需的返回数组的数据类型。默认为floatcomments&#xff1a;用于标识注释行的字符。默认为#delimiter&#xff1a;指定分隔符字符或字符串。默认为任何空格字符skiprows&#x…

Qt : day3

1.完成简易闹钟 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTextToSpeech> //播报类 #include <QTimer> //定时器类 #include <QTime> //时间类QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEcla…

clickhouse分布式查询降级为本地查询

在基于 clickhouse 做类数仓建模时通常的做法是在本地创建物化视图&#xff0c;然后使用分布式表做代理对外提供服务。我们知道 clickhouse 对于 DQL 内部实现了分布式&#xff0c;而对于 DDL 则需要我们自动实现比如&#xff1a; drop table table_name on cluster cluster_n…

【6】toLocaleString、toLocaleDateString、toLocaleTimeString等toLocale系列方法的使用及案例

一、介绍 在当今前端开发的领域里&#xff0c;快速、高效的项目构建工具以及使用最新技术栈是非常关键的。ViteVue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。 作为下一代前端构建工具&#xff0c;Vite 在开发中的启动速度和热重载…

医学多模态综述

原文链接&#xff1a;https://arxiv.org/abs/2307.07362 一个医学多模态综述&#xff0c;本人搞分割的重点看了一下分割的&#xff0c;其余任务没时间细看我就截了个模型汇总图&#xff0c;想详细了解的去喵一下上面这个论文就行 数据集汇总 Report generation 报告生成 报告…

效率与质量兼备的6个设计工具!

今天本文为大家推荐的这6个设计工具&#xff0c;将帮助设计师实现高效工作&#xff0c;同时也更好地展示自己的创作力&#xff0c;一起来看看吧&#xff01; 1、即时设计 即时设计是一款国内的设计工具&#xff0c;它为设计师提供了非常多实用的设计功能和精致的设计素材&…

变分自编码器VAE代码

一&#xff0c;Auto-Encoder(AE) 自编码器的目的是自己训练自己&#xff0c;他的输入和输出是一样的。比如28*28的黑白手写数字图片(单通道)&#xff0c;如果使用矩阵形式进行表达&#xff0c;真正有作用的特征是哪些数值为1的地方&#xff0c;以及他们在矩阵空间的位置。而大部…

Android13导入OpenCV4.8流程

网上看了很多流程都不能正常导入OpenCV&#xff0c;有一堆报错&#xff0c;而且还有限制&#xff0c;我记一下我的处理方式 首先这个博客主要解决以下问题 1、不需要项目选择native C&#xff0c;使用最新的OpenCV库 2、不用复制文件&#xff0c;不需要手动改动项目自身的bu…