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…

【题解】—— LeetCode一周小结

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

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;但其实&#…

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 问题现…

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

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

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

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

移动端对大批量图片加载的优化方法(三)

移动端对大批量图片加载的优化方法&#xff08;三&#xff09;Flutter 本篇主要从Flutter开发中可以使用到的对大批量图片加载的优化方法进行整理。 1.合适的图片格式 详情请参考移动端对大批量图片加载的优化方法&#xff08;一&#xff09;。 2.缓存机制 在Flutter中&am…

浅谈对Promise的理解。

一、Promise定义 JS中用于处理异步操作的编程模式。一个Promise是一个代理&#xff0c;它代表一个创建Promise时不一定已知的值。它允许我们将处理的程序与异步操作的最终成功值或失败值原因想关联起来。这使得异步方法可以像同步方法一样返回值&#xff1a;异步方法不会立即返…

uniapp最简单的底部兼容安全区域显示

效果图&#xff1a; 1.html写上动态padding-bottom <view class"button-wrap" :style"padding-bottom:bottomPaddingrpx"><view class"com-btn cencel-btn">取消</view><view class"com-btn confirm-btn " cl…

【PostgreSQL创建索引的锁分析和使用注意】

1.1 创建普通B-tree索引的整体流程 如下是梳理的创建普通B-tree索引的大概流程&#xff0c;可供参考。 1.校验新索引的Catalog元数据|语法解析 ---将创建索引的sql解析成IndexStmt结构&#xff5c;校验B-Tree的handler -----校验内核是否支持该类型的索引,在pg_am中查找&q…

java 体育明星管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web 体育明星管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysq…

Clojure 实战(4):编写 Hadoop MapReduce 脚本

Hadoop简介 众所周知&#xff0c;我们已经进入了大数据时代&#xff0c;每天都有PB级的数据需要处理、分析&#xff0c;从中提取出有用的信息。Hadoop就是这一时代背景下的产物。它是Apache基金会下的开源项目&#xff0c;受Google两篇论文的启发&#xff0c;采用分布式的文件…

Spark Core--加强

RDD的持久化 RDD缓存 当RDD被重复使用&#xff0c;或者计算该RDD比较容易出错&#xff0c;而且需要消耗比较多的资源和时间的时候&#xff0c;我们就可以将该RDD缓存起来。 主要作用: 提升Spark程序的计算效率 注意事项: RDD的缓存可以存储在内存或者是磁盘上&#xff0c;甚至…