ECharts数据集合（dataset）用法一（完整举例）

yiqinkongjian

已于 2024-06-08 08:27:26 修改

阅读量2.7k

点赞数 34

分类专栏： ECharts 文章标签： echarts javascript 算法

于 2024-06-03 23:02:52 首次发布

本文链接：https://blog.csdn.net/yiqinkongjian/article/details/139423940

版权

ECharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

3.2.4数据到图形的映射（series.encode）

引言

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

图3.1系列内设置数据

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

3.1数据集（dataset）基础

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

提供数据；
指定数据到视觉的映射，从而形成图表。

数据集（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设置

yiqinkongjian

关注

34
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
10
评论
ECharts数据集合（dataset）用法一（完整举例）

为了便于理解请看如图3.6所示的代码，图3.6的系列中绘制了7个柱形图，代码中包含了两组坐标轴（两个X轴和两个Y轴），图3.6中的系列中前3个柱形图对应的是第一组直角坐标轴，其中将seriesLayoutBy配置项设置为“row”，含义为以行为标准绘制图表，也就是说图3.6中强制设置了前三个柱形图对应的类别（X轴）为第1行的2~5列，绘制图形的数据对应的是第2行至第4行的2~5列。代码3-2中，将一个数组赋值给了“x”，代表把“维度1”、“维度5”、“名为score的维度”映射到X轴；
复制链接

扫一扫