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

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 的设置来展示,这都是组件自动转化的,不需要额外设置。

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

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

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

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

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

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

相关文章

计算机配件杂谈-鼠标

目录 基础知识鼠标的发展鼠标的左右手鼠标的显示样式鼠标的移动和可见性移动可见性 现在的我们的生活工作都基本上离不开电脑了,不管是你平时玩玩游戏,上班工作等等; 今天将关于鼠标的一些小的技巧分享出来,共勉! 基础…

【SPDK】【NoF】使用SPDK实现NVMe over Fabrics Target

本文使用两台PC,一台做NVMe over Fabrics Target(服务端),一台做NVMe over Fabrics initiator(客户端)。首先使用SoftRoCE来实现底层的rdma传输,然后使用SPDK来实现NVMe over Fabrics Target。 …

同一局域网如何共享文件

一、Windows文件共享设置步骤 1.在需要共享文件的电脑上,右击要共享的文件夹,选择“属性” 2.在“共享”选项卡中,点击“高级共享” 3.勾选“共享此文件夹”并设定共享名称,点击“权限”设置具体访问权限。 4.在其他电脑上&#x…

Stable Diffusion初体验

体验了下 Stable Diffusion 2.0 的图片生成,效果还是挺惊艳的,没有细调prompt输入,直接输入了下面的内容: generate a Elimination Game image of burnning tree, Cyberpunk style 然后点击生成,经过了10多秒的等待就输…

跨国文件传输网络丢包的四大原因和修复方式

在全球化的影响下,跨国传输在企业和个人的日常工作中发挥着越来越重要的作用。然而,由于各种原因,网络丢包问题时有发生。本文将详细分析跨国文件传输网络丢包的四大原因,并介绍相应的修复方式。 一、跨国文件传输网络丢包的四大原…

pytorch09:可视化工具-TensorBoard,实现卷积核和特征图可视化

目录 一、TensorBoard简介二、TensorBoard安装三、TensorBoard运行可视化四、TensorBoard详细使用4.1 SummaryWriter4.2 add_scalar()4.3 add_scalars()4.4 add_histogram()4.4.1实际项目开发使用 4.5 add_image()4.6 torchvision.utils.make_grid4.7 卷积核和特征图可视化4.7.…

Android开发Flutter使用SharedPreferences示例

文章目录 SharedPreferences具体使用 SharedPreferences Android原生开发经常会用SharedPreferences来保存一些设置,Flutter用什么来保存这些设置呢? 在Flutter中,你可以使用shared_preferences插件来实现类似Android原生开发中的SharedPref…

低抖动可编程SPXO SG-8200CG, SG-8201CG -高稳定性和低抖动特性

描述 SG-8200CG和SG-8201CG (sg -8201系列)利用爱普生新的低噪声分n锁相环技术&#xff0c;与上一代爱普生可编程晶体振荡器相比&#xff0c;稳定性提高了约2x&#xff0c;相位抖动降低了<1/25。sg -8201系列可编程为1.2MHz至170MHz的任何频率&#xff0c;工作温度范围可达…

tcp/ip协议2实现的插图,数据结构6 (24 - 章)

(142) 142 二四1 TCP传输控制协议 tcpstat统计量与tcp 函数调用链 (143) 143 二四2 TCP传输控制协议 宏定义与常量值–上 (144) 144 二四3 TCP传输控制协议 宏定义与常量值–下 (145) 145 二四4 TCP传输控制协议 结构tcphdr,tcpiphdr (146) 146 二四5 TCP传输控制协议 结构 tcp…

【MATLAB】ICEEMDAN_LSTM神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 ICEEMDAN-LSTM神经网络时序预测算法是一种结合了改进的完全扩展经验模态分解&#xff08;ICEEMDAN&#xff09;和长短期记忆神经网络&#xff08;LSTM&#xff09;的时间序列预测方法。 …

x-cmd pkg | raku - 渐进类型的、多范式的编程语言

目录 简介首次用户技术特点相关的术语进一步阅读 简介 Raku 是 Perl 家族中的一种编程语言&#xff0c;原名 Perl 6&#xff0c;主要设计者为 Larry Wall&#xff0c;从2000年开始开发&#xff0c;2019年10月更名为 Raku&#xff0c;是一种通用的、渐进类型的、多范式的编程语…

C++常用库函数大小写转换

在我们在编写代码时大小写转换是基础知识&#xff0c;这篇博客将通过介绍C常用库函数来回顾和学习一种不一样的大小写转换 目录 一、islower/isupper函数二、tolower/toupper函数三、ASCLL码 一、islower/isupper函数 islower和isupper函数是C标准库中的字符分类函数&#xff…

什么是检索增强生成 (RAG)

什么是 RAG RAG&#xff0c;即检索增强生成&#xff0c;是一种将预训练的大型语言模型的功能与外部数据源相结合的技术。这种方法将 GPT-3 或 GPT-4 等 LLM 的生成能力与专用数据搜索机制的精确性相结合&#xff0c;从而形成一个可以提供细微响应的系统。 本文更详细地探讨了…

搭建Eureka服务注册中心

前言 我们在别的章节中已经详细讲解过eureka注册中心的作用&#xff0c;本节会简单讲解eureka作用&#xff0c;侧重注册中心的搭建。 Eureka作为服务注册中心可以进行服务注册和服务发现&#xff0c;注册在上面的服务可以到Eureka上进行服务实例的拉取&#xff0c;主要作用就是…

加载符号文件

1、加载符号文件 当程序突发崩溃时&#xff0c;当我们尝试通过core文件分析原因时&#xff0c;通常会遇到以下问题&#xff0c;那么这种情况该怎么解决呢&#xff1f; 适用场景 二进制文件与符号文件分离的情况。 # 将test中的调试信息以外的数据剥离&#xff0c;生成符号文…

性能分析与调优: Linux 文件系统观测工具

目录 一、实验 1.环境 2.mount 3.free 4.top 5.vmstat 6.sar 7.slabtop 8.strace 9.opensnoop 10.filetop 11.cachestat 二、问题 1.Ftrace实例如何实现 2.Function trace 如何跟踪实例 3.function_graph Trace 如何跟踪实例 4.trace event 如何跟踪实例 5.未…

C语言入门教程,C语言学习教程(第一部分:编程基础 )二

九、进制详解&#xff1a;二进制、八进制和十六进制 我们平时使用的数字都是由 0~9 共十个数字组成的&#xff0c;例如 1、9、10、297、952 等&#xff0c;一个数字最多能表示九&#xff0c;如果要表示十、十一、二十九、一百等&#xff0c;就需要多个数字组合起来。 例如表示…

SpringIOC之support模块GenericApplicationContext

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

外贸企业建站步骤有哪些?海洋建站怎么做?

外贸企业建站平台推荐&#xff1f;做外贸如何搭建贸易网站&#xff1f; 外贸企业要想在激烈的市场竞争中立于不败之地&#xff0c;建立一个专业而吸引人的网站是至关重要的一环。海洋建站将深入探讨外贸企业建站的关键步骤&#xff0c;为您提供一个清晰的指南&#xff0c;助您…

自行车商城网站网页设计与制作web前端设计html+css+js成品。电脑网站制作代开发。vscodeDrea

【自行车商城网站网页设计与制作web前端设计htmlcssjs成品。电脑网站制作代开发。vscodeDrea】 https://www.bilibili.com/video/BV1wT4y1p7jq/?share_sourcecopy_web&vd_sourced43766e8ddfffd1f1a1165a3e72d7605