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