echarts学习：使用dataset管理数据

news2025/7/12 18:02:10

前言

在我们公司的组件库中有许多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.coloradmin.cn/o/1822017.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

导入导出带下拉框模版（EasyExcel）

导入导出带下拉框模版（EasyExcel）

前言 项目进行到新的一个迭代了，赶了1周需求，接口终于处理完了。分享记录下迭代中处理导入、导出、下载模版功能的细节吧。 一、场景 EasyExcel（阿里）实现Excel数据处理三层表头，第二、三层表头动态数据根据第二、三层…
阅读更多...
WebMvcConfigurer配置不当导致鉴权失败

WebMvcConfigurer配置不当导致鉴权失败

最近同事说他们有个新需求，需要对接口进行加解密，所以他给项目配置了一个拦截器，但这个拦截器直接导致了每个接口鉴权失败，每次调用接口都是提示没有session信息。 公司内的所有java项目是公用同一套基础依赖，所以我也…
阅读更多...
模具保护器 具体应用在哪些场所

模具保护器 具体应用在哪些场所

模具监视器，被誉为模具的忠诚守护者，其应用领域遍布各类生产型设备，宛如一道坚实的防线，捍卫着模具的安全与生产的高效。以下是模具监视器在各领域所展现的卓越风采及其非凡功能： 在生产型设备的广阔天地里&#xff0c…
阅读更多...
springboot美食菜谱分享平台优化版（源码+sql+论文报告）

springboot美食菜谱分享平台优化版（源码+sql+论文报告）

绪论 1.1 研究意义 当今社会作为一个飞速的发展社会，网络已经完全渗入人们的生活， 网络信息已成为传播的第一大媒介， 可以毫不夸张说网络资源获取已逐步改变了人们以前的生活方式，网络已成为人们日常，休闲主要工具。…
阅读更多...
加密软件有哪些优点？除了对文件加密这几点也很重要

加密软件有哪些优点？除了对文件加密这几点也很重要

加密软件用于保护数据安全，防止未经授权访问、数据泄露。通过使用加密算法来实现对数据的加密处理，确保数据在传输、存储过程中的机密性与完整性。 加密软件有哪些优点？ 1、灵活控制：允许更灵活地配制加密控制条件，满…
阅读更多...
夏季河湖防溺水新举措：青犀AI视频智能监控系统保障水域安全

夏季河湖防溺水新举措：青犀AI视频智能监控系统保障水域安全

近日一则新闻引起大众关注，有网友发布视频称，假期在逛西湖时，发现水面上“平躺”漂浮着一名游客在等待救援。在事发3分钟内，沿湖救生员成功将落水游客救到了岸边。 随着夏季的到来，雨水增多，各危险水域水位…
阅读更多...
Java内存模型，堆、栈和方法区的区别

Java内存模型，堆、栈和方法区的区别

Java内存管理是Java虚拟机（JVM）技术的核心之一。了解Java内存管理对于提高程序性能、解决内存泄漏和优化资源利用至关重要。 一、Java内存模型（Java Memory Model, JMM） Java内存模型描述了Java程序中变量（包括实例字…
阅读更多...
Flink作业执行之 3.StreamGraph

Flink作业执行之 3.StreamGraph

Flink任务如何跑起来之 3.StreamGraph 1. StreamGraphGenerator 在前文了解Transformation和StreamOperator后。接下来Transformation将转换成StreamGraph，即作业的逻辑拓扑结构。 在env.execute()方法中调用getStreamGraph方法生成StreamGraph实例。StreamGraph…
阅读更多...
Electron无感打印 静默打印（vue3 + ts + vite）

Electron无感打印 静默打印（vue3 + ts + vite）

（electron vue3 项目搭建部分 自行查找其他资源 本文只讲解Electronvue3 如何实现静默打印） 第一步获取打印机资源 渲染端代码（vue里面） // 因使用了vite所以在浏览器中打开 require会报错 只能在electron中 const { ipcRender…
阅读更多...
JS实现文字溢出隐藏效果

