echarts-series的x,y轴的规则

series的data与x,y轴的匹配规则

如果series的data为[1,2,3,4,5,6]
1.如果x,y轴都是类目轴,且data没有与x,y轴的值匹配上,则无效。
2.如果x,y轴都为类目,data中能够跟类目轴上的字符串对应上,轴,有效。
3.如果都为value.,则按数值生成x,y轴然后按数值标在对应的位置上。

  1. x,y轴都是类目轴,data没有与x,y轴的值匹配上
 let options = {xAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},yAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},series: [{type: "line",data: ["21", "22", "33", "34", "35", "w6", "天"],},],};

在这里插入图片描述
2. x,y轴都为类目,data中能够跟类目轴上的字符串对应上,

let options = {xAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},yAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},series: [{type: "line",data: ["星期1", "22", "星期3", "星期4", "35", "w6", "天"],},],};

在这里插入图片描述
3.都为value.,数值匹配在对应的位置上。

 let options = {xAxis: {//type: "category",type: "value",// data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},yAxis: {// type: "category",type: "value",// data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},series: [{type: "line",data: ["21", "22", "33", "34", "35"],},],};

在这里插入图片描述

series的data其实是一个二维数组

坐标系里的点都是有x,y坐标的,所以 series的data可以是一个二维的数组。
例子1:

 let options = {xAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},yAxis: {//type: "category",//  data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},series: [{type: "line",data: [["星期1", 12],["星期2", 11],["星期3", 33],["星期4", 11],],},],};

在这里插入图片描述
例子2:

 let options = {xAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},yAxis: {type: "category",data: ["1", "2", "3", "4", "5", "6", "天"],},series: [{type: "line",data: [["星期1", "1"],["星期2", "2"],["星期3", "3"],["星期4", "4"],],},],};

在这里插入图片描述

series的data其实是一个二维数组,可以简写为一维数组。
假设数组为[1,2,3]
x轴为类目轴,y轴为value轴,会被解析为[[0,1],[1,2],[2,3]]。
0是数组的下标,1为数组对应下标的值。

y轴为类目轴,会被解析为[[1,0],[2,1],[3,2]]
都为value,会被解析为[[1,1],[2,2],[3,3]]
在这里插入图片描述

et options = {xAxis: {type: "category",data: ["星期1", "星期2", "星期3", "星期4", "星期5", "星期6", "星期天"],},yAxis: {// type: "category",// data: ["1", "2", "3", "4", "5", "6", "天"],},series: [{type: "line",data: [["星期1", "1"],["星期2", 2],["星期3", 3],["星期4", "4"],],},],};

在这里插入图片描述

总结

在二维数组中,如果里面是数字,在类目轴中解析为对应的序号,value轴会解析成具体的值。
例如[1,2] 如果x轴是类目轴,1代表类目轴的第2个,匹配第二个。如果是value轴,则代表值1

在二维数组中,如果里面是字符串,会在类目轴中解析同一字符串的位置,在value轴中会转化为数字,如果转化不了,则无效。
例如 [“1”,2] 如果x轴是类目轴,会在x轴上找"1"这个字符串。如果为value轴,会转化为对应的数值。有些字符串如"d1",不能转换成数字的会报错。

在这里插入图片描述
yAxis, xAxis的type为value时,可以不用设置data,data跟 series中的相同。

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

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

相关文章

掌握Element UI:加速你的网页设计过程!

Element UI 是一套为开发者、UI/UX设计师和产品经理准备的采用Vue 2.0作为基础框架实现的组件库,提供配套的设计资源,可以帮助设计快速成型。即时设计也内置Element UI Kit资源,但有些小伙伴还是对此不太了解,接下来本文会详细带你…

“神经网络之父”和“深度学习鼻祖”Geoffrey Hinton

“神经网络之父”和“深度学习鼻祖”Geoffrey Hinton在神经网络领域数十年如一日的研究,对深度学习的推动和贡献显著。 一、早期贡献与突破 反向传播算法的引入:Hinton是将反向传播(Backpropagation)算法引入多层神经网络训练的…

室内外无缝定位技术:连接虚拟与现实的新桥梁

随着科技的快速发展,人们对于位置信息的精确度和实时性要求日益提高。在这样一个背景下,室内外无缝定位技术应运而生,成为连接虚拟与现实世界的关键桥梁。它不仅为人们提供了更加便捷、高效的生活体验,还推动了物联网、智能制造等…

Java面试八股之怎么降低锁竞争

怎么降低锁竞争 减少锁的持有时间: 尽量缩短线程持有锁的时间,只在必要时才获取锁,一旦操作完成立即释放锁。可以通过将同步代码块的范围缩小到最小必要程度来实现,避免在锁保护的代码块中执行耗时操作或等待操作,比如…

Java集合基础知识点系统性总结篇

目录 集合一、图解集合的继承体系?([图片来源](https://www.cnblogs.com/mrhgw/p/9728065.html))点击查看大图二、List,Set,Map三者的区别?三、List接口的实现3.1、Arraylist 、 LinkedList、Vector3.2、Arraylist 、 LinkedList、…

MacOS - 为什么 Mac 安装软件后安装包在桌面上无法删除?

只要你将这磁盘里面的软件放到应用程序里面去了,那么用鼠标选中这个跟磁盘一样的东西,然后按下键盘上的 Command E 即可移除桌面上的这个磁盘。

气压、湿度、震动开关、声音、红外火焰传感器 | 配合Arduino使用案例

BMP180 气压传感器 BMP180 是一种用于测量气压的科学仪器。可以获取到温度、气压、海拔。 先在 arduino ide 中安装依赖 /****** Arduino 接线 ***** Arduino 传感器* VCC 5v* GND GND* A4 SDA * A5 SCL ***********************/#include &l…

ubuntu使用oh my zsh美化终端

ubuntu使用oh my zsh美化终端 文章目录 ubuntu使用oh my zsh美化终端1. 安装zsh和oh my zsh2. 修改zsh主题3. 安装zsh插件4. 将.bashrc移植到.zshrcReference 1. 安装zsh和oh my zsh 首先安装zsh sudo apt install zsh然后查看本地有哪些shell可以使用 cat /etc/shells 将默…

③单细胞学习-pbmc的Seurat 流程

目录 1,数据读取 2,线粒体基因查看 3,数据标准化 4,识别高变基因 5,进行数据归一化 6,进行线性降维 7,确定细胞簇 8,UMAP/tSNE降维(保存pbmc_tutorial.rds&#…

如何用TCC方案轻松实现分布式事务一致性

本文作者:小米,一个热爱技术分享的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! 哈喽,大家好!我是小米,一个热爱技术的活力小青年,今天要和大家分享的是一种在分布式系统中实现事务的一种经典方案——TCC(Try Confirm Canc…

第一篇 逻辑门(与门、或门、非门、异或门)

一、实验目的 了解DE1-SOC开发板一些外设。 掌握常用组合逻辑门电路的基本原理。 学习Verilog HDL的基本语法。 学习使用ModelSim工具对设计的电路进行仿真,包括编写Testbench仿真代码,以及ModelSim工具的使用。 熟悉使用Quartus软件从创建Quartus工…

汽车MCU虚拟化--对中断虚拟化的思考(2)

目录 1.引入 2.TC4xx如何实现中断虚拟化 3.小结 1.引入 其实不管内核怎么变,针对中断虚拟化无非就是上面两种,要么透传给VM,要么由Hypervisor统一分发。汽车MCU虚拟化--对中断虚拟化的思考(1)-CSDN博客 那么,作为车规MCU龙头…

Docker基础篇之将本地镜像发布到私有库

文章目录 1. Docker Registry简介2. 将本地镜像推送到私有库 1. Docker Registry简介 Docker Registry是官方提供的工具,可以用于构建私有镜像仓库。 2. 将本地镜像推送到私有库 下载Docker Registry docker pull registry现在我们可以从镜像中看到下载的Regist…

Go语言垃圾回收(GC原理)

1. GC回收机制 1.1 V1.3标记清除法 (1)概述 1.STW暂停 STW(暂停业务逻辑,找出可达和不可达对象) 2.对可达对象做上标记 标记完成之后,对象5和对象6不可达,被GC清除.之后STW结束. (2).缺点 STW :让程序暂停,程序出现卡顿.标记需要扫描整个heap.清除数据会产生heap碎片. 1.…

【 0 基础 Docker 极速入门】镜像、容器、常用命令总结

Docker Images(镜像)生命周期 Docker 是一个用于创建、部署和运行应用容器的平台。为了更好地理解 Docker 的生命周期,以下是相关概念的介绍,并说明它们如何相互关联: Docker: Docker 是一个开源平台&#…

JAVA基础|File,IO流

File类只能对文件本身进行操作,不能读写文件里面存储的数据 IO流就是对文件进行读写的 一. File类 (一)创建对象 import java.io.File;public class FileTest1 {public static void main(String[] args) {// 1. 创建一个File对象&#xff…

Parallels Desktop for Mac 19.4.0更新了哪些内容?有什么改进?

带来了重新设计的共享 Mac 文件夹版本,这些文件夹现在是符号链接,像指针一样指向您的 Mac 文件夹中的文件,同时仍然显示在 Windows 的本地磁盘上。 修复了由于共享文件夹问题导致 NinjaTrader 无法正常启动的问题。 修复了由于共享文件夹问…

Linux VSCode和Debug相关的备忘

在使用Linux时,总是会遇到一些意想不到的困难。而且似乎无穷无尽。这里打算写一个笔记,以后逐步来完善。特别是:调试的技能,总是占程序员的主要部分。在设置可视化调试环境过程中,常会同样陷入困境,有时深感…

小猪APP分发:如何轻松进行在线封装APP

你是否曾经因为需要封装一个新版本的APP而感到头疼?传统的封装过程往往繁琐且耗时。但是,别担心,现在有了“小猪APP分发”,一切变得如此简单。 小猪APP分发www.appzhu.net是一个专门提供在线APP封装服务的平台。无论你是开发者还…

Assignement5: Multi-threaded Producer Consumer Pipeline

Assignement5: Multi-threaded Producer Consumer Pipeline. 一起来打卡学习!