ECharts - dataset组件的用法详解

从ECharts 4开始,支持使用dataset组件用于单独的数据集声明,从而使数据与配置进一步分离,数据可以被单独管理,被多个series复用,并且可以基于数据指定数据到视觉的映射。

在ECharts 4以前,数据只能声明在各个系列或类目中,这种方式虽然直观容易理解,但为了匹配这种数据输入形式,一般有数据处理的过程,需要把数据分隔设置到各个系列或类目轴中,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。

使用数据集dataset组件来单独声明数据,具有以下优势:

  • 更贴近数据可视化常见思维方式:提供数据 -> 指定数据到视觉的映射 -> 生成图表
  • 数据和其他配置分离,数据常变,其他配置常不变,易于分别管理
  • 数据可以被多个系列或者组件复用,不必为每个系列创建一份数据
  • 支持更多的常用数据格式,如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换

dataset的基本用法

dataset组件支持常用的二维数组和对象数组等数据格式,默认按列进行数据映射。
使用source配置数据,当使用对象数组时,需要另外使用dimensions指定数据维度,或者也可以通过series.encode完成映射。

let eChart = echarts.init(document.getElementById("eChart"), "shine");

let eOpt = {
	legend: {},
	tooltip: {},
	dataset: {
		// 二维数组格式的数据
		source: [
			['phone', '一季度', '二季度', '三季度', '四季度'],
			['iPhone', 850, 920, 800, 1020],
			['OPPO', 720, 810, 850, 880],
			['Mi', 820, 950, 1000, 980]
		]
		
		// 对象数组格式的数据
		// 使用dimensions指定维度(也可以通过series.encode完成映射)
		// 默认第一个维度映射到类目轴,其他维度依次映射到series
//		dimensions: ['phone', '一季度', '二季度', '三季度', '四季度'],
//		source: [
//			{'phone':'iPhone', '一季度':850, '二季度':920, '三季度':800, '四季度':1020},
//			{'phone':'OPPO', '一季度':720, '二季度':810, '三季度':850, '四季度':880},
//			{'phone':'Mi', '一季度':820, '二季度':950, '三季度':1000, '四季度':980}
//		]
	},
	xAxis: {
		// 类目轴默认对应dataset的第一列
		type: 'category'
	},
	yAxis: {
		type: 'value'
	},
	series: [
		// 默认情况下,系列依次对应dataset第一列后的每一列
		// 即第一个series对应dataset中数据的第二列
		{type: 'bar'},
		{type: 'bar'},
		{type: 'bar'},
		{type: 'bar'}
	]
};

eChart.setOption(eOpt);

图表效果
在这里插入图片描述

按行进行数据映射

默认情况下,dataset按数据列column进行数据到图形的映射,可以通过series.seriesLayoutBy指定按行row进行映射。
按列映射时,第一列会被映射到类目轴,其他列按顺序依次映射到各个系列,每一列的列头为系列名。
按行映射时,第一行会被映射到类目轴,其他行按顺序依次映射到各个系列,每一行的行头为系列名。
按行或按列映射是针对二维数组格式的数据而言,对对象数组不起作用。

let eChart = echarts.init(document.getElementById("eChart"), "shine");

let eOpt = {
	legend: {},
	tooltip: {},
	dataset: {
		// 二维数组格式的数据
		source: [
			['phone', '一季度', '二季度', '三季度', '四季度'],
			['iPhone', 850, 920, 800, 1020],
			['OPPO', 720, 810, 850, 880],
			['Mi', 820, 950, 1000, 980]
		]
	},
	xAxis: {
		// 按行映射时,第一行被映射到类目轴
		type: 'category'
	},
	yAxis: {
		type: 'value'
	},
	series: [
		// 按行映射时,系列依次对应dataset第一行后的每一行
		// 即第一个series对应dataset中数据的第二行
		{type: 'bar', seriesLayoutBy: 'row'},
		{type: 'bar', seriesLayoutBy: 'row'},
		{type: 'bar', seriesLayoutBy: 'row'}
	]
};

eChart.setOption(eOpt);

图表效果
在这里插入图片描述

维度dimension

常规图表使用的数据基本是由行和列组成的二维表结构,通常使用二维数组来容纳二维表。
当按列映射时,每一列就称为一个维度(一个维度对应一个系列),每一行称为一个数据项。
当按行映射时,每一行就称为一个维度,每一列称为一个数据项。

维度可以有单独的名字,便于在图表中显示,维度名通常定义在dataset的第一行或第一列。
ECharts会自动探测dataset中是否包含维度名,也可以通过dataset.sourceHeader: true | false 显式设置。

维度可以定义在dataset中,也可以定义在series中,可以同时指定维度名和类型。
常用的维度类型有number(默认)、ordinal、time、float及int。

dataset: {
	dimensions: [
		{name: 'phone', type: 'ordinal'}
	],
	...
}

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

series.encode声明的基本结构

  • 冒号左边是坐标轴、组件等特定名称,如xytooltip
  • 冒号右边是维度名称或序号(从0开始计数)
  • 可以用数组指定多个维度

默认的encode
series.encode 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K线图等)、饼图、漏斗图,会采用一些默认的映射规则。

  • 在坐标系中(如直角坐标系、极坐标系等
    • 如果有类目轴,则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列
    • 如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上
  • 如果没有坐标系(如饼图)
    • 取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)
let eChart = echarts.init(document.getElementById("eChart"), "shine");

let eOpt = {
	dataset: {
		source: [
			['phone', '销量', '增长率'],
			['iPhone', 760, 8.8],
			['OPPO', 850, 9.2],
			['Mi', 980, 7.5]
		]
	},
	legend: {},
	tooltip: {},
	xAxis: {
		type: 'value'
	},
	yAxis: {
		type: 'category'
	},
	series: [
		{
			type: 'bar',
			encode: {
				// 把维度1映射到x轴
				x: 1,
				// 把维度phone映射到y轴
				y: 'phone',
				// 把维度1和维度2映射到tooltip
				tooltip: [1, 2],
				// 把维度phone和维度1连起来作为系列名,并生成相应的图例
				seriesName: ['phone', 1]
				
				// 适用于饼图的encode设置
//				itemName: 0,
//				value: 1
			},
			label: {
				show: true,
				// 引用特定维度的值
				formatter: '{@phone} - {@1}万 - {@2}%'
			}
		}
	]
};

eChart.setOption(eOpt);

图表效果
在这里插入图片描述

最后

  1. 可以同时定义多个dataset, 系列通过series.datasetIndex (从0开始计数)来指定引用哪个dataset。
  2. ECharts 4 之前一直以来的series.data方式的数据声明方式依然被支持。
  3. 在大数据场景(百万级以上)中,需要使用appendData进行增量加载数据时,不支持使用dataset。
  4. 目前支持dataset的图表有:bar line pie scatter effectScatter parallel candlestick map funnel custom
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页