echarts - xAxis.type设置time时该如何使用formatter的分级模板

news2024/10/7 10:24:57

echarts 文档中描述了x轴的多种类型
在这里插入图片描述

一、type: ‘value’

‘value’ 数值轴,适用于连续数据。

此时x轴数据是从零开始,有数据大小的区分。

在这里插入图片描述
【注意】
因为xAxis.data是为category服务的,所以xAxis.data里面设置的数据无效。

二、type: ‘category’

‘category’ 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。

此时x轴数据是数组中取值的,且不是从零开始,没有数据大小的区分。

在这里插入图片描述
【注意】
如果设置了 type 是 ‘category’,但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取,这会比较方便。不过注意,axis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取,那么只能获取到 series.data 中出现的值。比如说,假如 series.data 为空时,就什么也获取不到。

三、type: ‘time’

‘time’ 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

主要是用于x轴是时间的数据展示中。

因为分级模板在网上的例子太少,在实践中摸索出了要怎么使用,所以主要记录 xAxis.axisLabel.formatter 中的分级模板如何使用。

分级模板:为不同时间粒度的标签使用不同的 formatter,object 类型

可以实现对不同的时间粒度采用不同的数据展示。
在这里插入图片描述
如果准备采用分级模板,注意的是,x轴的显示是根据数据来的,不需要额外设置。如果数据范围是年-月,那么月的数据展示会用 formatter.month 的设置来展示,如果月之间跨年,那么会用formatter.month 的设置来展示,这都是组件自动转化的,不需要额外设置。

以年间隔展示
在这里插入图片描述

以月间隔展示
在这里插入图片描述

以日间隔展示
在这里插入图片描述

以小时间隔展示
在这里插入图片描述
综上,组件会根据跨度的范围来决定使用年,月,日还是小时范围的刻度。

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

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

相关文章

2023回顾

今年遇到最大的问题: 屏幕无故卡死,原因各种各样,至今虽说已排查了大部分的原因,也规避掉了一些可能问题,但随着新功能的添加,还是有可能不小心引入。 期间的解决方案也发布在Qt 屏幕偶发性失灵_qt 虚拟键盘…

Springboot+RocketMQ通过事务消息优雅的实现订单支付功能

目录 1. 事务消息 1.1 RocketMQ事务消息的原理 1.2 RocketMQ订单支付功能设计 1. 事务消息 RocketMQ的事务消息,是指发送消息事件和其他事件需要同时成功或同时失败。比如银行转账, A银行的某账户要转一万元到B银行的某账户。A银行发送“B银行账户增加…

如何让GPT支持中文

上一篇已经讲解了如何构建自己的私人GPT,这一篇主要讲如何让GPT支持中文。 privateGPT 本地部署目前只支持基于llama.cpp 的 gguf格式模型,GGUF 是 llama.cpp 团队于 2023 年 8 月 21 日推出的一种新格式。它是 GGML 的替代品,llama.cpp 不再…

记一次JSF异步调用引起的接口可用率降低

前言 本文记录了由于JSF异步调用超时引起的接口可用率降低问题的排查过程,主要介绍了排查思路和JSF异步调用的流程,希望可以帮助大家了解JSF的异步调用原理以及提供一些问题排查思路。本文分析的JSF源码是基于JSF 1,7.5-HOTFIX-T6版本。 起因 问题背景…

强化学习的数学原理学习笔记 - Actor-Critic

文章目录 概览:RL方法分类Actor-CriticBasic actor-critic / QAC🟦A2C (Advantage actor-critic)Off-policy AC🟡重要性采样(Importance Sampling)Off-policy PGOff-policy AC 🟦DPG (Deterministic AC) 本…

使用fs.renameSync(oldPath,newPath)方法,报错Error: ENOENT: no such file or directory

报错翻译:由于文件或目录不存在导致的。 解决方法:查看给定的路径,确保路径和文件名正确,并且文件或目录确实存在。

C语言--结构体详解

