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, …

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

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

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

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

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

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

力扣算法-回溯

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

[leetcode] 55. 跳跃游戏

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

杀死那个名为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;完整源码…

各大厂都推出鸿蒙APP了,你就一定要学习一下鸿蒙APP测试了!

2023年8月&#xff0c;华为推出鸿蒙4.0&#xff0c;由于其广泛的用户基础和品牌传播力&#xff0c;在短短几个月的时间&#xff0c;使用鸿蒙4.0系统的设备就达到千万级别&#xff0c;并且在9月份发售Mate 6之后&#xff0c;还在装机量的增长更加迅猛。 基于此&#xff0c;11月…

AMD新一代AI PC芯片惊艳登场!颠覆商业计算领域!

AMD发布新一代AI PC芯片 前言 就在北京时间4月17日&#xff0c;AMD正式面向商业计算领域推出新一代AI PC创新产品&#xff01;他们宣布推出锐龙Pro 8040系列和AMD锐龙Pro 8000系列&#xff0c;扩展其商用移动和桌面AI个人电脑&#xff08;PC&#xff09;产品组合。 了解PRO 804…

【Vue3】setup语法糖的使用

文章目录 setup简介使用vite-plugin-vue-setup-extend插件 指定组件名字 setup简介 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖 相比较普通的<script> ,它有以下优势&#xff1a; 更少的样板内容&#xff0c;更简洁的代码。能够使用纯…

基于SpringBoot的“人职匹配推荐系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“人职匹配推荐系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 网上商城购物系统结构图 管理员登录界面图 个…

flask 应用程序

flask 程序示例 创建 hello.py 文件&#xff1a; # 导入 Flask 模块。Flask 类的一个对象是 wsgi 应用程序。 from flask import Flask# 创建app对象, Flask构造函数将当前模块的名称(__name__)作为参数。 app Flask(__name__)# route() 函数是一个装饰器&#xff0c;它告诉应…

【UE5.1】使用MySQL and MariaDB Integration插件——(3)表格形式显示数据

在上一篇&#xff08;【UE5.1】使用MySQL and MariaDB Integration插件——&#xff08;2&#xff09;查询&#xff09;基础上继续实现以表格形式显示查询到的数据的功能 效果 步骤 1. 在“WBP_Query”中将多行文本框替换未网格面板控件&#xff0c;该控件可以用表格形式布局…

vr兽医设备操作模拟仿真教学平台提升教学效果

在兽医教育的传统领域中&#xff0c;动物诊疗一直是一项不可或缺的实践环节。然而&#xff0c;传统的解剖教学方式受限于动物数量、种类以及安全隐患&#xff0c;无法充分满足学生的学习需求。随着VR虚拟仿真技术的不断精进&#xff0c;VR动物诊疗仿真实训系统为兽医教育带来了…