echarts学习：使用dataset管理数据

前言

在我们公司的组件库中有许多echarts图表相关的组件，这些组件在使用时，只需将图表数据以特定的格式传入组件中，十分方便。因此当我得知echarts 可以使用dataset集中管理数据时，我就决定自己一定要搞懂它，于是在最近的开发工作中我便使用dataset来绘制图表。本文就将介绍我在使用后对dataset的理解。关于echarts数据集的更多用法，推荐参考官方的使用手册。

1.给数据集设置数据

在dataset.source中设置数据，数据可以设置为三种形式：

这样就十分方便，不用我们再去进行复杂的数据处理，请求到的数据可以可以直接放到数据集中使用。

但是这样就有一个新的问题：数据集怎么用？

2.维度的概念

数据集的用法无非就是将二维表中的某一行或某一列的数据提供给系列（轴线）使用，提供数据的行（列）就被叫做维度。

如果二维表中的每一行映射一个系列，那么此时每一行就被称为“维度”，每一列则被称为“数据项”；

反之，如果让每一列映射一个系列，那么此时每一列就把称为“维度”，而每一行则被称为“数据项”。

可以给维度设置"维度名称"，在默认情况下二维表的第一列或第一行就是维度名称

在折线图中使用数据集中的数据

（1）默认映射规则

这里我举一个例子，我有如下的一个折线图。

{
 //...
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLine: {},
  },
  yAxis: [
    {
      type: "value",
      name: "水位(m)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "流量(m³/s)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },

  ],
  series: [
    {
      name: "xxx水位",
      type: "line",
      yAxisIndex: 0,
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "xxx流量",
      type: "line",
      yAxisIndex: 1,
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "yyy流量",
      type: "line",
      yAxisIndex: 1,
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: "yyy水位",
      type: "line",
      yAxisIndex: 0,
      data: [320, 332, 301, 334, 390, 330, 320],
    },
  ],
}

现在我将这两部分的数据以二维数组的形式放到dataset中，效果如下：

