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.mzph.cn/pingmian/27109.shtml

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

相关文章

oracle 删除当前用户下所有表

oracle 删除当前用户下所有表

荆轲刺秦王 通常呢 我们将正式环境的 oracle 数据库 导出成 dmp 文件，然后导入到测试环境或者本地环境，期间可能会出现各种问题。那么如何使错误的导入数据全部删除呢。可以这样做： 1. 本地虚拟机启动 oracle 服务 2. sqldeveloper 连接 o…
阅读更多...
vue 安装依赖报错

vue 安装依赖报错

解决方法： npm install --legacy-peer-deps 然后再运行项目即可。
阅读更多...
LabVIEW利用旋转编码器脉冲触发数据采集

LabVIEW利用旋转编码器脉冲触发数据采集

利用旋转编码器发出的脉冲控制数据采集，可以采用硬件触发方式，以确保每个脉冲都能触发一次数据采集。本文提供了详细的解决方案，包括硬件连接、LabVIEW编程和触发设置，确保数据采集的准确性和实时性。 一、硬件连接 1. 旋转编码…
阅读更多...
北斗应急通信手持终端如何在户外使用

北斗应急通信手持终端如何在户外使用

北斗应急通信手持终端在户外的使用，需要遵循一定的步骤和注意事项以确保其高效、安全地运作。以下是一个清晰的使用指南： 一、准备阶段 检查电量：确保北斗应急通信手持终端的电量充足，并携带备用电源以应对长时间使用的情况。 熟…
阅读更多...
Ubuntu系统设置中文输入法

Ubuntu系统设置中文输入法

重新设置超级用户权限(root)密码(非必要) sudo passwd root 需要注意的是Ubuntu的root密码不能少于8个字符 设置成功后输入命令和新的密码即可无需输入sudo启用root命令 su - 更新软件包列表 sudo apt update sudo apt upgrade 安装fcitx5输入法框架 个别情况需要卸载旧的…
阅读更多...
红黑树【C++实现】

红黑树【C++实现】

文章目录 红黑树的概念红黑树的性质红黑树的操作红黑树结点的定义红黑树的插入情况一：插入结点的叔叔存在，且叔叔的颜色是红色情况二: 插入结点的叔叔存在，且叔叔的颜色是黑色情况三: 插入结点的叔叔不存在 红黑树的验证红黑树的查找 红黑树的…
阅读更多...
实现直流高电压（100Vdc～1000Vdc）检测的采样电路（隔离方案）

实现直流高电压（100Vdc～1000Vdc）检测的采样电路（隔离方案）

目前，在电力系统自动化领域、新能源电动汽车领域以及高压储能领域，经常需要采样、检测高压直流母线电压，一般直流高压可能达到100Vdc～1000Vdc，结合电路成本和采样精度，我们设计人员就需要选择合适的采样电路…
阅读更多...
【elementui源码解析】如何实现自动渲染md文档-第一篇

【elementui源码解析】如何实现自动渲染md文档-第一篇

文章目录 目录 背景 获取源码 代码分析 背景 之前基于vant3的源码开发过二次开发过组件，其中vant实现了将md文档渲染到界面上，有天突发奇想想知道这是如何实现的将md文档渲染到界面上的，因为平时开发中使用elementui占多数，所…
阅读更多...
java线程池讲解！核心参数

java线程池讲解！核心参数

创建方式 | 构造方法 Executor构造方法 存放线程的容器&#xff1a; private final HashSet<Worker> workers new HashSet<Worker>(); 构造方法&#xff1a; public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAliveTime,TimeUnit uni…
阅读更多...
利用Morph Studio平台免费生成AI视频教程和效果体验

利用Morph Studio平台免费生成AI视频教程和效果体验

今天体验一下生成AI视频平台&#xff0c;目前是免费的&#xff0c;但生成效果还是不错的,可以根据输入文字&#xff0c;或者上传图片&#xff0c;或者上传视频来自动生成视频。 访问官网&#xff0c;登录之后点击“create Library” &#xff0c;比如我建了一个“AI视频”的Li…
阅读更多...
4S店试驾线上预约小程序源码系统 前后端分离 带完整的源代码包+安装部署教程

