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 中的 示例中使用

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

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

相关文章

开启智慧之旅,AI与机器学习驱动的微服务设计模式探索

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#x1f525;&#xff1a;探索设计模式的魅力&#xff1a;开启智慧…

2024年腾讯云免费服务器最新申请入口链接

腾讯云免费服务器申请入口 txybk.com/go/free 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云百科txybk.com分享2024年最新腾讯云免费服务器申请入口、限制…

YOLOv8操作指南-下载+配置环境

下载&#xff1a;github&#xff0c;进入搜索YOLOv8 就这个&#xff0c;点开 下载就可以了&#xff0c;然后解压一下 配置环境&#xff1a; 安装Pytorch 先看一下这个&#xff1a; 如果电脑有GPU的话&#xff1a; 判断自己电脑GPU&#xff1a;打开任务管理器 我的是英伟达3…

sherpa + ncnn 离线语音识别

目录结构 前言音视频格式转为wavsherpa-ncnn编译LinuxWindowswindows编译中遇到的问题问题“nmake -? failed with: no such file or directory”编译失败原因 成功编译截图 可执行程序说明模型下载语言识别测试LinuxWindows 参考文献 前言 小编需要实现离线音视频语言部分识…

vulfocus靶场couchdb 权限绕过 (CVE-2017-12635)

Apache CouchDB是一个开源数据库&#xff0c;专注于易用性和成为"完全拥抱web的数据库"。它是一个使用JSON作为存储格式&#xff0c;JavaScript作为查询语言&#xff0c;MapReduce和HTTP作为API的NoSQL数据库。应用广泛&#xff0c;如BBC用在其动态内容展示平台&…

完结撒花! java算法day60 | 84.柱状图中最大的矩形

84.柱状图中最大的矩形 思路&#xff1a; 这道题和接雨水很像&#xff0c;不过有两点差别&#xff1a; 这道题需要找到一个位置前一个比他小的数和后一个比他小的数&#xff0c;而接雨水是找到前一个和后一个比他大的数。需要在原数组前后各补上0&#xff0c;防止忽略一些边缘…

Excel数据处理:高级筛选、查找定位、查找函数(VLOOKUP)

高级筛选 先去选中筛选区域 如果筛选的条件在同一行那么就是且的关系 如果筛选的条件不在同一行那么就是或的关系 查找定位空值 使用VLOOKUP函数

C语言中, 文件包含处理,#include< > 与 #include ““的区别

文件包含处理 指一个源文件可以将另外一个文件的全部内容包含进来 &#xff23;语言提供了#include命令用来实现文件包含的操作 #include< > 与 #include ""的区别 <> 表示系统直接按系统指定的目录检索 "" 表示系统先在 "" 指定…

PACS/RIS影像管理系统源码,医院影像科室PACS系统源码,三维医学影像系统源码 支持图像后处理与重建

PACS/RIS影像管理系统源码&#xff0c;支持图像后处理与重建 医院影像科室PACS系统源码&#xff0c;三维医学影像系统源码 PACS&#xff0c;全称为Picture Archiving and Communication Systems&#xff0c;中文意思是医学影像存档与通讯系统。它主要是应用在医院影像科室中&a…

java算法day4

删除链表的倒数第N个结点链表相交环形链表 删除链表的倒数第N个结点 解法&#xff1a;双指针&#xff08;快慢指针&#xff09; 首先一定要有删除结点的思想。所以这个题是用虚拟头结点比较方便。 先上模拟图&#xff0c;然后看流程&#xff1a; 这里后移根据不同的想法有不同…

java优先级队列(堆)详解

一、优先级概念 什么是优先级&#xff1a;比如女士优先&#xff0c;个子低的优先排到前面去&#xff0c;有一部分数据具备优先级&#xff0c;要以优先级的顺序将顺序存储起来。 前面介绍过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#…

OceanBase开发者大会2023届视频及PPT汇总

数据库技术趋势 我眼中的数据库技术 阳振坤OceanBase 首席科学家 观看视频 下载 PDF 未来&#xff0c;中国需要什么样的数据库&#xff1f; 周傲英华东师范大学副校长&#xff0c;CCF 会士 观看视频 下载 PDF 云原生技术趋势解读 Keith ChanCNCF 云原生计算基金会中国区总监 …

开发工具的使用

IDEA的安装与使用&常用快捷键 文章目录 IDEA的安装与使用&常用快捷键一、认识IntelliJ IDEA二、IDEA 的下载&卸载三、IEAD相关设置3.1 JDK的相关设置3.2 系统设置&#xff08;启动项/自动更新&#xff09;3.3 设置整体主题&#xff08;主题/字体/背景&#xff09;3…

Linux--链表 第二十五天

1. 链表 t1.next -> data t1.next->next->data .(点号)的优先级比->的大 所以 t1.next->data 就可以了 不用(t1.next)->data 2. 链表的静态增加和动态遍历 打印链表算法&#xff0c; void printLink(struct Test *head) { struct Te…

如何做一个优秀的系统工程师?

一、背景 做好一个优秀系统工程师的关键在于其在产品开发生命周期中对需求分析的有效把握与运用&#xff0c;这个过程直接影响到系统的整体架构设计、规格参数的明确设定以及业务流程的深度挖掘与优化。需求分析不仅是理解用户实际问题的核心环节&#xff0c;更是界定系统开发…

Java基础之JVM对象内存分配机制简介

一 对象内存分配 1.1 运行时数据区域 1.2 常见java应用启动JVM参数&#xff1a; -Xss&#xff1a;每个线程的栈大小(单位kb)-Xms&#xff1a;堆的初始大小&#xff0c;默认物理内存的1/64,示例&#xff1a;-Xms:4g -Xms:10m-Xmx&#xff1a;堆的最大可用大小&#xff0c;默认物…

LeetCode 热题 100 题解:普通数组部分

文章目录 题目一&#xff1a;最大子数组和&#xff08;No. 53&#xff09;题解 题目二&#xff1a;合并区间&#xff08;No. 56&#xff09;题解 题目三&#xff1a;轮转数组&#xff08;No. 189&#xff09;题解 题目四&#xff1a;除自身以外数组的乘积&#xff08;No. 238&a…

springSecurity用户认证和授权

一&#xff0c;框架介绍 Spring 是一个非常流行和成功的 Java 应用开发框架。Spring Security 基于 Spring 框架&#xff0c;提供了一套 Web 应用安全性的完整解决方案。一般来说&#xff0c;Web 应用的安全性包括用户认证&#xff08;Authentication&#xff09;和用户授权&am…

zig v0.12.0 发布 — x-cmd 提供 zig 快捷安装方法和 x zig 模块

文章目录 简介功能特点v0.12.0 新特性[重新设计 Autodoc 的工作原理](https://ziglang.org/download/0.12.0/release-notes.html#Redesign-How-Autodoc-Works)语法变更各类标准库变更构建系统变更 常见用法**使用案例**:竞品和相关项目进一步阅读 简介 Zig 是一种通用编程语言…

模电期末复习(五)集成运算放大电路

集成运算放大电路 5.1 集成放大电路的特点5.2 集成运放的主要技术指标5.3 集成运放的基本组成部分5.3.1 偏置电路5.3.2 差分放大输入级5.3.3 中间级5.3.4 输出级 5.4 集成运放的典型电路5.4.1 双极型集成运放LM741 5.5 各类集成运放的性能特点5.6 集成运放使用中的几个具体问题…