首页 > 其他分享 >ECharts数据集合(dataset)用法一(完整举例)

ECharts数据集合(dataset)用法一(完整举例)

时间:2024-06-07 20:32:08浏览次数:26  
标签:映射 dataset 维度 举例 数组 encode 数据 ECharts

        数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据,但是从ECharts4支持数据集开始,更推荐使用数据集来管理数据。因为这样,数据可以被多个组件复用,也方便进行“数据和其他配置”分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。

重要提示:以下内容的阅读需要绘制基础图表的知识。没有的同学请移步ECharts中常见的基本概念。

目录

3.1数据集(dataset)基础

3.2数据集(dataset)中设置数据

3.2.1二维数组数据(默认效果)

3.2.2对象数组数据

3.2.3指定数据内容映射

1.seriesLayoutBy配置项

3.2.4数据到图形的映射(series.encode)

1.基本内容

2.通用设置

3.直角坐标轴特有设置

4.无坐标轴图表设置

5.其他坐标轴图表设置


引言

        根据前面的知识同学们已经掌握了基础的绘制图表的方法,同时也掌握了再系列中设置数据的方法,为了方便大家回忆以及对比,如图3.1所示,展示了基础的系列数据设置方法。图中在series中的data属性中设置了对应的数据。

图3.1系列内设置数据

        这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。

3.1数据集dataset基础

        可视化中存在一个规律,数据常变,其他配置常不变因此将数据与其他配置项分开设置,更加易于管理。同时数据的组织形式存在一维数组、对象数组等多种形式,将数据设置在数据集(dataset)中,有助于方便快捷的使多组图标共享一组数据,同时在不调整数据的原始格式的情况下,方面数据展示。具体优势如下:

  1. 提供数据;                                                                                                                                
  2. 指定数据到视觉的映射,从而形成图表。                                                                                  

        数据集(dataset)的位置一般为“option.dataset”,可以把它理解为一个对象,其中包括两个常用的属性分别为“source”与“dimensions”,“source”用于指定数据,可以是二维数组,也可以是对象数组;“dimensions”用于指定维度与数据项,当指定列为维度的时候,那么每行就是一个数据项。

        “dataset”配置项遵循先类目,后数据的规律,即默认情况下,先选择类目轴的内容,接下来内容则为绘制图形中对应的数据值。

3.2数据集dataset中设置数据

        数据集(dataset)中数据常见的格式为为二维数组和对象数组的形式,本部分的内容主要是针对这两种格式的数据进行解读。

3.2.1二维数组数据(默认效果)

        在使用数据集之前先来了解一下数据格式,如图3.2为接下来案例需要用的数据格式——二维数组格式。

图3.2数据格式

        由图3.2可以看出,在第1行为年份的标注,第一列为产品名称的标注,在绘制图表时,第1行和第1列均可以考虑作为类目轴的数据放置的坐标轴上,“数据”部分的内容为真实要在图表中绘制区域中展示的内容。

      注意:第1行第1列的内容“product”一般不与数据相对应,可以考虑用来进行相应的内容提示,“product”所在的位置内容在默认情况下是被忽略的,因此如果没有内容,需要使用空字符串占位。

        在使用“dataset”时,ECharts会自动搜索“source”中的数据,在未指定的情况下默认第1列从第2行开始为类目轴中的显示内容(产品名称),第2列开始每1列为一组数据,即从左向右看为先类目,后数据。效果如图3.3所示,标号为2的柱形图对应的是第2列数据(2015年数据)中的每一个具体值,3号与4号柱形内容以此类推。具体的实例代码请参照“3-dataset-source-二位数组-默认.html”,在使用dataset之后,除非需要维度绑定或者特殊提示之外,系列(series)中便不在需要data属性进行数据设置。

图3.3默认柱形图效果

3-dataset-source-二位数组-默认.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>

  <script type="text/javascript">
    // 初始化图表实例
    var chart = echarts.init(document.getElementById('chart'),null,{width:'1500px',height:'500px'});
option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['','2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ],
  },
  // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
  xAxis:{ type: 'category' },
  // 声明一个 Y 轴,数值轴。
  yAxis: {},
  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar'}, 
           { type: 'bar'}, 
		   { type: 'bar'},
		  ]
};
  chart.setOption(option);  