C语言--结构体详解 1.结构体产生原因2.结构体声明2.1 结构体的声明2.2 结构体的初始化2.3结构体自引用 3.结构体内存对齐3.1 对齐规则3.2 为什么存在内存对齐3.3 修改默认对⻬数 4. 结构体传参 1.结构体产生原因 C语言将数据类型分为了两种,一种是内置类型&#xf…

Spring学习 Spring事务控制

7.1.事务介绍 7.1.1.什么是事务? 当你需要一次执行多条SQL语句时,可以使用事务。通俗一点说,如果这几条SQL语句全部执行成功,则才对数据库进行一次更新,如果有一条SQL语句执行失败,则这几条SQL语句全部不…

2.SPSS数据文件的建立和管理

文章目录 数据文件的特点建立SPSS数据文件步骤 数据文件的结构变量的规则 数据的录入和保存录入数据保存文件 数据的编辑数据定位 数据文件的特点 SPSS数据库文件包括文件结构和数据两部分 SPSS数据文件中的一列数据称为一个变量。每个变量都应有一个名称,即&…

面试算法100:三角形中最小路径之和

题目 在一个由数字组成的三角形中,第1行有1个数字,第2行有2个数字,以此类推,第n行有n个数字。例如,下图是一个包含4行数字的三角形。如果每步只能前往下一行中相邻的数字,请计算从三角形顶部到底部的路径经…

centos7新建普通用户并设置分组和密码

sudo -i获取root权限 添加分组group1 groupadd group1 添加用户并设置分组为group1密码为password1 useradd user1 -g group1 -p password1 su user1 切换到 user1

第7章-第6节-Java中的Map集合

1、HashMap: 1)、 引入 如果业务需要我们去用姓名的拼音手写字母匹配完整姓名,那么如果用单列数据,我们可能需要两个集合才能存储,而且两个集合之间没有关联不好操作,这种时候双列数据就会起很大作用 2&…

Mysql : command not found

1.Mysql : command not found 安装成功的mysql,并且服务已经启动,查看进行是可以看到的,但是使用命令登录操作,却抛出错误:command not found。 2.解决方案 2.1 查看/usr/bin目录下是否有mysql服务连接 ls /usr/bin…

服务网格 Service Mesh

什么是服务网格? 服务网格是一个软件层,用于处理应用程序中服务之间的所有通信。该层由容器化微服务组成。随着应用程序的扩展和微服务数量的增加,监控服务的性能变得越来越困难。为了管理服务之间的连接,服务网格提供了监控、记…

Linux 期末复习

Linux 期末复习 计算机历史 硬件基础 1,计算机硬件的五大部件:控制器、运算器、存储器、输入输出设备 2,cpu分为精简指令集(RISC)和复杂指令集(CISC) 3,硬件只认识0和1,最小单位是bit,最小存储单位是字…

应用统计学期末复习简答题

应用统计学期末复习简答题 1.解释众数、中位数和调和平均数。2、什么是普查?其有何特点和作用?3、什么是抽样调查?其有何特点和作用?4、什么是偏度系数,并解释左偏分布、对称分布和右偏分布。5、解释置信区…

竞赛保研 基于深度学习的人脸表情识别

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的人脸表情识别 该项目较…

结构型设计模式——适配器模式

适配器模式 这个更加好理解,就是做适配功能的类,例如,现在手机没有了圆形耳机接口,只有Type-C接口,因此你如果还想要使用圆形耳机的话需要买个圆形接口转Type-C的转换器(适配器),这…

一分钟带你了解深度学习算法

深度学习是一种受到生物学启发的机器学习方法,其目标是通过构建多层神经网络来模拟人脑的工作原理。它在过去几十年来取得了巨大的进展,并在图像识别、语音识别、自然语言处理等领域取得了突破性的成果。 深度学习的核心思想是模仿人脑的神经网络。人脑中…

HarmonyOS应用开发学习笔记 Want概述Ability跳转

一、Want的定义与用途 Want是对象间信息传递的载体,可以用于应用组件间的信息传递。其使用场景之一是作为startAbility()的参数,包含了指定的启动目标以及启动时需携带的相关数据,如bundleName和abilityName字段分别指明目标Ability所在应用…