{
  dataset: {
    source: [
      ["property", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      ["xxx水位", 120, 132, 101, 134, 90, 230, 210],
      ["xxx流量", 220, 182, 191, 234, 290, 330, 310],
      ["yyy流量", 150, 232, 201, 154, 190, 330, 410],
      ["yyy水位", 320, 332, 301, 334, 390, 330, 320],
    ],
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {},
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLine: {},
  },
  yAxis: [
    {
      type: "value",
      name: "水位(m)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
    {
      type: "value",
      name: "流量(m³/s)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
    },
  ],
  series: [
    {
      type: "line",
      yAxisIndex: 0,
    },
    {
      type: "line",
      yAxisIndex: 1,
    },
    {
      type: "line",
      yAxisIndex: 1,
    },
    {
      type: "line",
      yAxisIndex: 0,
    },
  ],
}

对比前后的渲染效果可以得到以下结论：

  1. 二维表的首列被作为了x轴的数据
  2. 二维表的其它列被作为了系列的数据（每一行对应一个系列）
  3. 二维表的第一行是维度名称

以上的结论其实就是在折线图中数据集的默认映射规则。

现在数据集的映射规则是不符合我们的要求的，我们需要考虑如何修改映射规则。

（2）自定义映射规则

自定义折线图系列的映射规则主要用到series-line.seriesLayoutBy和series-line.encode这两配置项

seriesLayoutBy用来设置系列使用行（还是列）作为维度

{
  dataset: {
    source: [
      ["property", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      ["xxx水位", 120, 132, 101, 134, 90, 230, 210],
      ["xxx流量", 220, 182, 191, 234, 290, 330, 310],
      ["yyy流量", 150, 232, 201, 154, 190, 330, 410],
      ["yyy水位", 320, 332, 301, 334, 390, 330, 320],
    ],
  },
  title: [
    {
      text: "以列为维度",
      left: "10%",
      textStyle:{
        color: 'red'
      }
    },

    {
      text: "以行为维度",
      left: "10%",
      top: "48%",
      textStyle:{
        color: 'red'
      }
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  legend: {},
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: [{ bottom: "55%" }, { top: "55%" }],
  xAxis: [
    {
      type: "category",
      gridIndex: 0,
    },
    {
      type: "category",
      gridIndex: 1,
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "水位(m)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
      gridIndex: 0,
    },
    {
      type: "value",
      name: "流量(m³/s)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
      gridIndex: 0,
    },

    {
      type: "value",
      name: "水位(m)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
      gridIndex: 1,
    },
    {
      type: "value",
      name: "流量(m³/s)",
      axisLine: {
        show: true,
      },
      axisLabel: {
        inside: true,
      },
      gridIndex: 1,
    },
  ],
  series: [
    // 默认映射规则：以列为维度
    {
      type: "line",
      yAxisIndex: 0,
    },
    {
      type: "line",
      yAxisIndex: 1,
    },
    {
      type: "line",
      yAxisIndex: 1,
    },
    {
      type: "line",
      yAxisIndex: 0,
    },

    // 新的映射规则：以行为维度
    {
      type: "line",
      xAxisIndex: 1,
      yAxisIndex: 2,
      seriesLayoutBy: "row",
    },
    {
      type: "line",
      xAxisIndex: 1,
      yAxisIndex: 3,
      seriesLayoutBy: "row",
    },
    {
      type: "line",
      xAxisIndex: 1,
      yAxisIndex: 3,
      seriesLayoutBy: "row",
    },
    {
      type: "line",
      xAxisIndex: 1,
      yAxisIndex: 2,
      seriesLayoutBy: "row",
    },
  ],
}

encode则指定了系列如何使用维度。encode是一个对象，其中可以设置许多属性，但对于折线图来说最重要的是encode.y和encode.x，前者表示当前的折线将哪个维度的数据映射到y轴，后者表示当前折线将哪个维度的数据映射到x轴。

  dataset: {
    source: [
      ["property", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      ["xxx水位", 120, 132, 101, 134, 90, 230, 210],
      ["xxx流量", 220, 182, 191, 234, 290, 330, 310],
      ["yyy流量", 150, 232, 201, 154, 190, 330, 410],
      ["yyy水位", 320, 332, 301, 334, 390, 330, 320],
    ],
  },
  series: [
    {
      type: "line",
      yAxisIndex: 0,
      seriesLayoutBy: "row",
      encode: {
        //将"维度 4" (第5行数据) 的维度名作为系列名
        seriesName: 4,
        // 将"维度 0" (第1行数据) 映射到x轴
        x:0,
        // 将"维度 4" (第5行数据) 映射到y轴
        y: 4,
      },
    },
    {
      type: "line",
      yAxisIndex: 1,
      seriesLayoutBy: "row",
      encode: { 
        //将"维度 xxx流量" 的维度名作为系列名
        seriesName: "xxx流量", 
         // 将"维度 1" (第2行数据) 映射到x轴
        x:1,
        //将"维度 xxx流量"的数据映射到y轴
        y: "xxx流量"
      },
    },
  ],

参考资料

  1. Documentation - Apache ECharts

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第2章 Rust初体验6/8：Option枚举及其变体：能避免空指针异常问题：猜骰子冷热游戏

第2章 Rust初体验6/8：Option枚举及其变体：能避免空指针异常问题：猜骰子冷热游戏

讲动人的故事，写懂人的代码 2.6 故事4: 一直让玩家不断猜 我们全班要一起用三种语言来写第4个故事啦。这可能是我们所有故事中最复杂的一个了。不过别担心，贾克强已经把这个故事的需求都用投影仪展示出来了。 程序会提示玩家猜两个骰子的点数之和。如果玩家第一次输入点数之…
阅读更多...
C#反射机制介绍

C#反射机制介绍

文章目录 简介一、什么是反射二、反射的用途三、反射用到的命名空间及主要类四、Type类五、Assembly类六、使用反射实现上面的程序七、反射的优缺点 简介 这篇文章介绍了C#的反射机制，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值&a…
阅读更多...
DAY5-力扣刷题

DAY5-力扣刷题

1.两两交换链表中的节点 24. 两两交换链表中的节点 - 力扣（LeetCode） 给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换…
阅读更多...
Kubernetes新手必看：快速生成YAML清单的终极指南！

Kubernetes新手必看：快速生成YAML清单的终极指南！

在这篇文章中，你将学习到几种快速创建Kubernetes YAML清单的方法，这些方法可以帮助你在Kubernetes中测试和部署应用程序。这些技巧同样适用于Kubernetes认证考试。 在使用Kubernetes时，我们经常需要搜索Kubernetes YAML文件以便部署测试Pod、…
阅读更多...
编写一个简单的Mybatis插件

编写一个简单的Mybatis插件

1.编写一个类，实现Intercepter这个接口 2.完成这个类的方法，并通过注解Intercepts来告诉Mybatis这个插件拦截哪个类和哪个方法 3.在Mybatis的全局配置文件里注册这个插件，让插件生效 4.玩一个实际功能的插件
阅读更多...
家庭智能助手：Kompas AI引领家居智能化新纪元

家庭智能助手：Kompas AI引领家居智能化新纪元

一、引言 在数字化浪潮的推动下，现代家庭生活正迅速向智能化转型。从简单的自动化设备到复杂的智能家居系统，智能技术正悄无声息地改变我们的日常生活。Kompas AI作为一款前沿的家庭智能助手，不仅预示着家庭生活的未来趋势，更以其…
阅读更多...
每日一练：攻防世界：ewm

每日一练：攻防世界：ewm

这道题我尝试了使用montagegaps解题，但是没有解出来，图片数量不是很多，可以尝试用PS直接拼图，但是这样学不到东西，我也就没尝试，直接看的官方WP 这段代码应该是改变工作目录到small，并且变量当…
阅读更多...
Sping源码（九）—— Bean的初始化（非懒加载）— Bean的创建方式（自定义BeanPostProcessor）

Sping源码（九）—— Bean的初始化（非懒加载）— Bean的创建方式（自定义BeanPostProcessor）

序言 之前文章有介绍采用FactoryBean的方式创建对象，以及使用反射创建对象。 这篇文章继续介绍Spring中创建Bean的形式之一——自定义BeanPostProcessor。 之前在介绍BeanPostProcessor的文章中有提到，BeanPostProcessor接口的实现中有一个Instantiatio…
阅读更多...
Tensorflow-GPU工具包了解和详细安装方法

Tensorflow-GPU工具包了解和详细安装方法

目录 基础知识信息了解 显卡算力 CUDA兼容 Tensorflow gpu安装 CUDA/cuDNN匹配和下载 查看Conda driver的版本 下载CUDA工具包 查看对应cuDNN版本 下载cuDNN加速库 CUDA/cuDNN安装 CUDA安装方法 cuDNN加速库安装 配置CUDA/cuDNN环境变量 配置环境变量 核验是否安…
阅读更多...
【乐吾乐2D可视化组态编辑器】导航

【乐吾乐2D可视化组态编辑器】导航

支持点击图元，切换画面或跳转链接。 乐吾乐2D可视化组态编辑器地址：https://2d.le5le.com/ 切换画面 1. 添加事件 2. 设置事件行为 事件行为"发送消息"，消息名选择"导航"。 3. 配置消息参数 消息参数，…
阅读更多...
图像的对比度和亮度

图像的对比度和亮度

目标 访问像素值用0来初始化矩阵cv::saturate_cast像素转换提高一张图像的亮度 原理 图像处理 图像变换可以被视作两个步骤： 点操纵（像素转换）相邻区域转换（以面积为基础） 像素转换 在这种图像处理的转换过程中…
阅读更多...
操作系统 - 进程的控制（创建与终止）

操作系统 - 进程的控制（创建与终止）

进程控制 文章目录 进程控制进程创建进程的终止wait()和waitpd()僵尸进程孤儿进程 进程创建 程序在执行的过程中，可能会创建多个进程，创建进程称为父进程，新的进程称为子进程，每个新的进程也可以创建其他进程，从而形成…
阅读更多...
LinkedHashMap详解

LinkedHashMap详解

目录 LinkedHashMap详解1、LinkedHashMap的继承体系2、LinkedHashMap的特性介绍和代码示例①、特性②、适用场景使用LinkedHashMap 实现最简单的 LRU缓存 3、LinkedHashMap的构造函数4、LinkedHashMap是如何存储元素的，底层数据结构是什么？LinkedHashMap…
阅读更多...
功能强大的多功能文档转换工具Neevia Document Converter Pro 7.5.0.241

功能强大的多功能文档转换工具Neevia Document Converter Pro 7.5.0.241

Neevia Document Converter Pro是一款功能强大的Windows软件，旨在将文档转换为各种格式，包括PDF、TIFF、JPEG和许多其他格式。该程序专为在企业环境中使用而设计，提供文档转换和处理过程的自动化，这使其成为处理大量文档的组织的***工具。 Neevia Document Converter Pro的…
阅读更多...
基于Quartus Prime18.1的安装与FPGA的基础仿真（联合Modelsim）教程

基于Quartus Prime18.1的安装与FPGA的基础仿真（联合Modelsim）教程

Quartus是一种美国科技公司Intel（英特尔）公司开发的FPGA（现场可编辑门阵列）设计编译软件，用作设计、仿真、综合和布局、支持多种编程语言，包括VHDL、Verilog等，并具有丰富的功能和工具库&#x…
阅读更多...
游戏中插入音效

游戏中插入音效

一、背景音乐 准备：素材音乐 方法： 1、方法1： (1) 将背景音乐 bgAudio 拖放到Hierarchy面板 (2) 选中 bgAudio，勾选开始运行就播放、循环播放。调节音量（volume) 2、方法2： (1) Create Empty&#x…
阅读更多...
日志通关(一)

日志通关(一)

转载：https://mp.weixin.qq.com/s/eIiu08fVk194E0BgGL5gow 一、 日志体系 日志发展到今天，被抽象成了三层：接口层、实现层、适配层： 接口层：或者叫日志门面（facade），就是interfa…
阅读更多...
Aspice介绍——测试流程

Aspice介绍——测试流程

文章目录 ASPICE简介一、V字模型的示意二、测试领域2.1 SWE.6：软件合格性测试过程目的过程成果基本实践（BP） 2.2 SYS.4:系统集成和集成测试过程目的过程成果基本实践（BP） 2.3 SYS.5：系统合格性测试过程目的…
阅读更多...
【linux网络(四)】传输层协议详解(上)

【linux网络(四)】传输层协议详解(上)

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:Linux从入门到精通⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学更多操作系统知识   🔝🔝 Linux网络 1. 前言2. UDP协议…
阅读更多...
备忘录怎么插入文件和附件 备忘录插入文件附件方法

备忘录怎么插入文件和附件 备忘录插入文件附件方法

在繁忙的工作与生活中，我们时常需要记录各种信息，而备忘录则成为了我们不可或缺的得力助手。然而，当备忘录中需要包含的文件或附件越来越多时，如何高效、便捷地管理这些文件，便成为了一个亟待解决的问题。 想象一下&a…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站