</script>
</body>
</html>

3.2.2对象数组数据

        如图3.4为对象数组的数据格式展示。

        3.4对象数组格式的数据

        对象数组格式的数据相对于二维数组比较直观,它明确的指出了产品名称、每一年的数值等内容,使用对象数组的数据时,有两种图表展示形式。

        ①配合“dataset”的另一个常见属性“dimensions”使用,如图3.5为对象数组数据对应的完整“dataset”设置。

        ②配合“series”中的“encode”属性显示。(本小节不阐述)

本小节仅为大家阐述①方式,②方式会在本章的后面部分阐述。

图3.5“dimensions”属性配合对象数组数据

        “dimensions”属性用于指明数据维度,它大致可以分为两部分,第一部分指明类目轴的类目,第二部分指明不同组的数据。

        由图3.5可以看出,属性“dimensions”中第1项指明了类目轴,后面几项指明了要展示的数据(从第2项元素开始每个元素代表一组数据),相当于说明了需要在图表中展示的维度。

         例如,将“dimensions”值修改为:“['product','2016','2017']”,则表明类目轴内容为每个对象中的'product'值,要展示的数据为“2016”“2017”两个成员对应的值,即先类目,后数据。

        本部分程序效果与图3.3一致,标号为2的柱形图对应的是“dimensions”中第2项对应到每个数据对象中的具体值,3号与4号柱形内容以此类推。具体的实例代码请参照“3-dataset-source-对象数组-默认.html”,同样,在使用dataset之后,系列中有依然不需要设置数据值。

3-dataset-source-对象数组-默认.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>

  <script type="text/javascript">
    // 初始化图表实例
    var chart = echarts.init(document.getElementById('chart'),null,{width:'1000px',height:'500px'});
option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,
    // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
  chart.setOption(option);  
</script>
</body>
</html>