JS实现文字溢出隐藏效果

需求场景 由于项目原因，经常需要使用到canvas来将dom生成为图片供用户保存，但canvas的css属性（例如本文实现的文字溢出隐藏效果）支持并不全面，所有有些功能只能用JS来实现了 实现思路 用JS循环判断填充文本后的元素…
阅读更多...
Ollama在windows上的设置

Ollama在windows上的设置

下载 Download Ollama on macOS 安装：是不可以选择安装路径，系统自动运行，不启动模型不占用GPU 参数设置：windows添加环境变量（需要重启ollama） 修改模型位置：添加 OLLAMA_MODELS D:\LLM\Oll…
阅读更多...
【C++】模板及模板的特化

【C++】模板及模板的特化

目录 一，模板 1，函数模板 什么是函数模板 函数模板原理 函数模板的实例化 推演(隐式)实例化 显示实例化 模板的参数的匹配原则 2，类模板 什么是类模板 类模板的实例化 二，模板的特化 1，类模板的特化 全特化…
阅读更多...
基于uni-app与图鸟UI打造的各领域移动端模板大赏

基于uni-app与图鸟UI打造的各领域移动端模板大赏

随着移动互联网的迅猛发展，各类移动端应用层出不穷，为了帮助企业快速搭建高效、美观的移动平台，我们基于强大的uni-app与图鸟UI，精心打造了不下于40套覆盖多个领域的移动端模板。今天，就让我们一起领略这些模板的风采吧…
阅读更多...
django-vue-admin 本地部署

django-vue-admin 本地部署

一、项目地址 主分支：master（稳定版本） 开发分支：develop django-vue3-admin-masterhttps://gitee.com/huge-dream/django-vue3-admin 注意：下载master分支zip代码包，解压后删掉web\src\views\syst…
阅读更多...
185.二叉树：二叉搜索树的最近公共祖先（力扣）

185.二叉树：二叉搜索树的最近公共祖先（力扣）

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL) {}* };*/class Solution { public:// 函数用于寻找二叉搜索树中节点 p 和 q 的最低…
阅读更多...
小程序外卖开发中的关键技术与实现方法

小程序外卖开发中的关键技术与实现方法

小程序外卖服务凭借其便捷性和灵活性，正成为现代餐饮行业的重要组成部分。开发一个功能完善的小程序外卖系统，需要掌握一系列关键技术和实现方法。本文将介绍小程序外卖开发中的核心技术，并提供具体的代码示例，帮助开发者理解和实…
阅读更多...
慎投！4区SCISSCI有停刊风险！网传的水刊之王解析大全，真的好投吗？

慎投！4区SCISSCI有停刊风险！网传的水刊之王解析大全，真的好投吗？

本周投稿推荐 SSCI • 中科院2区，6.0-7.0（录用友好） EI • 各领域沾边均可（2天录用） CNKI • 7天录用-检索（急录友好） SCI&EI • 4区生物医学类，0.5-1.0（录用…
阅读更多...
JDBC操作数据库的方法

JDBC操作数据库的方法

目录 一、JDBC介绍 二、使用方法（以MySQL为例） （1）MySQL的jar包，导入到IDEA （2）使用代码，操作数据库 1）设置数据源 1.创建MysqlDataSource对象，使用set…
阅读更多...
【Unity每日一记】FairyGUI为什么能自动生成代码，它的好处是什么

【Unity每日一记】FairyGUI为什么能自动生成代码，它的好处是什么

👨‍💻个人主页：元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏：uni…
阅读更多...
GPT办公与科研应用、论文撰写、数据分析、机器学习、深度学习及AI绘图高级应用

GPT办公与科研应用、论文撰写、数据分析、机器学习、深度学习及AI绘图高级应用

原文链接：GPT办公与科研应用、论文撰写、数据分析、机器学习、深度学习及AI绘图高级应用https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247606667&idx3&sn2c5be84dfcd62d748f77b10a731d809d&chksmfa82606ccdf5e97ad1a2a86662c75794033d8e2e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023