Echarts数据可视化
文章目录
- Echarts数据可视化
- 第3章 Echarts组件详解
- 3.6 数据区域缩放
- 3.6.1 滑动条型数据区域缩放组件
- 3.6.2 内置型数据区域缩放组件
- 3.6.3 框选型数据区域缩放组件
Echarts数据可视化：入门、实战与进阶
第3章 Echarts组件详解
3.6 数据区域缩放
dataZoom：数据缩放组件。作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节。
几种分类：
- 滑动条型数据区域缩放组件【dataZoomSlider】
- 内置型数据区域缩放组件【dataZoomInside】
- 框选型数据区域缩放组件【dataZoomSelect】
3.6.1 滑动条型数据区域缩放组件
滑动条型数据区域缩放组件几个常用参数：
- xAxisIndex：指定控制的x轴。用于一个可视化中有多个图表。
- 取值是一个数字，则控制的是一个轴
- 取值是一个数组，则控制多个轴
举个栗子：
option: {
xAxis: [
{...}, // 第一个xAxis
{...}, // 第二个xAxis
{...}, // 第三个xAxis
{...}, // 第四个xAxis
],
dataZoom: [
{ // 第一个dataZoom组件
xAixsIndex: [0:3] // 表示这个dataZoom组件控制第一个和第四个xAxis
},
{ // 第二个dataZoom组件
xAxisIndex: 2 // 表示这个dataZoom组件控制第三个xAxis
}
]
}
当然yAxisIndex用法类似。
- filterMode：过滤模式，dataZoom数据窗口缩放的实质其实是数据过滤，即过滤掉窗口外的内容。
- filter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只要有一个维度在窗口外，就会被过滤掉
- weakFilter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只有当其所有维度都在窗口同侧外，才会被过滤掉。
- empty：不会影响其他轴的数据范围。
- none：不过滤数据，只会改变数轴范围
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动条型数据区域缩放组件</title>
<!-- 引入 echarts.js -->
<script src="../js/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 = {
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series: {
type: 'bar',
data: [
// 第一列对应 X 轴，第二列对应 Y 轴。
[10, 30],
[20, 50],
[5, 20],
[2, 10]
]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
浏览器渲染效果
代码中，控制x轴的缩放模式为filter，控制y轴的缩放模式为empty，则x轴作为主轴，x的缩放会影响y 轴数据
y轴作为辅助轴，y轴的缩放不会影响x 轴的数据。
3.6.2 内置型数据区域缩放组件
内置是指该区域缩放组件是内置在坐标系中的，其参数和滑动条型基本一致。
举个栗子：将filter 改为 inside
使用鼠标滚轮进行区域即可进行区域缩放
3.6.3 框选型数据区域缩放组件
框选型就是通过选框来进行数据区域缩放，该组件在toolbox 中。
举个栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框选型数据区域缩放组件</title>
<!-- 引入 echarts.js -->
<script src="../js/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: '这是主标题',
subtext: '这是副标题',
left: 'center'//居中显示
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
left: 'left',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true},
dataZoom: {show: true}
}
},
legend: {
data: ['各产品销量情况']
},
xAxis: {
data: ["产品A", "产品B", "产品C", "产品D", "产品E"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [900, 700, 550, 1000, 200]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
浏览器渲染效果
可以看到toolbox 中多了两个按钮，分别是 区域缩放 和 区域缩放还原
区域缩放效果