3.2.3指定数据内容映射

        刚才介绍了两种数据格式的默认情况,那么对于高维数据,在不调整数据格式的情况下,想要任意指定维度去展示应当如何操作呢?下面向大家介绍指定数据内容映射的方法。

        在ECharts中可以使用series.seriesLayoutBy属性来配置指定数据集的列(column)还是行(row)映射为系列(series),默认情况下是按照列(column)来映射。

        也可以使用series.encode属性指定维度映射的规则:如何从dataset的维度(一个“维度”的意思是一行/列)映射到坐标轴(如X、Y轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。

1.seriesLayoutBy配置项

seriesLayoutBy配置项,可以改变图表对于行列的理解

seriesLayoutBy可取值如下:

        ①'column':默认值。将dataset中的第1列分配给类目轴,后面列给series中的data。

        ②'row':将dataset中的行分配给series中的data。

        为了便于理解请看如图3.6所示的代码,图3.6的系列中绘制了7个柱形图,代码中包含了两组坐标轴(两个X轴和两个Y轴),图3.6中的系列中前3个柱形图对应的是第一组直角坐标轴,其中将seriesLayoutBy配置项设置为“row”,含义为以行为标准绘制图表,也就是说图3.6中强制设置了前三个柱形图对应的类别(X轴)为第1行的2~5列,绘制图形的数据对应的是第2行至第4行的2~5列。

        图3.6中后4个柱形图通过xAxisIndex、yAxisIndex对应到了第二组坐标轴中,本部分的系列中没有使用seriesLayoutBy设置映射,因此采用了默认的图表绘制方法,图3.6对应的最终结果为图3.7所示,同学们可以自行在“3-dataset-source-二位数组-默认.html”中的系列中添加seriesLayoutBy属性,尝试变换类目轴内容。

图3.6seriesLayoutBy使用演示图

图3.7seriesLayoutBy配置项结果示意图

3.2.4数据到图形的映射(series.encode)

1.基本内容

        encode属性主要完成dataset中数据到图形的映射,它的书写位置在系列中。如图3.8所示,series.encode为一个对象,对象成员包括坐标系、标签等,如'x','y','tooltip'等,其中'x','y'的取值应是数据中的维度名(string格式)或者维度的序号(number格式,从0开始计数),可以指定一个或多个维度(使用数组)。通常情况下,encode对象内的成员不需要所有的都写,按需写即可,在“3-数据集合-encode举例.html”程序中已经展示了encode的基本用法。

图3.8encode展示图

3-数据集合-encode举例.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>

<script>
const chartDom = document.getElementById('chart');
// const chart = echarts.init(chartDom,'westeros',{renderer:'svg'});
const chart = echarts.init(chartDom);
chart.setOption({
dataset:{
source:[
['一季度',100,80,'分类1',50],
['二季度',120,100,'分类2',150],
['三季度',150,120,'分类3',200],
['四季度',200,150,'分类4',250]
]
},
title:{
text:"Echars 多系列案例"
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
yAxis:{

},
series:[{
type:'pie', // 饼图
center:['67%',60],
radius: 35,
encode:{
itemName:0,value:4
}
}, {
			type:"line", // 折线图
			encode:{
			x:0,y:2
			}
},{
type:'bar', // 柱状图
encode:{
x:0,y:2
}
}]
})

</script>
</body>
</html>

        当encode不明确指出的时候ECharts会采用默认的形式进行映射,映射规则为如下:

·        在坐标系中(如直角坐标系、极坐标系等)

        如果有类目轴(axis.type为'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列,如案例“3-dataset-source-二位数组-默认.html”所示。

        如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的XY轴),则每两列对应一个系列,这两列分别映射到这两个轴上,如案例“3-encode散点图案例.html”所示。

·        如果没有坐标系(如饼图)

        取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值),如案例“3-encode饼图设置案例.html”所示。

3-encode饼图设置案例.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>

  <script type="text/javascript">
    // 初始化图表实例
    var chart = echarts.init(document.getElementById('chart'),null,{width:'500px',height:'1000px'});
	option = {
	  legend: {},
	  tooltip: {},
	  dataset: {
	    source: [
	      ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
	      ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
	      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
	      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
	      ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
	    ]
	  },
	  series: [
	    {
	      type: 'pie',
	      radius: '20%',
	      center: ['25%', '30%']
	      // No encode specified, by default, it is '2012'.
	    },
	    {
	      type: 'pie',
	      radius: '20%',
	      center: ['75%', '30%'],
	      encode: {
	        itemName: 'product',
	        value: '2013'
	      }
	    },
	    {
	      type: 'pie',
	      radius: '20%',
	      center: ['25%', '75%'],
	      encode: {
	        itemName: 'product',
	        value: '2014'
	      }
	    },
	    {
	      type: 'pie',
	      radius: '20%',
	      center: ['75%', '75%'],
	      encode: {
	        itemName: 'product',
	        value: '2015'
	      }
	    }
	  ]
	};

chart.setOption(option);  
</script>
</body>
</html>
2.通用设置

        针对不同的坐标系encode有不同的映射方式,所有坐标系都通用的encode使用方式如下。代码3-1中,“tooltip”使用数组形式,效果为提示框中显示'product'与'score'对应的内容;“seriesName”使用数组形式,效果为将对应维度中的名称连接起来作为系列名;“itemId”的取值表示使用“维度2”中的值作为id。这在使用setOption动态更新数据时有用处,可以使新老数据用id对应起来,从而能够产生合适的数据更新动画;“itemName”的取值表示指定数据项的名称使用“维度3”在饼图等图表中有用,可以使这个名字显示在图例(legend)中。

代码3-1:

encode:{

    tooltip:['product','score']

    seriesName:[1,3],

    itemId:2,

    itemName:3

}
3.直角坐标轴特有设置

在直角坐标轴中例如grid/cartesian中,encode有其特有的使用方式,可以将多个维度映射到X轴,使用数组的形式赋值即可,如代码3-2所示。代码3-2中,将一个数组赋值给了“x”,代表把“维度1”、“维度5”、“名为score的维度”映射到X轴;把0赋值给“y”,表示把0号维度映射到y轴。

代码3-2:

​​​​​​​encode:{

    x:[1,5,'score'],

    y:0

}
4.无坐标轴图表设置

        对于一些没有坐标系的图表,例如饼图、漏斗图等,encode的使用方法如代码3-3所示,代码中“value”取值的含义为,取维度为3的数据作为饼图的数据值。

代码3-3:

​​​​​​​type:’pie’,

encode:{

    value:3

}
5.其他坐标轴图表设置

        在其他坐标轴类型中使用encode方法如图3.9所示,每种轴都有特殊的属性可以设置,但无论什么属性,属性值对应的均是数据中的维度数值。

图3.9其他轴类型encode设置

标签:映射,dataset,维度,举例,数组,encode,数据,ECharts
From: https://blog.csdn.net/yiqinkongjian/article/details/139423940

相关文章

  • [ICML2022]Open-Sampling Exploring Out-of-Distribution Data for Re-balancing Long
    引入开集样本训练模型有点像dropout,“破坏”某些模型参数防止尾部类的过拟合Motivation长尾学习中的训练数据集分布不平衡的问题,解决方法之一是重采样。重采样主要对于尾部类重复采用,但这种做法往往会导致尾部类的过拟合。为了缓解过拟合[2](Rethinkingthevalueoflabelsf......
  • echarts 中的最大值增加X轴的时间
    曲线中最大值最小值需要完善一些相关的信息 letcolor=['#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc']letxData=['00:00','04:00','08:00','12:00',&#......
  • [记录一下]BufDataSet排序的时候多列同时排序会出问题
    有和网友(不好意思,忘了是那位了)交流中,他反馈BufDataSet多列排序时得到的结果不符合预期,他也给出修复方法,以下是他的验证及修复方法:环境:fpc3.3.1问题复现步骤:SQLQuery1.IndexFieldNames:='cl;c2DESC';这个应该是c1列升序,c2列降序,但是实际是c1,c2列都降序了影响到SQLQuery,BufDataS......
  • 笔记5:TensorDataset、DataLoader及数据集划分
    TensorDataset转自:https://www.cnblogs.com/miraclepbc/p/14333299.html导入相关包fromtorch.utils.dataimportTensorDataset特征与标签合并HRdataset=TensorDataset(X,Y)模型训练forepochinrange(epochs):foriinrange(num_batch):x,y=HRda......
  • 若依框架整合Echarts图表
    若依框架整合Echarts图表一、前端1、放置Echarts图表的div<el-col:span="12"><div:class="className":style="{height:height,width:width}":ref="'chart'"/></el-col>​ 注:ref里的字段,需为字符串2、前端需要导入的包impo......
  • 为lazarus TDataSet增加类似TClientDataSet的Delta功能
    为lazarusTDataSet增加类似TClientDataSet的Delta功能适用于所有TDataSet只需在unit的uses添加DataSetDelta。BufDataset1.ActivateMonitoring(true)//启动Delta功能BufDataset1.GetActionSQL('test');//根据Delta生成SQL继续开源:https://github.com/szlbz/DataSetDelta.gitun......
  • 线程池的实现源码及应用举例
    1.线程池本质​多个线程组成的一个集合,目的为了并发执行任务,定义时是一个结构体,成员有互斥锁,条件变量,任务链队列指针,任务链队列中等待的任务个数,当前活跃的线程数量,线程ID,线程销毁标记等2.线程池的关键技术(1)万能函数指针(通用函数指针):*void*(*p)(voi......
  • ProgGen: Generating Named Entity Recognition Datasets Step by step with Self Ref
    本文是LLM系列文章,针对《ProgGen:GeneratingNamedEntityRecognitionDatasetsStepbystepwithSelfReflexiveLargeLanguageModels》的翻译。ProgGen:使用自反射大型语言模型逐步生成命名实体识别数据集摘要1引言2相关工作3方法4实验5结论6局限性......
  • 为bufdataset增加ftVariant支持
    最近使用bufdataset时发现可以创建ftVariant类型,但无法正常读写。经搜索,发现fpc官方早在2011年就有解决方案,但到今天最新的fpc3.3.1还没支持,按issues的方法,经测试读写ok,如果你也需要在bufDataSet要用到ftVariant,可以参考以下方法:打开fpcsrc\packages\fcl-db\src\base\bufdataset.......
  • datasets for stereo depth
    CREdateset#0,1,2,3https://data.megengine.org.cn/research/crestereo/dataset/tree/0.tarhttps://data.megengine.org.cn/research/crestereo/dataset/shapenet/0.tarhttps://data.megengine.org.cn/research/crestereo/dataset/reflective/0.tarhttps://data.megen......