010_数据集

自由与束缚JavaJavaScript

已于 2022-03-17 00:10:19 修改

阅读量1.2k

点赞数

分类专栏： Apache ECharts 文章标签： echarts 前端

于 2022-03-16 17:52:22 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/123532227

版权

Apache ECharts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

2. 最简单数据集

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>最简单数据集</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '最简单数据集'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {},
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category" // 类目
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 数据集
		        dataset: {
		          source: [ // 提供一份数据。
		            ['product', '2020', '2021', '2022'],
		        	['Matcha Latte', 89.3, 95.8, 97.7],
		        	['Milk Tea', 92.1, 89.4, 83.1],
		        	['Cheese Cocoa', 94.4, 91.2, 92.5],
		        	['Walnut Brownie', 85.4, 76.9, 78.1]
		          ]
		        },
		        // 系列列表
		        series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

2.2. 效果图

3. dimensions维度

3.1. 常用图表所描述的数据大部分是"二维表"结构。现在, 当我们把系列(series)对应到"列"的时候, 那么每一列就称为一个"维度(dimension)", 而每一行称为数据项(item)。反之, 如果我们把系列(series)对应到表行, 那么每一行就是"维度(dimension)", 每一列就是数据项(item)。

3.2. 维度可以有单独的名字, 便于在图表中显示。dataset.source中第一行(列)到底包含不包含维度名, ECharts默认会自动探测。当然也可以设置dataset.sourceHeader: true显示声明第一行(列)就是维度, 或者dataset.sourceHeader: false表明第一行(列)开始就直接是数据。

3.3. 维度的定义, 也可以使用单独的dataset.dimensions或者series.dimensions来定义, 这样可以同时指定维度名, 和维度的类型(dimension type)。大多数情况下, 我们并不需要去设置维度类型, 因为ECharts会自动尝试判断。但是如果不足够准确时, 可以手动设置维度类型。

3.4. 维度类型(dimension type)可以取这些值:

'number': 默认, 表示普通数据。
'ordinal': 对于类目、文本这些string类型的数据, 如果需要能在数轴上使用, 须是'ordinal'类型。ECharts默认会试图自动判断这个类型。但是自动判断也可能不准确, 所以使用者也可以手动强制指定。
'time': 表示时间数据。设置成'time'则能支持自动解析数据成时间戳(timestamp), 比如该维度的数据是'2017-05-10', 会自动被解析。如果这个维度被用在时间数轴(axis.type为'time')上, 那么会被自动设置为'time'类型。时间类型的支持参见data。
'float': 如果设置成'float', 在存储时候会使用TypedArray, 对性能优化有好处。
'int': 如果设置成'int', 在存储时候会使用TypedArray, 对性能优化有好处。

