3.6 数据区域缩放
在ECharts中，数据区域缩放组件称为dataZoom，它的作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节。
目前ECharts支持的区域缩放组件有如下几种：
▪ 滑动条型数据区域缩放组件（dataZoomSlider）
▪ 内置型数据区域缩放组件（dataZoomInside）
▪ 框选型数据区域缩放组件（dataZoomSelect）
1. 滑动条型数据区域缩放组件
滑动条型数据区域缩放组件比较常用的参数有以下几个。
1）xAxisIndex：指定控制的x轴。如果一个可视化中有多个图表，我们的区域缩放组件控制的是哪个轴呢？此时就需要指定这个参数的取值：如果取值是一个数字，则控制的是一个轴；如果取值是一个数组，那么控制的是多个轴。下面我们来看以下示例代码：
otion: {
xAxis: [
{...}, //第一个xAxis
{...}, //第二个xAxis
{...}, //第三个xAxis
{...} //第四个xAxis
],
dataZoom: [
{ //第一个dataZoom组件
xAxisIndex: [0, 3] //表示这个dataZoom组件控制第一个和第四个xAxis
},
{ //第二个dataZoom组件
xAxisIndex: 2 //表示这个dataZoom组件控制第三个xAxis
}
]
}
此时第一个dataZoom组件控制的是第一个和第四个xAxis，而第二个dataZoom组件控制的是第三个xAxis。
除了xAxisIndex，也有yAxisIndex，用法类似，这里不再赘述。
2）filterMode：过滤模式，dataZoom数据窗口缩放的实质是数据过滤，即过滤掉窗口外的内容。
过滤模式有多种，常用可选值如下所示。
▪ filter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只要有一个维度在窗口外，就会被过滤掉。
▪ weakFilter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只有当其所有维度都在窗口同侧外，才会被过滤掉。
▪ empty：不会影响其他轴的数据范围。
▪ none：不过滤数据，只会改变数轴范围。
我们来看一个具体的例子，这里只设置了option：
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]
]
}
}
结果如图3-9所示。
图3-9 过滤模式
从代码中可以看到，控制x轴的缩放模式为filter，控制y轴的缩放模式为empty，则x轴作为主轴，x的缩放会影响y轴数据，y轴作为辅助轴，y轴的缩放不会影响x轴的数据。可以随意拖动x轴或者y轴滑动条的两端，或是拖动滑动条，实现窗口数据缩放。
2. 内置型数据区域缩放组件
所谓内置，是指该区域缩放组件是内置在坐标系中的，其参数和上面提到的滑动条型数据区域缩放组件的参数基本一致。将上面代码中的slider类型改为inside类型，代码如下所示：
option = {
dataZoom: [
{
id: 'dataZoomX',
type: 'inside',
xAxisIndex: [0],
filterMode: 'inside'
},
{
id: 'dataZoomY',
type: 'inside',
yAxisIndex: [0],
filterMode: 'empty'
}
],
xAxis: {type: 'value'},
yAxis: {type: 'value'},
series:{
type: 'bar',
data: [
//第一列对应X轴，第二列对应Y轴
[10, 30],
[20, 50],
[5, 20],
[2, 10]
]
}
}
观察可视化结果，如图3-10所示。
图3-10 内置型数据区域缩放组件
将鼠标悬停在可视化区域，滚动鼠标滚轮，可以发现可视化数据窗口在变化，所谓内置，其实就是将缩放按键内置在图中，不显式地出现在我们视野中。
3. 框选型数据区域缩放组件
框选型，顾名思义，是通过选框来进行数据区域缩放，该组件在之前提到的toolbox中。下面我们来看个实例。
在之前讲解toolbox时的代码中的toolbox.feature下加入dataZoom : {show: true}，为了看清楚toolbox，还要在toolbox下设置left : 'left'，得到以下的option代码：
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]
}]
};
观察可视化结果，如图3-11所示。
图3-11 框选型数据区域缩放组件
在左上角的toolbox工具箱中，多了两个按钮，分别是“区域缩放”和“区域缩放还原”（见图3-11中线框处），点击“区域缩放”按钮，在可视化图中划出一个区域，即可对数据进行缩放，点击“区域缩放还原”，可以清除缩放并还原到最初的可视化状态。