4S店试驾线上预约小程序源码系统 前后端分离 带完整的源代码包+安装部署教程

系统概述 这款 4S 店试驾线上预约小程序源码系统旨在为 4S 店和消费者提供便捷、高效的试驾预约服务。通过小程序&#xff0c;消费者可以轻松预约试驾&#xff0c;4S 店可以方便地管理预约信息&#xff0c;提高工作效率和服务质量。 代码示例 系统特色功能一览 1.便捷的预约流…
阅读更多...
面向对象编程重载

面向对象编程重载

系列文章目录 文章目录 系列文章目录前言一、重载&#xff08;overload&#xff09; 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了…
阅读更多...
floating_point的IP核使用

floating_point的IP核使用

参考文章&#xff1a;Vivado IP核之定点数转为浮点数Floating-point_vivado 浮点数-CSDN博客 IP核的配置 后边还要做FFT&#xff0c;所以理论上最好的输出方式是单精度浮点。 输入精度&#xff1a;为了满足要求&#xff0c;输出数据的24位&#xff0c;其中 1位符号位&#xff…
阅读更多...
2024年【制冷与空调设备运行操作】考试内容及制冷与空调设备运行操作考试报名

2024年【制冷与空调设备运行操作】考试内容及制冷与空调设备运行操作考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 制冷与空调设备运行操作考试内容考前必练&#xff01;安全生产模拟考试一点通每个月更新制冷与空调设备运行操作考试报名题目及答案&#xff01;多做几遍&#xff0c;其实通过制冷与空调设备运行操作新版试题很简单。…
阅读更多...
pytest配置文件配置并通过allure生成报告

pytest配置文件配置并通过allure生成报告

之前已经学习了使用pytestrequests实现各种方式的调用和一些脚本的执行&#xff0c;今天来学习下如何使用pytest.ini配置文件来管理用例的执行以及如何使用allure生成测试报告。 1.pytest.ini文件配置 在项目目录下新建pytest.ini文件&#xff0c;然后进行配置&#xff0c;pyt…
阅读更多...
从路边摊到五星级酒店：六西格玛培训的价格与品质探秘！

从路边摊到五星级酒店：六西格玛培训的价格与品质探秘！

当我们深入探讨市面上的六西格玛培训价格差异时&#xff0c;确实会发现不同机构之间存在着显著的差别。以张驰咨询和xx机构为例&#xff0c;两者在价格定位上形成了鲜明的对比&#xff0c;同时也展示了不同机构在教学理念和服务品质上的不同。 xx机构之所以能以亲民的价格吸引…
阅读更多...
JVM常用概念之扁平化堆容器

JVM常用概念之扁平化堆容器

扁平化堆容器是OpenJDK Valhalla 项目提出的&#xff0c;其主要目标为将值对象扁平化到其堆容器中&#xff0c;同时支持这些容器的所有指定行为&#xff0c;从而达到不影响原有功能的情况下&#xff0c;显著减少内存空间的占用&#xff08;理想条件下可以减少24倍&#xff09;。…
阅读更多...
C++ 36 之 this指针

C++ 36 之 this指针

#include <iostream> #include <string.h> using namespace std;// this指针 永远指向当前对象 class Students06{ public:int age;// int m_age; //member成员首字母mStudents06(int age){// 1.解决命名冲突的问题 this指针找成员变量需要使用->符号this->…
阅读更多...
AI时代的产品经理的成长指南

AI时代的产品经理的成长指南

前言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;我们正处在一个变革的时代。在这个时代&#xff0c;产品经理的角色和职责也在不断地发生变化和演进。为了在这个充满机遇和挑战的AI时代中脱颖而出&#xff0c;产品经理需要不断地学习、成长和适应。以…
阅读更多...
vscode打包vue项目

vscode打包vue项目

1&#xff09;npm install 2&#xff09;npm install -g vue/cli 3&#xff09;npm run build 第三步注意&#xff1a;要查看根目录下 package.json 配置&#xff1b; 如果和我的一样 3&#xff09;应该为 npm run build:prod 4)将dist 文件考到nginx等web服务器即可使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023