3.5. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数据集对象数组格式</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '数据集对象数组格式'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {},
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category" // 类目
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 数据集
		        dataset: {
		          // 指定维度
		          dimensions: ['product', '2020', '2021', '2022'],
		          source: [ // 提供一份数据。
		            {product: 'Matcha Latte', '2020': 89.3, '2021': 95.8, '2022': 97.7},
		        	{product: 'Milk Tea', '2020': 92.1, '2021': 89.4, '2022': 83.1},
		        	{product: 'Cheese Cocoa', '2020': 94.4, '2021': 91.2, '2022': 92.5},
		        	{product: 'Walnut Brownie', '2020': 85.4, '2021': 76.9, '2022': 78.1}
		          ]
		        },
		        // 系列列表
		        series: [ { type: 'bar' }, { type: 'bar' }, { type: 'bar' } ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.6. 效果图

4. 把数据集(dataset)的行或列映射为系列(series)

4.1. 有了数据表之后, 使用者可以灵活地配置: 数据如何对应到轴和图形系列。这件事可以使用series.seriesLayoutBy属性来配置。

4.2. 当使用dataset时, seriesLayoutBy指定了dataset中用行还是列对应到系列上, 也就是说, 系列"排布"到dataset的行还是列上。可取值:

'column': 默认, dataset的列对应于系列, 从而dataset中每一列是一个维度(dimension)。
'row': dataset的行对应于系列, 从而dataset中每一行是一个维度(dimension)。

5. grid网格

5.1. 直角坐标系内绘图网格, 单个grid内最多可以放置上下两个X轴, 左右两个Y轴。在ECharts 2.x里单个echarts实例中最多只能存在一个grid组件, 在ECharts3中可以存在任意个grid组件。

5.2. grid.id组件ID。默认不指定。指定则可用于在option或者API中引用组件。string类型。

5.3. grid.show是否显示直角坐标系网格。boolean类型。

5.4. grid.left = '10%', grid组件离容器左侧的距离。left的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比, 也可以是'left', 'center', 'right'。如果left的值为'left', 'center', 'right', 组件会根据相应的位置自动对齐。string或number类型。

5.5. grid.top = 60, grid组件离容器上侧的距离。top的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比, 也可以是'top', 'middle', 'bottom'。如果top的值为'top', 'middle', 'bottom', 组件会根据相应的位置自动对齐。string或number类型。

5.6. grid.right = '10%', grid组件离容器右侧的距离。right的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比。string或number类型。

5.7. grid.bottom = 60, grid组件离容器下侧的距离。bottom的值可以是像20这样的具体像素值, 可以是像'20%'这样相对于容器高宽的百分比。string或number类型。

5.8. grid.width = 'auto', grid组件的宽度。默认自适应。string或number类型。

5.9. grid.height = 'auto', grid组件的高度。默认自适应。string或number类型。

5.10. grid.backgroundColor = 'transparent', 网格背景色, 默认透明。颜色可以使用RGB表示, 比如: 'rgb(128, 128, 128)', 如果想要加上alpha通道, 可以使用RGBA, 比如: 'rgba(128, 128, 128, 0.5)', 也可以使用十六进制格式, 比如: '#ccc'。注意: 此配置项生效的前提是, 设置了show: true。Color类型。

5.11. grid.borderColor = '#ccc', 网格的边框颜色。支持的颜色格式同backgroundColor。注意: 此配置项生效的前提是, 设置了show: true。Color类型。

5.12. grid.borderWidth = 1, 网格的边框线宽。注意: 此配置项生效的前提是, 设置了show: true。number类型。

5.13. grid.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。注意: 此配置项生效的前提是, 设置了show: true以及值不为tranparent的背景色backgroundColor。number类型。

5.14. grid.shadowColor阴影颜色。支持的格式同color。注意: 此配置项生效的前提是, 设置了show: true。Color类型。

5.15. grid.shadowOffsetX阴影水平方向上的偏移距离。注意: 此配置项生效的前提是, 设置了show: true。number类型。

5.16. grid.shadowOffsetY阴影垂直方向上的偏移距离。注意: 此配置项生效的前提是, 设置了show: true。number类型。

5.17. grid.zlevel所有图形的zlevel值。zlevel用于Canvas分层, 不同zlevel值的图形会放置在不同的Canvas中, Canvas分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的Canvas会引起内存开销的增大, 在手机端上需要谨慎使用以防崩溃。zlevel大的Canvas会放在zlevel小的Canvas的上面。number类型。

5.18. grid.z = 2组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低, 而且不会创建新的Canvas。number类型。

5.19. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>把数据集的行映射为系列</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 1200px; height: 800px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '把数据集的行映射为系列'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {},
		        // 配置要在X轴显示的项
		        xAxis: [
    			  { type: 'category', gridIndex: 0 },
    			  { type: 'category', gridIndex: 1 }
  				],
		        // 配置要在Y轴显示的项
		        yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
		        grid: [{ bottom: '55%', show: true }, { top: '55%', show: true }],
		        // 数据集
		        dataset: {
		          source: [ // 提供一份数据。
		            ['product', '2020', '2021', '2022'],
		        	['Matcha Latte', 89.3, 95.8, 97.7],
		        	['Milk Tea', 92.1, 89.4, 83.1],
		        	['Cheese Cocoa', 94.4, 91.2, 92.5],
		        	['Walnut Brownie', 85.4, 76.9, 78.1]
		          ]
		        },
		        // 系列列表
		        series: [ 
		          { type: 'bar', seriesLayoutBy: 'row' },
		          { type: 'bar', seriesLayoutBy: 'row' },
		          { type: 'bar', seriesLayoutBy: 'row' },
		          { type: 'bar', seriesLayoutBy: 'row' },
		          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
		          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
		          { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 } 
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

5.20. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
010_数据集

1. 数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据, 但是从ECharts4支持数据集开始, 更推荐使用数据集来管理数据。因为这样, 数据可以被多个组件复用, 也方便进行"数据和其他配置"分离的配置风格。毕竟, 在运行时, 数据是最常改变的, 而其他配置大多并不会改变。2. 最简单数据集2.1. 代码<!DOCTYPE html><html> <head> <meta charset="
复制链接

扫一扫

专栏目录