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.mzph.cn/web/21736.shtml

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

相关文章

实验四:基于System-Verilog的FPGA设计与仿真

实验四:基于System-Verilog的FPGA设计与仿真 实验目的: 学习和掌握System Verilog基本语法,在DE2-115开发板上重新设计之前做过的Verilog练习,如流水灯、全加器或者VGA显示、超声波测距 等,并完成 testbench 仿真。 …

定时开放防火墙端口,并自动关闭

限时开放端口脚本 manage_port.sh 使用说明 简介 manage_port.sh 是一个用于在 Linux 系统上临时开放并随后关闭指定端口的脚本。该脚本接受端口号和时间(以分钟为单位)作为参数,并根据系统自动检测使用 ufw 或 firewalld 防火墙来管理端口…

【贪心算法·哈夫曼编码问题】从定长编码和不定长编码讲到最小化带权路径长度和

一、问题介绍 1.1:编码问题 首先,我们知道,数字字符等任何数据的底层,都是以二进制(0,1序列)的方式存储在计算机内的。 对于“编码”其实就是那些能显示在计算机屏幕上的:不同字母、汉字、字…

半导体光子电学期末笔记2: 光子晶体 Photonic crystals

光子晶体概述 光子晶体定义和分类 [P4-5] 光子晶体是一种在一维、二维或三维空间内周期性排列的多层介质。这些结构通过在光子尺度上排列的重复单元,可以对光进行调控和控制。具体来说,光子晶体是指那些在空间上具有周期性排列的介质结构,它…

C++中的‘位’操作

目录 摘要 基本位操作 1. 按位与(AND)&: 2. 按位或(OR)|: 3. 按位异或(XOR)^: 4. 按位取反(NOT)~: 5. 左移(Le…

JavaWeb学习:Vue+Element-plus实现文件上传

需求: JavaWeb的购物车系统需要实现新增商品的功能。商品的展示图片需要与商品的基础信息一同上传至服务器,图片保存路径则随基础信息异同保存至数据库。 实现: 前端: 1. 选择相应的文件上传组件: 选择点击按钮手…

【深度学习】温故而知新4-手写体识别-多层感知机+CNN网络-完整代码-可运行

多层感知机版本 import torch import torch.nn as nn import numpy as np import torch.utils from torch.utils.data import DataLoader, Dataset import torchvision from torchvision import transforms import matplotlib.pyplot as plt import matplotlib import os # 前…

wvp-gb28181-pro搭建流媒体服务器,内存占用过高问题

直接给出解决办法,端口暴露的太多了,暴露了500个端口导致从3g---->11g 遇到的问题,直接使用镜像《648540858/wvp_pro:latest》在宿主机上运行,如我下面的博客 https://blog.csdn.net/weixin_41012767/article/details/137112338?spm100…

FASTGPT:可视化开发、运营和使用的AI原生应用

近年来,随着人工智能(AI)技术的迅猛发展,AI的应用逐渐渗透到各行各业。作为一种全新的开发模式,AI原生应用正逐步成为行业的焦点。在这方面,FASTGPT无疑是一款颇具代表性的产品。本文将详细介绍FASTGPT的设…

面向对象编程高级概念详解

面向对象编程(Object-Oriented Programming, OOP)不仅是一种编程范式,更是一种思考和设计软件的方法。本文将深入探讨OOP中的几个核心概念,包括析构函数、深浅拷贝、静态成员、单例模式、操作符重载、友元以及前与后的区别&#x…

Appium自动化环境搭建保姆级教程

APP自动化测试运行环境比较复杂,稍微不注意安装就会失败。我见过不少朋友,装了1个星期,Appium 的运行环境还没有搭好的。 搭建环境本身不是一个有难度的工作,但是 Appium 安装过程中确实存在不少隐藏的比较深的坑,如果…

用友NC pagesServlet SQL注入致RCE漏洞复现(XVE-2024-13067)

0x01 产品简介 用友NC是由用友公司开发的一套面向大型企业和集团型企业的管理软件产品系列。这一系列产品基于全球最新的互联网技术、云计算技术和移动应用技术,旨在帮助企业创新管理模式、引领商业变革。 0x02 漏洞概述 用友NC /portal/pt/servlet/pagesServlet/doPost接口…

操作系统入门系列-MIT6.828(操作系统工程)学习笔记(三)---- xv6初探与实验一(Lab: Xv6 and Unix utilities)

系列文章目录 操作系统入门系列-MIT6.S081(操作系统)学习笔记(一)---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828(操作系统工程)学习笔记(二)----课程实验环境搭建&#x…

SM国密加密算法简介

国密(商密)算法算法类型是否公开技术特点应用场景SM1对称密码算法否,需要加密芯片的接口进行调用加密强度与AES相当电子政务/商务,智能IC卡、加密卡等SM2非对称密码算法是基于ECC,签名速度与密钥生成速度快于RSA&#…

Vue3 全屏组件 源码

在Vue 3中&#xff0c;实现了全屏功能的组件&#xff0c;开箱即用。 使用了screenfull依赖库&#xff0c;可以省去浏览器适配的麻烦。 代码如下&#xff1a; <template><div ref"myFullScreen" ><slot></slot></div> </template…

ResizeObserver监听画布尺寸改变动态渲染echarts

前言&#xff1a; 在日常开发中有时遇到同数据相关的业务可能会用到echarts插件。一般在封装echarts组件的时候大家可能都会通过windows对象监听浏览器窗口大小的改变动态渲染echarts,这样当echarts窗口改变导致echarts画布元素大小改变的同时&#xff0c;就能调用相关api进行重…

RocketMQ相关知识知多少

一、RocketMQ的定义 官网网址&#xff1a;领域模型概述 | RocketMQ Apache RocketMQ 自诞生以来&#xff0c;因其架构简单、业务功能丰富、具备极强可扩展性等特点被众多企业开发者以及云厂商广泛采用。历经十余年的大规模场景打磨&#xff0c;RocketMQ 已经成为业内共识的金…

Flink的简单学习二

一 Flink的核心组件 1.1 client 1.将数据流程图DataFlow发送给JobManager。 1.2 JobManager 1.收集client的DataFlow图&#xff0c;将图分解成一个个的task任务&#xff0c;并返回状态更新数据给client 2.JobManager负责作业调度&#xff0c;收集TaskManager的Heartbeat和…

方法调研:DDOS检测有哪些方法?

检测DDoS攻击的方法多种多样,主要可以归纳为以下几类:流量分析、行为分析、协议分析、分布式检测和基于机器学习的方法。每种方法都有其独特的优势和适用场景。以下是这些方法的详细介绍: 1. 流量分析 基线分析 原理:建立正常流量的基线,通过比较当前流量与基线的偏差来…

【Java】--SpringBoot 统一异常处理

目录 统一异常处理 统一异常处理 通过使用注解ControllerAdvice&#xff08;控制器通知类&#xff09;ExceptionHandler&#xff08;异常处理器&#xff09;来实现&#xff0c;两个结合表示出现异常的时候执行某个通知&#xff0c;即执行某个方法事件。 对应的异常类执行对应…