18-Echarts 配置系列之:数据集 dataset

简介:

数据集(dataset)是专门用来管理数据的组件。简化在每一个系列中设置数据,这一个配置是在Echarts4 中开始支持。

通过数据集配置,避免为每一个系列创建一个数据,避免格式转化的痛苦。

简单举例:

在 series 中配置数据: 

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80],type: 'bar'},{data: [120, 200, 150, 80],type: 'bar'},]
};

通过数据集来配置:

option = {xAxis: {type: 'category',},yAxis: {type: 'value'},dataset:[{source:[ ['Mon',120,120],['Tue',200,200],['Wed',150,150],['Thu',80,80],]}],series: [{type: 'bar'},{type: 'bar'},]
};

一、 dataset 配置代码:

//维度就是列或者行 这里简单用二维数组来配置
option={dataset:[//第一种写法 配置数据{id:'name',                    // 该系列的id source:[ // 第一行可以为维度名称,但也可以不写,不写则默认获取每一行第一列为维度名称,如何你需要做数据转化,则必写['Product','value1','value2']['Mon',120,110],          // Mon 数据组     ['Tue',120,110],          // Tue 数据组                          ],// 简单写法配置维度dimensions: ['value1','value2'],    // 定义维度的信息,这个也可以配置在series中。// 详细写法配置维度dimensions:[{:name:'value1',           // 维度名称type:'string',           // 维度类型 包含 string、number、ordinal、float、int、time等类型                  },{name:'value2',       type:'string',                  }              ],sourceHeader:0                   //指定上面的 source 配置中从哪一行/列为维度信息,而后才为数据, 这里取行或者列需要在 series.seriesLayoutBy 中配置         },//第二种写法  配置数据 key-value 形式{source:[{product: 'Mon', value1: 120, value2: 110},{product: 'Tue', value1: 120, value2: 110}             ]        },//第三种写法  配置数据 key-value 形式{source:{'product': ['Mon', 'Tue'],'value1': [120, 120],'value2': [110, 110]          }       },// 通过transform 处理的数据配置{transform:[{type:'filter',                              //   Echarts提供的默认转化类型   filter:筛选,fromDatasetIndex: 0,                        //   引用 index 为 `0` 的 dataset 数据config:{dimension: 'value2', value: 110},   //   筛选  value2 列 条件为 110  },            ]    }, {transform:[{type:'filter',                              //   Echarts提供的默认转化类型   filter:筛选,sort 排序fromDatasetIndex: 0,                        //   引用 index 为 `0` 的 dataset 数据fromDatasetId:'name',                       //   引用 ID 为 'name' 的 dataset 数据fromTransformResult: 1                      // // 获取 transform result[1] 。// 排序的条件可以用 >,<,=,!=,并且包含逻辑的比较  与 或 非( and | or | not )// config:{dimension: 'value2', value: 110},   //   筛选  value2 列 条件为 110  config:{and:[{dimension: 'value2','>':50},       //  value2 列 值大于50的{dimension: 'value1','<':200},      //  value1 列 值小于200的               ]                                            },parser:'time',                              // 解析器,将值转化为对应的格式,然后比较,常用于时间格式print:true,                                 //   在发生错误时报错,配置项只在开发环境中生效}            ]    },   {transform:[{type:'sort',                                // 排序fromDatasetIndex: 0, config:{dimension: 'value2', order: 'desc'},// order为 asc 或者   desc           }            ]        },// 引入外部的数据转化器 使用第三方库 ecStat 提供的数据转换器。{// 请直接参考文档 : https://echarts.apache.org/handbook/zh/concepts/data-transform/   }],// 在series 中定义如何获取 datase 的数据操作series:[{type:'bar',datasetIndex: 0,      // //引用 index 为 `0` 的 dataset 数据 ,datasetId: 'name',    // 通过 dataset 中的 ID 引入 数据encode:{// 将 "product" 列或者行 映射到 X 轴。x: 'product',// 将 "value1"  列或者行 映射到 Y 轴。y: 'value1'            },seriesLayoutBy:'column',   // 指定dataset 中用行还是列,来取值展示, column 默认列,row 行}    ]
}

配置使用简单总结:

1.先定义 dataset 数据

2.在 series 中获取对应的 dataset 数据 ,通过 datasetIndex 引入 dataset 的数据, seriesLayoutBy 定义从行还是列来获取数据, encode 获取对应的列或者行

二、配置实例代码

option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'category',},yAxis: {type: 'value'},dataset:[// 第一组数据  index 为 0{source:[ ['product','value1','value2','value3'],['Mon',120,110],['Tue',200,150],['Wed',150,85],['Thu',80,80],],},// 第二组数据 index 为 1{source:[ ['Fri',89,95],['Sat',140,145],['Sun',135,140],],dimensions:['product','value1','value2']},// 第三组,通过 数据转化的数据 index 为 2{transform:[{fromDatasetIndex: 0,type:'filter',config:{dimension:'value2','>':80}}]}],series: [//引用 index 为 `0` 的 dataset 数据{type: 'bar',datasetIndex: 0,// 默认获取值为第一列encode:{// 将 "value1" 列映射到 Y 轴。y: 'value1',  }},//引用 index 为 `0` 的 dataset 数据{type: 'bar',datasetIndex: 0,encode:{// 将 "value2" 列映射到 Y 轴。y: 'value2',  }},//引用 index 为 `1` 的 dataset 数据{type: 'bar',datasetIndex: 1,encode:{// 将 "value2" 列映射到 Y 轴。y: 'value2',  }},//引用 index 为 `2`  dataset 的 transform  数据{type: 'bar',datasetIndex: 2},]
};

