Echarts x轴坐标二级分组

         在使用echarts 封装组件的时候,偶尔会遇到需要x轴坐标进行二层分组的需求。那么如何对echarts 进行二层分组呢,有以下几个步骤:

仅介绍二层分组的逻辑。有兴趣的可以进行三层延伸。

1,修改echarts Options 中xAxis 的配置。

此时若进行e二层分组,则xAxis 应该是一个数组,里面有两个x轴的配置对象。

第一个x轴对象除了需要data属性,其余属性正常配置即可。

第二个x轴对象需要配置

xAxis[{// 第一个x轴坐标(最靠近x轴的那个坐标type:'category',data:[],},{// 第二个x轴坐标type:'category',position: 'bottom', 坐标轴的位置offset:40, // 该坐标轴x轴文本向下偏移距离axisTick:{length: 40, // 增加分组下面父级坐标刻度线长度interval:  // 这个属性很重要下面介绍},axisLabel:{align: 'center',interval: 0,formatter:// 这个属性很重要,下面介绍。},data:[],}
]

现在第二个x轴配置只有axisTick.interval,axisLabel.formatter这两个属性没有介绍。在下面会继续介绍的。

2,处理接口中返回的x轴数据,此时返回的x轴数据应该是一个数组并且分为两种情况。

以下图示例

 2.1,第一种情况也是最终需要的数据结构

需要单层数据即可表达二级父子关系
interface XAxis {
    first: string,  // 第一层数据 (距离坐标轴最近的数据)
    second: string  // 第二层父级数据
}
// 则以上面数据为例,原始x轴数据为
xAxisData = [
  {second:'水果',first:'香蕉'},
  {second:'水果',first:'苹果'},
  {second: '笔', first:'圆珠笔'},
  {second:'笔', first:'钢笔'},
]
// 此种数据结构就是最为合适的。第一层x轴数据大家直接将xAxisData 中的first属性过滤即可
// 第二层数据的处理将会在第三步进行介绍

2.2,第二种接口返回的x轴数据

第二种数据结构为二层数据结构,以上图为例应该是
xAxisData = [
   {second:'水果',child:[
     {first:'香蕉'},
     {first:'苹果'}
    ]},
    {second: '笔', child:[
      {first:'钢笔'},
      {first: '圆珠笔'}
    ]}
],
如果接口返回的是这种二层数据结构,则需要将其扁平化变成上面那种只有一层的数据结构

3,编写辅助函数,配置Option

3.1,辅助函数

/*** @description: 计算第N层X轴重复字符串终止索引 n>1* @param { string[] } list 第n层x轴全部数据* @return {*}*/const countXAxisEndIndex = (list: string[]) => {const temp = {} as { [key: string]: number };if (list.length) {let newVal = list[0];let newIndex = 0;temp[list[0]] = 0;for (let i = 1; i < list.length; i++) {if (newVal !== list[i]) {temp[newVal] = newIndex;newVal = list[i];}newIndex++;}}temp[list[list.length - 1]] = list.length - 1;return temp;};/*** @description: 计算第N层X轴重复字符串起始索引 n>1* @param { string[] } list 第n层x轴全部数据* @return {*}*/const countXAxisStartIndex = (list: string[]) => {const temp = {} as { [key: string]: number };if (list.length) {let newVal = list[0];temp[list[0]] = 0;for (let i = 1; i < list.length; i++) {if (newVal !== list[i]) {newVal = list[i];temp[list[i]] = i;}}}return temp;};

3.2,在循环中配置Option

首先已知知最终x轴的数据为
xAxisData = [
  {second:'水果',first:'香蕉'},
  {second:'水果',first:'苹果'},
  {second: '笔', first:'圆珠笔'},
  {second:'笔', first:'钢笔'},
]
在循环中配置xAxis中的数据。
当然目前只有两层可以不进行循环遍历。
只需要给option.xAxis[1]中的配置属性进行赋值即可
1,首先对data 属性进行赋值
option.xAxis[1].data = xAxisData.map((item:any)=>{return item.second;})
2,配置option.xAxis[1].axisTick和option.xAxis[1].axisLabel这两个对象
首先大家可能不知道上面两个辅助数组的作用
countXAxisStartIndex,获取第N层重复字符串的起始索引
const tempStartObj = countXAxisStartIndex(xAxisData)的结果为 {水果:0,笔:2 }
countXAxisEndIndex,获取第N层重复字符串的终止索引
const tempEndObj = countXAxisEndIndex(xAxisData); 的结果为 {水果:1,笔:3}
下面就可以开始配置x轴第二层相关属性了
option.xAxis[1] = {
  ...option.xAxis[1],
  aXisTick:{
      length: 40,
      // 设置第二层刻度线的间隔,当第一个元素,以及每个重复二级元素的最后一个才会设置刻度
      interval: (index: number, value: string) => index === tempEndObj[value] || index === 0,
   },
   axisLabel:{
      align:'center',
      interval:0,
      // 去掉重复的二级坐标刻度,只保留位于一级坐标中间索引的那个二级坐标
      formatter: (value: string, index: number) => {
                const nowIndex = tempEndObj[value] - tempStartObj[value];
                if (index === tempEndObj[value] - Math.ceil(nowIndex / 2)) {
                   return value;
                 }
                 return '';
                },
   }
  };
  注意事项:一定要先进行data属性赋值,否则,下面的aXisTick.interval,aXisLabel.formatter 对应的方法就不会有回调参数了。
  
 

如何进行三层分组,以及多层分组;

大致逻辑和二层分组的逻辑是相同的。

要在循环中生成option.xAxis数组中的每个配置对象。对除了第一级的x坐标轴都需要进行设置position :‘bottom';调整offset 的数值(第N层数据距离x轴的距离。以及增加axisTick.length 刻度的长度,

以上就是echarts 中x轴坐标分组的核心逻辑。

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

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

相关文章

交换排序、归并排序、计数排序

冒泡排序&#xff1a; void BubbleSort(int* a, int n) {//第一层循环是趟数&#xff0c;第二层是交换for (int i 0; i < n-2; i){int flag 0;for (int j 0; j < n - 2 - i; j){if (a[j] > a[j 1]){swap(&a[j], &a[j 1]);flag 1;}}if (flag 0){break;…

【机器学习】K-近邻算法(KNN)全面解析

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 K-近邻算法&#xff08;KNN&#xff09;全面解析概述1. 基本概念与原理1.1 KNN算…

Excel表格保护密码遗忘怎么办?三秒钟破解密码,轻松解锁!

在我们的日常工作中&#xff0c;Excel表格是一个非常实用的工具&#xff0c;但在某些情况下&#xff0c;我们可能会遇到密码忘记的问题&#xff0c;或者在尝试打开或删除文件时被锁定。别担心&#xff0c;这里有三个简单的解决方法来帮助您解决问题。 一、尝试默认密码或常见密…

使用 Orange Pi AIpro开发板基于 YOLOv8 进行USB 摄像头实时目标检测

文章大纲 简介算力指标与概念香橙派 AIpro NPU 纸面算力直观了解 手把手教你开机与基本配置开机存储挂载设置风扇设置 使用 Orange Pi AIpro进行YOLOv8 目标检测Pytorch pt 格式直接推理NCNN 格式推理 是否可以使用Orange Pi AIpro 的 NPU 进行推理 呢&#xff1f;模型开发流程…

gitlab push 代码,密码正确,仍然提示HTTP Basic: Access denied. The provided password

HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password gitlab 登录账户密码确认正确&#xff0c;登录获取代码仍然提示以上问题&#xff0c;解决方案 …

①单细胞学习-数据读取、降维和分群

目录 ①数据读取 ②计算线粒体基因比例 ③分开进行质控 ④两组单细胞数据合并 ⑤细胞周期评分 ⑥降维标准流程 降维 UMAP可视化 选择分群 ⑦marker基因 分析marker基因 marker基因可视化 ⑧细胞定群命名 单细胞的数据格式学习&#xff1a;单细胞 10X 和seurat对象…

SpringBoot项目文件上传校验(注解版)

需求 要实现了一个文件上传和验证的功能&#xff0c;具有以下特点&#xff1a; 1. 自定义注解&#xff1a;FileValidation注解用于标记需要进行文件验证的方法。 2. 文件验证拦截器&#xff1a;FileValidationInterceptor拦截器会在每个请求处理之前被调用。如果请求处理的方…

2024年深圳市专精特新企业申报条件-专精特新企业认定、申请时间、流程及奖励补贴

一、深圳专精特新企业申报对象 根据《优质中小企业梯度培育管理暂行办法》&#xff08;工信部企业〔2022〕63号&#xff09;和《深圳市工业和信息化局优质中小企业梯度培育管理实施细则》&#xff08;深工信规〔2022〕7号&#xff09;相关规定&#xff0c;我局组织开展2023年深…

vue2.0滚动加载组件

vue2.0滚动加载组件 一、直接上代码 需求&#xff1a;刚开始用的element-ui的滚动加载组件&#xff0c;个别电脑会在滚动加载没到底就停止了&#xff0c;怀疑是有bug,就自己写了一个 一、直接上代码 <div class"threadListAttach" ref"replyscrollDom"…

git cloen的错误

~ % git clone https://github.com/xxx/core.git Cloning into core... error: RPC failed; curl 56 Recv failure: Operation timed out error: 56 bytes of body are still expected fatal: expected flush after ref listing看起来在克隆仓库时仍然遇到了问题。错误信息显示…

【软件设计师】算法

1、算法的效率 时间复杂度:程序从开始到结束所需要的时间 空间复杂度&#xff1a;算法在运行过程中临时占用存储空间大小的度量 时间渐近复杂度&#xff1a;时间复杂度由最高次幂决定(判断大小技巧&#xff1a;将n10代入&#xff09; O(log2 n):二分查找法 O(n&#xff09;:for…

MySql8.0.25部署MGR集群

1 准备mysql单机实例 当前部署的mysql使用8.0.25&#xff0c;使用传统的方式初始化data目录&#xff0c;启动服务等。 --初始化&#xff0c;start.conf会放在当前文档目录中 ./mysqld --defaults-file/mgr/start.conf --explicit_defaults_for_timestamp --initialize-insecur…

家政预约小程序07服务分类展示

目录 1 创建服务分类页面2 侧边栏选项卡配置3 配置数据列表4 从首页跳转到分类页总结 上一篇我们开发了首页的服务展示功能&#xff0c;本篇我们讲解一下服务分类功能的开发。在小程序中通常在底部导航栏有一个菜单可以展示所有服务&#xff0c;侧边选项卡可以展示分类信息&…

Python零基础一天丝滑入门教程(非常详细)

目录 第1章 初识python 第1节 python介绍 1.为什么要学习Python&#xff1f; 2.python排名 3.python起源 4.python 的设计目标 第2节 软件安装 第2章 快速上手&#xff1a;基础知识 第1节 Python3 基础语法 Python 变量 字面量 数据类型转换 Python3 注释 数据类…

人工智能核心技术:机器学习总览

&#x1f4a1;机器学习作为人工智能的核心&#xff0c;与计算机视觉、自然语言处理、语音处理和知识图谱密切关联 &#x1f4a1;【机器学习】是实现人工智能的核心方法&#xff0c;专门研究计算机如何模拟/实现生物体的学习行为&#xff0c;获取新的知识技能&#xff0c;利用经…

垂类短视频:四川鑫悦里文化传媒有限公司

垂类短视频&#xff1a;内容细分下的新媒体力量 随着移动互联网的迅猛发展和智能手机的普及&#xff0c;短视频已成为当下最受欢迎的媒介形式之一。四川鑫悦里文化传媒有限公司而在短视频领域&#xff0c;一个新兴的概念——“垂类短视频”正逐渐崭露头角&#xff0c;以其独特…

设计模式 21 备忘录模式 Memento Pattern

设计模式 21 备忘录模式 Memento Pattern 1.定义 备忘录模式是一种行为型设计模式&#xff0c;它允许你将一个对象的状态保存到一个独立的“备忘录”对象中&#xff0c;并在之后恢复到该状态。 2.内涵 主要用于以下场景&#xff1a; 需要保存对象状态以备恢复&#xff1a; 当…

torch.matmul()的用法

这篇文章记录torch.matmul()的用法 这里仿照官方文档中的例子说明&#xff0c;此处取整数随机数&#xff0c;用于直观的查看效果&#xff1a; vector x vector 两个一维向量的matmul相当于点积&#xff0c;得到一个标量 tensor1 torch.randint(1, 6, (3,)) tensor2 torch.…

机器学习基础笔记

周志华老师的机器学习初步的笔记 绪论 知识分类 科学 是什么&#xff0c;为什么 技术 怎么做 工程 多快好省 应用 口诀&#xff0c;技巧&#xff0c;实际复杂环境&#xff0c;行行出状元 定义 经典定义 利用经验改善系统自身的性能 训练数据 模型 学习算法 分类 决策树…

Django5+React18前后端分离开发实战14 React-Router6 入门教程

使用nodejs18 首先&#xff0c;将nodejs切换到18版本&#xff1a; nvm use 18创建项目 npm create vitelatest zdpreact_basic_router_dev -- --template react cd zdpreact_basic_router_dev npm install react-router-dom localforage match-sorter sort-by npm run dev此…