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-lefty: '15%',  //相当于距离上边效果:padding-topbottom: '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.mzph.cn/news/15026.shtml

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

相关文章

iOS开发-启动页广告实现

iOS开发-启动页广告实现 启动页广告实现是一个非常常见的广告展示模式。 就是在启动时候显示广告,之后点击跳转到广告页面或者其他APP。 一、实现启动页广告 启动页广告控件实现,将View放置在keyWindow上,显示广告图片,点击广告…

Pytorch(二)

一、分类任务 构建分类网络模型 必须继承nn.Module且在其构造函数中需调用nn.Module的构造函数无需写反向传播函数,nn.Module能够利用autograd自动实现反向传播Module中的可学习参数可以通过named_parameters()返回迭代器 from torch import nn import torch.nn.f…

Kubernetes(K8s)从入门到精通系列之五:K8s的基本概念和术语之应用类

Kubernetes K8s从入门到精通系列之五:K8s的基本概念和术语之应用类 一、Service与Pod二、Label与标签选择器三、Pod与Deployment四、Service的ClusterIP地址五、Service的外网访问问题六、有状态的应用集群七、批处理应用八、应用配置问题九、应用的运维一、Service与Pod Ser…

深入了解Linux文件系统

深入了解Linux文件系统 1. 简介 什么是文件系统 文件系统是操作系统中用于管理和组织存储数据的一种机制。它定义了文件和目录的结构,以及文件如何存储、访问和更新。文件系统是操作系统和硬件之间的接口,它使得用户可以方便地使用存储设备上的文件。…

C++里的优先级队列

它是一个模板类&#xff1a; template <class T, class Container vector<T>, class Compare less<typename Container::value_type> > class priority_queue; 默认情况下是 max heap, 默认的比较函数是 std::less<T>. 如果需要 min heap,或者是…

Rust- 智能指针

Smart pointers A smart pointer is a data structure that not only acts like a pointer but provides additional functionality. This “smartness” comes from the fact that smart pointers encapsulate additional logical or semantic rules, which are automaticall…

MySQL二进制日志(binlog)配置、二进制日志binlog查看、mysqlbinlog查看二进制日志、二进制日志binlog清理等详解

提示&#xff1a;MySQL 中的日志比较重要的有 binlog&#xff08;归档日志&#xff09;、redo log&#xff08;重做日志&#xff09;以及 undo log&#xff0c;那么跟我们本文相关的主要是 binlog&#xff0c;另外两个日志松哥将来有空了再和大家详细介绍。 文章目录 1、二进制…

C++部署学习

gcc -E src/main.c -o src/main.i gcc -S src/main.c -o src/main.s gcc -C src/main.c -o src/main.o gcc src/main.c -o exec ./exec

累加和最大的组合

1、题目 给定一个数组,选择数字组成组合,请问哪个组合的累加和最大。 要求:相邻的数不能同时选。 例子: 输入:[3, 7, 9] 输出:12。选择 3 和 92、思路 定义dp[i],表示在 arr 的 0 ~ i i i 范围上按照选择数组成组合,累加和最大的结果,即所有可能性的最优。 dp[…

RabbitMQ 教程 | 第3章 客户端开发向导

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

20230727-随笔

目录 List删除满足条件的元素&#xff0c;并且避免索引错误或并发修改异常常用方法使用迭代器删除元素通过逆向循环删除元素Java8 的 removeIf()方法 获取不到日志内容问题排查尝试解决最终解决 List删除满足条件的元素&#xff0c;并且避免索引错误或并发修改异常常用方法 使…

排序算法汇总

每日一句&#xff1a;你的日积月累终会成为别人的望尘莫及 目录 常数时间的操作 选择排列 冒泡排列 【异或运算】 面试题&#xff1a; 1&#xff09;在一个整形数组中&#xff0c;已知只有一种数出现了奇数次&#xff0c;其他的所有数都出现了偶数次&#xff0c;怎么找到…

51单片机IO口控制

51单片机IO口控制 1.点亮LED灯 原理&#xff1a;根据电路图&#xff0c;指向IO口的引脚&#xff1b;拉低电平&#xff0c;灯亮、 如图&#xff1a; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zfco4IjK-1690308697530)(C:/Users/xie19/Pictur…

C++基础篇(一)常用关键字及示例

一、C常见关键词 1、auto auto: 自动类型推断。它可以让编译器根据变量的初始值自动推断出变量的类型。例如&#xff1a; auto x 42; // x 的类型为 int auto y 3.14; // y 的类型为 double2、decltype decltype: 类型推断。它可以根据表达式的类型推断出一个类型。例如&…

面试之CurrentHashMap的底层原理

首先回答HashMap的底层原理? HashMap是数组链表组成。数字组是HashMap的主体&#xff0c;链表则是主要为了解决哈希冲突而存在的。要将key 存储到&#xff08;put&#xff09;HashMap中&#xff0c;key类型实现必须计算hashcode方法&#xff0c;默认这个方法是对象的地址。接…

input元素中的form属性有什么用?

在HTML中&#xff0c;input元素的form属性用于指定该输入字段所属的表单&#xff08;form元素&#xff09;。通过将input元素的form属性设置为相应的表单的id值&#xff0c;可以将输入字段与表单进行关联。 这个属性对于两个主要目的非常有用&#xff1a; 表单关联&#xff1…

【应用层】Http协议总结

文章目录 一、续->Http协议的学习 1.http请求中的get方法和post方法 2.http的状态码 3.http的报头 4.长链接 5.cookie&#xff08;会话保持&#xff09;总结 继续上一篇的内容&#xff1a; 上一篇的最后我们讲到了web根目录&#xff0c;知道…

epoll服务器创建

驱动 #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/io.h> #include <linux/device.h> #include <linux/uaccess.h> #include <linux/poll.h> unsigned int major; char kbuf[128]{0}…

使用Docker部署EMQX

原文链接&#xff1a;http://www.ibearzmblog.com/#/technology/info?id9dd5bf4159d07f6a4e69a6b379ce4244 前言 在物联网中&#xff0c;大多通信协议使用的都是MQTT&#xff0c;而EMQX是基于 Erlang/OTP 平台开发的 MQTT 消息服务器&#xff0c;它的优点很多&#xff0c;我…