直接在 Echarts 中的 示例中使用

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

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

相关文章

HarmonyOS开发实例:【分布式数据管理】

介绍 本示例展示了在eTS中分布式数据管理的使用&#xff0c;包括KVManager对象实例的创建和KVStore数据流转的使用。 通过设备管理接口[ohos.distributedDeviceManager]&#xff0c;实现设备之间的kvStore对象的数据传输交互&#xff0c;该对象拥有以下能力 ; 1、注册和解除注…

其它IO合集

其它IO合集 1. 缓冲流1.1 概述1.2 字节缓冲流构造方法效率测试 1.3 字符缓冲流构造方法特有方法 2. 转换流2.1 字符编码和字符集字符编码字符集 2.2 编码引出的问题2.3 InputStreamReader类构造方法指定编码读取 2.4 OutputStreamWriter类构造方法指定编码写出转换流理解图解 3…

Ubuntu 22.04 安装 zabbix

Ubuntu 22.04 安装 zabbix 1&#xff0c;Install Zabbix repository2&#xff0c;安装Zabbix server&#xff0c;Web前端&#xff0c;agent3&#xff0c;安装mysql数据库3.1 创建初始数据库3.2 导入初始架构和数据&#xff0c;系统将提示您输入新创建的密码。3.3 在导入数据库架…

Learn something about front end——颜色

​ 好装的标题啊哈哈哈哈哈哈 最近get了一个学习前端的网站叫FreeCodeCamp 原色&#xff1a;rgb三个值的其中一个值拉满&#xff0c;比如说rgb(255,0,0)是红色这样&#xff0c;三个主色&#xff1a; 红色 rgb(255, 0, 0) #FF0000绿色 rgb(0, 255, 0) #00FF00蓝色 rgb(0, 0, …

JS-41-underscore03-Arrays

underscore为Array提供了许多工具类方法&#xff0c;可以更方便快捷地操作Array。 一、first / last 顾名思义&#xff0c;这两个函数分别取第一个和最后一个元素&#xff1a; var arr [2, 4, 6, 8]; _.first(arr); // 2 _.last(arr); // 8 二、flatten flatten()接收一个…

Python的pytest框架(2)--断言机制

接上篇文章&#xff0c;我们使用pytest框架&#xff0c;实现自动发现并执行用例&#xff0c;接着利用断言语句判断测试结果&#xff0c;最后生成报告。这篇文章我们就断言机制来展开&#xff0c;深入学习进阶pytest框架的断言机制&#xff1a; 目录 一、基本断言 使用Python…

1688官方API商品数据采集接口|阿里巴巴中国站获得1688商品详情 API 返回值说明

随着全球经济一体化和电子商务的快速发展&#xff0c;网络购物的需求日益增加。不断涌现的电商企业使得行业的竞争情况愈演愈烈。在这种情况下&#xff0c;企业不仅要加大经营力度&#xff0c;还要在自己的基础设施和技术上持续投入&#xff0c;才能更好的适应市场和消费习惯。…

飞桨Ai(一)基于训练后的模型进行信息提取

