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

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'
  }]
};

调节后如图:

在这里插入图片描述

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

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

相关文章

抓紧收藏,Selenium无法定位元素的几种解决方案

01、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法: driver.switch_to.frame(id/name/obj) switch_to.frame()默认可以直接取表单的id或name属性。如果没有可用的id和…

自适应大屏

可视化大屏适配/自适应现状 可视化大屏的适配是一个老生常谈的话题了,现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢?因为目前市面上适配工具每一个都无法做到完美的效果,做出来的东西都差不多,最终实…

ETHERNET/IP 转ETHERCAT连接ethercat总线伺服如何控制

捷米JM-EIP-ECAT网关连接到ETHERNET/IP总线中做为从站使用,连接到ETHERCAT总线中做为从站使用,可以同时满足多种工业生产的需求。支持广泛的设备类型,可以和多种不同的设备进行通讯。 技术参数 ETHERNET/IP 技术参数 网关做为 ETHERNET/IP …

CentOS下 Docker、Docker Compose 的安装教程

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。 Docker Compose是用于定义…

一些类型推导相关的功能(C++)

目录 auto关键的新用法(C11起) 背景介绍 用法示例 注意事项 typeid运算符 type_info类 typeid的用法 decltype运算符 用法阐述 用法示例 用法建议 function类模板 用法阐述 用法示例 function较函数指针的优势 std::function和decltype的…

DID以及社交网络中的ZKP

1. 引言 本文关键术语为: Decentralized Identity (DID,去中心化身份) or self-sovereign identity (SSI,自治身份) :是一个基于开放标准的框架,使用自主、独立的标识符和可验证证书,实现可信的数据交换。…

Vue2 第六节 key的作用与原理

(1)虚拟DOM (2)v-for中的key的作用 一.虚拟DOM 1.虚拟DOM就是内存中的数据 2.原生的JS没有虚拟DOM: 如果新的数据和原来的数据有重复数据,不会在原来的基础上新加数据,而是重新生成一份 3. Vue会有虚拟…

驶向专业:嵌入式开发在自动驾驶中的学习之道

导语: 自动驾驶技术在汽车行业中的快速发展为嵌入式开发领域带来了巨大的机遇。作为自动驾驶的核心组成部分,嵌入式开发在驱动汽车的智能化和自主性方面发挥着至关重要的作用。本文将探讨嵌入式开发的学习方向、途径以及未来在自动驾驶领域中的展望。 一、学习方向:…

3ds MAX绘制茶壶

综合一下之前的内容画个茶壶 长方形,然后转化为可编辑多边形,添加节点并设置圆角,如下图 车削生成一个圆环,其实这一步也可以用一个圆柱体和两个圆角圆柱体解决 效果如下: 茶壶的底座绘制好了 接下来是茶壶的上半边 …

python测试开发面试常考题:装饰器

目录 简介 应用 第一类对象 装饰器 描述器descriptor 资料获取方法 简介 Python 装饰器是一个可调用的(函数、方法或类),它获得一个函数对象 func_in 作为输入,并返回另一函数对象 func_out。它用于扩展函数、方法或类的行为。 装饰器模式通常用…

Hudi Flink SQL源码调试学习(1)

前言 本着学习hudi-flink源码的目的,利用之前总结的文章Hudi Flink SQL代码示例及本地调试中的代码进行调试,记录调试学习过程中主要的步骤及对应源码片段。 版本 Flink 1.15.4Hudi 0.13.0 目标 在文章Hudi Flink SQL代码示例及本地调试中提到:我们…

【LLM系列之指令微调】长话短说大模型指令微调的“Prompt”

1 指令微调数据集形式“花样”太多 大家有没有分析过 prompt对模型训练或者推理的影响?之前推理的时候,发现不加训练的时候prompt,直接输入模型性能会变差的,这个倒是可以理解。假如不加prompt直接训练,是不是测试的时…

基于高通QCC5171的对讲机音频数据传输系统设计

一 研发资料准备 二 设计方法 蓝牙连接与配对:使用QCC5171的蓝牙功能,实现设备之间的蓝牙连接和配对。确保设备能够相互识别并建立起稳定的蓝牙连接。 音频采集与处理:将麦克风采集到的音频数据通过QCC5171的ADC(模数转换器&…

linux系统编程重点复习--线程同步

目录 复习目标: 1 互斥锁 1.1互斥锁的使用步骤 1.2 练习 1.3 死锁 2 读写锁 3 条件变量 4 信号量 复习目标: 熟练掌握互斥量的使用说出什么叫死锁以及解决方案熟练掌握读写锁的使用熟练掌握条件变量的使用理解条件变量实现的生产消费者模型理解…

python简单的病毒编程代码,如何用python写一个病毒

大家好,本文将围绕python简单的病毒编程代码展开说明,如何用python做恶搞病毒是一个很多人都想弄明白的事情,想搞清楚如何用python写一个病毒需要先了解以下几个事情。 1、Python能不能写病毒 国家计算机病毒应急处理中心通过对互联网的监测…

算法leetcode|64. 最小路径和(rust重拳出击)

文章目录 64. 最小路径和:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 64. 最小路径和: 给定一个包含非负整数的 m x n 网…

windows 安装 mongodb 数据库

软件下载 访问官方的下载地址: https://www.mongodb.com/try/download/community ,然后选择对应的版本进行下载 下载好了之后双击进行安装 软件安装 1、点击 next 点击下一步 2、勾选接受协议,点击 next 3、第三页有两个选项&#x…

redisson分布式锁学习

什么是分布式锁? 当有多个线程并发访问同一共享数据时,如果多个线程同时都去修改这个共享数据,且修改操作不是原子操作,就很有可能出现线程安全问题,而产生线程安全问题的根本原因是缺乏对共享数据访问的同步和互斥。 为了解决这个问题,通常我们的做法…

P2P网络NAT穿透原理(打洞方案)

1.关于NAT NAT技术(Network Address Translation,网络地址转换)是一种把内部网络(简称为内网)私有IP地址转换为外部网络(简称为外网)公共IP地址的技术,它使得一定范围内的多台主机只…