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

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

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

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

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

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

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

相关文章

前端适配750px设计稿

全局引入 (function(doc, win) {const docEl doc.documentElement,resizeEvt orientationchange in window ? orientationchange : resizeconst setFont function() {let clientWidth docEl.clientWidth;if (!clientWidth) return;if (clientWidth > 750) {docEl.styl…

【自学笔记】01Java基础-07面向对象基础-03常量、枚举类、抽象类、多态详解

记录java基础学习中有关常量、枚举类、抽象类和多态的内容。 1 常量 什么是常量? 常量是使用了public static final修饰的成员变量,必须有初始化值,而且执行的过程中其值不能被改变。 常量名的命名规范:英文单词全部大写&#x…

【JAVA】throw 和 throws 的区别?

🍎个人博客:个人主页 🏆个人专栏: JAVA ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 throw: throws: 区别: 作用: 使用位置: 个数: 应…

软件测试|Python对JSON的解析和创建详解

简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,已经成为当今互联网应用中广泛使用的数据格式之一。Python提供了内置的模块来解析和创建JSON数据,使得在Python中处理JSON变得非常简单。本文将详细介绍Python…

复试 || 就业day10(2024.01.05)算法篇

文章目录 前言等价多米诺骨牌对的数量拼写单词“气球” 的最大数量独一无二的出现次数找出井字棋的获胜者种花问题用最少数量的箭引爆气球划分字母区间最小数字游戏 前言 💫你好,我是辰chen,本文旨在准备考研复试或就业 💫文章题目…

数据库:园林题库软件(《城市绿地设计规范》答题卷一 )

《城市绿地设计规范》答题卷一 填空题 1、城市绿地设计应贯彻人与自然和谐共存、可持续发展、经济合理等基本原则,创造良好生态和景观效果,促进人的身心健康。 2、城市绿地 urban green space 以植物为主要存在形态,用于改善城市生态&am…

YAML使用

yaml是类似xml,json的标记性语言,它强调以数据为中心 yaml的语法主要是如下几个: 大小写敏感 使用缩进表示层级关系 缩进不允许使用tab、只允许空格(低版本限制,高版本不限制) 缩进时空格数不重要&#xf…

【题解】—— LeetCode一周小结

1.经营摩天轮的最大利润 题目链接: 1599. 经营摩天轮的最大利润 你正在经营一座摩天轮,该摩天轮共有 4 个座舱 ,每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱,但每次轮转都需要支付一定的运行成本 runningCost 。摩…

Qt 多进程编程-将子程序嵌入到主窗口

关键字:GPT4、QProcess、FindWindowEx、Qt 、嵌入 文章目录 前言调用外部程序关于 QProcess 嵌入到主程序显示FindWindowEx & FindWindowFindWindowFindWindowEx使用场景 结束 前言 今天计划是稍微研究一下Qt的多进程编程,因为最近的程序感觉有点慢…

Docker简介、基本概念和安装

Docker简介、基本概念和安装 1.docker简介 1.1 什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes (opens new window)在法国期间发起的一个公司内部项目,它是基于 dotCloud 公司多年云服务技术的一次革新,并于 2013 年 3 月以 Apache 2…

Objective-C中使用STL标准库Queue队列

1.修改.m文件为mm 2.导入queue头 #include<queue> 3.使用&#xff1a; #import <Foundation/Foundation.h> #include <cmath> #include <queue> using namespace std;int main(int argc, const char * argv[]) {autoreleasepool {NSLog("C标准…

云计算任务调度仿真01

云计算任务调度的研究大多数以来仿真研究&#xff0c;现梳理一些做过的代码研究 结果无数次的排错&#xff0c;终于finish with code 0 了 这个代码以来的是比较老的TensorFlow版本&#xff0c;我们都知道TensorFlow1.x和TensorFlow2.x之间有很大差别&#xff0c;但其实&#…

AspectJ 基础

前两篇AspectJ入门的文章大致的介绍了AspectJ,本文更完整、更详细的介绍AspectJ的基础知识。包括了切点、连接点、类型间声明及thisJoinPoint的基础知识&#xff0c;来更好的理解AspectJ的语法。 1 切点和连接点 挑选切点的时候&#xff0c;我们还可以通过方法的访问权限、是…

C++ 字符串哈希 || 字符串前缀哈希法

字符串Hash就是构造一个数字使之唯一代表一个字符串。但是为了将映射关系进行一一对应&#xff0c;也就是&#xff0c;一个字符串对应一个数字&#xff0c;那么一个数字也对应一个字符串。 用字符串Hash的目的是&#xff0c;我们如果要比较一个字符串&#xff0c;我们不用直接比…

Realm Management Extension领域管理扩展之安全状态

RME基于Arm TrustZone技术。TrustZone技术在Armv6中引入,提供以下两个安全状态: 安全状态(Secure state)非安全状态(Non-secure state)以下图表显示了在AArch64中的这两个安全状态以及通常在每个安全状态中找到的软件组件: 该架构将在安全状态运行的软件与在非安全状态运…

openGauss学习笔记-190 openGauss 数据库运维-常见故障定位案例-服务启动失败

文章目录 openGauss学习笔记-190 openGauss 数据库运维-常见故障定位案例-服务启动失败190.1 服务启动失败190.1.1 问题现象190.1.2 原因分析190.1.3 处理办法 openGauss学习笔记-190 openGauss 数据库运维-常见故障定位案例-服务启动失败 190.1 服务启动失败 190.1.1 问题现…

【Leetcode】251.展开二维向量

一、题目 1、题目描述 请设计并实现一个能够展开二维向量的迭代器。该迭代器需要支持 next 和 hasNext 两种操作。 示例: Vector2D iterator = new Vector2D([[1, 2], [3], [4]]);iterator.next(); //返回1 iterator.next(); //返回2 iterator.next(); //返回3 iterator.h…

Copilot 插件的使用介绍:如何快速上手

GitHub Copilot 本文主要介绍如何通过脚本工具激活 GitHub Copilot 插件&#xff0c;提供安装及激活图文教程&#xff0c;大家按下面操作即可激活GitHub Copilot插件&#xff0c;免费使用Ai编码工具 一、GitHub Copilot 介绍 GitHub Copilot 是由 GitHub 和 OpenAI 共同开发的…

告别冗余空白,批量删除空白行

你是否遇到过这样的尴尬情况&#xff1a;花费了大量时间整理的文档&#xff0c;却在最后发现其中充斥着无用的空白行&#xff0c;这些多余的空行不仅影响美观&#xff0c;还让整个文档显得杂乱无章。今天&#xff0c;我要给大家介绍一款强大且实用的工具——首助编辑高手&#…