ECharts设置x轴刻度间隔的2种解决方法
作者:道HUNG 发布时间:2023-08-28 04:18:38
背景
最近在写一个echarts数据看板,要在一个页面中展示多张图表,所以留给每张图表的尺寸就很小。这也就使得图表x轴的刻度文字全部挤到一起了,废话不多说,直接上图看效果。
右边的图标就是x轴刻度标签文字被挤到一起了,左边是该过之后的效果。
解决方法
想要达到上面图片中左边的效果方法不止一种。
最笨的方法 如果空间够的话直接将echart所在的div层尺寸设置得大一些,grid对象也同理,只要展示的空间足够宽,刻度标签自然就不会挤到一起。开个玩笑哈,能找到这类文章的,都是需要在有限的空间里解决间隔的问题
方法一: x轴的标签属性axisLabel下利用interval设置间隔
官方文档是这样说的:
通过设置interval的值,来达到按指定间隔显示或者不显示,或者使用回调函数,回调函数返回的布尔值决定指定索引的标签是否显示。这也是网上能找到的最普遍的答案,可惜没能解决我的问题。
官方文档上写的是在类目轴中有效,而我的x数据轴类型是“time”。所以只能再想其他方法
方法二: 为axisLabel. formatters添加回调函数改变标签文字
formatters属性是用来设置文字格式的,既然可以用来设置文字格式,那我把需要隐藏的文字改为空字符串不就行了。
思路一通代码就简单了,先看看回调函数怎么用
官方文档上说函数有两个参数,一个是索引一个是值。注意,这里的索引并不是我们x轴数据的索引,而是图标刻度的索引。举个例子,我的数据集是每秒钟电表的读数,那么一个小时就是3600条,如果是数据集索引的话就应该是0到3599,实际上,我们从没看到过一个数据轴上有那么多刻度。
我们图表数据轴的标签数量是echarts在渲染的时候自动生成的,但是数量还真不好说而且即便是同一个图表不同时间也不一样,一般也就十来个。
来看一下我写的回调函数:
// 通过formatter设置时间刻度间隔
function time_label_formatter(value,index) {
// console.info(index);
let remainder = index % 3;
if (remainder == 0) {
return "{HH}:{mm}";
}
else{
return "";
}
}
我的时间类型数据在赋值给配置项数据集之前已经做过数据清洗,本身就是Date类型,所以没有在函数内再做数据转换
我先把所有的标签索引打印出来,发现是0到16,那么按照间隔设置为3或者4就好了。思路就是这样,看到这里的朋友可以根据自己的实际情况调整一个间隔数就可以了。
最后看一下配置项series参数:
xAxis:[
{
type:"time",
gridIndex:0,
axisLabel:
{
rotate:-45,
formatter:time_label_formatter
},
},
{
type:"time",
gridIndex:1,
axisLabel:
{
rotate:-45,
formatter:time_label_formatter
}
}
],
附:Echarts柱状图x轴间隔显示(显示不全)
echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整。默认会采用标签不重叠的策略间隔显示标签,则需要在xAxis 属性加上axisLabel:{interval: 0}。可以设置成 0 强制显示所有标签。
xAxis.axisLabel 属性:axisLabel的类型是object,主要作用是:坐标轴刻度标签的相关设置(当然yAxis也是一样有这个属性的)。
来源:https://blog.csdn.net/DAO_HUNG/article/details/125654140
猜你喜欢
- 如果是在Oracle10g之前,删除一个表空间中的数据文件后,其文件在数据库数据字典中会仍然存在,除非你删除表空间,否则文件信息不会清除。但
- 摘要: Portal是IT领域的新技术,是企业信息化工作的发展方向之一。本文首先介绍了Oracle Portal的定义、特点,接着阐述了po
- MySQL低调宣布它将不再把MySQL企业版服务器作为一个tar包发布,而这距离这个公司宣布将MySQL分为免费版和付费版的时间还不到一年。
- $server->connections//server−>connections遍历所有websocket连接用户的fd,给所
- 本文假设某些特定类型的文件和大小为0的文件为垃圾文件,可以自由扩展代码的列表,也就是垃圾文件的类型。from os.path import
- 问题:SQL Server 2000中设计表时如何得到自动编号字段?解答:具体步骤如下:①像Access中的自动编号字段右键你的表-->
- 其实这里的静态页面并不是真正意义上的静态,但可以达到了静态页面的解析效率,还未经项目测试,拿来分享。代码如下:<% Cons
- oracle命令删除用户:connect / as sysdba; shutdown abort; startup;&n
- 如果不用类库(如jquery)来写,往往很多时候,都需要通过id或tag来获取html里的某一对象,然后对其进行操作。为了节省代码,把常用的
- 八卦为先八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:你知道世界上第一份reset.css在哪么?* { m
- 同时在线访问量继续增大 对于1G内存的服务器明显感觉到吃力严重时甚至每天都会死机 或者时不时的服务器卡一下 这个问题曾经困扰了我半个多月My
- 很早以前就有很多关于用CSS制作的相册,今天突然想看又找不到,反正也无聊,自己做了一下,结果做一下发现自己温习了一些东西。还行,
- 如何使用Office Chart 9.0 制作图表?代码如下:chart90.asp<HTML><HEAD><
- Oracle 的正规表达式的实施是以各种 SQL 函数和一个 WHERE 子句操作符的形式出现的。如果您不熟悉正规表达式,那么这篇文章可以让
- 前言本文的操作环境:ubuntu,Python2.7,采用的是Pycharm进行代码编辑,个人很喜欢它的代码自动补齐功能。示例图如上图,我们
- 代码如下:CREATE PROCEDURE page @tblName varchar(255), -- 表名 @strGetF
- CREATE OR REPLACE PROCEDURE PROC6338196642095312503719(输入新闻主题 Varchar2
- 这篇文章主要介绍了python文字和unicode/ascll相互转换函数及简单加密解密实现代码,下面我们来了解一下。import reim
- 在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了,可以跳过这一节。CSS是Cascad
- 费茨法则是人机交互领域里一个非常重要的法则,在10年来得到了广泛的应用。Fitts法则最基本的观点就是任何时候,当一个人用鼠标来移动鼠标指针