基准 本博客基于如下视频&#xff1a; 发票抬头信息抽取之环境搭建 - 基于飞浆开源项目发票抬头信息抽取之数据标准模型训练 - 基于飞浆开源项目 步骤 1、准备工作 下载python&#xff1a;【Python】Windows&#xff1a;Python 3.9.2 下载和安装&#xff08;建议3.9&#…

算法第42天动态规划4

416 分割等和子集 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等 def canPartition(nums:List[int])->bool:total_sumsum(nums)if total_sum%2!0:return Falsetarget_sumtotal_sum//2dp[[Fal…

数通HCIE考试分享:考前心态很重要,心情放松好过一次练习

誉天数通HCIE晚班火热预约中&#xff01;真机实验考前辅导备考资料&#xff0c;名师保驾护航&#xff0c;助你稳定通关&#xff01;识别二维码&#xff0c;即可获取免费试听名额&#xff01; 备考阶段 我是去年10月底完成了笔试考试&#xff0c;在笔试之前就将PY的课程过了一遍…

Spark面试整理-Spark集成Kafka

Apache Spark和Apache Kafka的集成使得实时数据流处理成为可能。Kafka是一个分布式流处理平台,主要用于构建实时数据管道和流应用。而Spark是一个大规模数据处理工具,可以对大量数据进行批处理和实时处理。 Spark集成Kafka主要通过Spark Streaming或者Structured Streaming实…

AI-Agent入门

主要参考资料 AI Agent&#xff08;或者LLM Agent&#xff09;深度讲解——组成、方法、案例及展望: https://zhuanlan.zhihu.com/p/676544930 产品经理研读&#xff1a;Agent的九种设计模式(图解代码): https://mp.weixin.qq.com/s/9CRzuNgnwyq3-tkqnTA6TA 特工宇宙与产品二姐…

力扣算法-回溯

递归 104.二叉树的最大深度 回溯 17.电话号码的字母组合 ①子集型回溯 78.子集 (1)选不选 (2)选哪个 131.分割回文串 &#xff08;1593.拆分字符串使唯一子字符串的数目最大 也可以用这个思路解&#xff1a;从结果角度&#xff0c;分割字符串&#xff09; ②组合型回溯…

[leetcode] 55. 跳跃游戏

文章目录 题目描述解题方法模拟java代码复杂度分析 相似题目 题目描述 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 tr…

CentOS系统常用命令

CentOS系统是基于Red Hat Enterprise Linux&#xff08;RHEL&#xff09;的流行Linux发行版&#xff0c;它在服务器和桌面环境中广泛使用。以下是一些在CentOS系统中常用的命令及其用法&#xff1a; 1. **文件和目录操作** - ls&#xff1a;列出目录内容ls -lh # 以易读的格式…

SqL--DCL数据控制语言

文章目录 数据控制语言用户角色 赋权收权删除用户自定义角色 数据控制语言 用户 用户&#xff1a;用来登录数据库的账号 需要有权限的用户或者管理员用户system 创建用户&#xff1a; 语法&#xff1a; CREATE USER 用户名 IDENTIFIED BY 密码;注意&#xff1a;1.此时的用户…

杀死那个名为360安全的软件

背景 2023年底&#xff0c;闲来没事想起了xjun师傅2021年发的procexp驱动利用帖子时在群里讨论的&#xff0c;通过procexp驱动突破PPL后注入到csrss进程中&#xff0c;再通过csrss来结束那些个安全防护软件。于是在当时就有了如下成果&#xff1a; 这些弄完之后&#xff0c;觉…

冯诺依曼与进程【Linux】

文章目录 冯诺依曼体系结构&#xff08;从硬件的角度描述&#xff09;冯诺依曼体系结构&#xff08;从软件的角度描述&#xff09;操作系统&#xff08;软件&#xff09;理解管理系统调用和库函数进程查看进程的两种方式 通过系统调用获取进程的PID和PPID通过系统调用创建进程-…

C++ Primer是每位C++ coder心中的圣经吗?

首先&#xff0c;C Primer的作者是Stanley B. Lippman、Jos Lajoie和Barbara E. Moo。Stanley B. Lippman是C领域的知名专家&#xff0c;他在C标准委员会中担任过要职&#xff0c;对C语言的发展有深刻的理解。Jos Lajoie和Barbara E. Moo也都是C领域的资深专家&#xff0c;他们…

回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测&#xff08;完整源码…