ECharts中的放大与缩放功能

ECharts 中的 dataZoom 组件提供了两种类型的缩放功能：内置型数据区域缩放组件（dataZoomInside）和滑动条型数据区域缩放组件（dataZoomSlider）。这两种组件都允许用户通过鼠标拖拽、鼠标滚轮或手指滑动（触屏上）来缩放或漫游坐标系。
内置型数据区域缩放组件（dataZoomInside）内置于坐标系中，使用户可以在坐标系上直接通过鼠标拖拽、鼠标滚轮或手指滑动来缩放或漫游坐标系。而滑动条型数据区域缩放组件（dataZoomSlider）则有单独的滑动条，用户在滑动条上进行缩放或漫游。
要使用 dataZoom 组件，需要在 ECharts 的 option 配置中加入相应的配置项。例如：

option = {
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60
},
{
type: 'inside',
xAxisIndex: 0,
start: 10,
end: 60
}
],
// 其他图表配置项...
};

在上面的例子中，我们使用了两个 dataZoom 组件，一个滑动条型和一个内置型。它们都绑定到了 x 轴上（xAxisIndex: 0），并且设置了各自的起始和结束比例（start 和 end）。这样，当用户操作这些组件时，图表会在指定的比例范围内进行缩放或漫游。
此外，dataZoom 组件还支持一些额外的配置项，如 zoomOnMouseWheel 属性，它决定了如何触发缩放。可选值为 true、false、’shift’、’ctrl’ 或 ‘alt’。当值为 true 时，表示不按任何功能键，鼠标滚轮能触发缩放；当值为 ‘shift’ 时，表示按住 shift 和鼠标滚轮能触发缩放；当值为 ‘ctrl’ 时，表示按住 ctrl 和鼠标滚轮能触发缩放；当值为 ‘alt’ 时，表示按住 alt 和鼠标滚轮能触发缩放；当值为 false 时，表示鼠标滚轮不能触发缩放。这些配置项为用户提供了更大的灵活性，可以根据实际需求来自定义缩放操作。
需要注意的是，dataZoom 组件默认不开启，如果需要开启，需要设置相应的属性值。同时，如果只想要开启缩放或者平移，可以设置成 ‘scale’ 或者 ‘move’。例如：

option = {
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
start: 10,
end: 60,
roam: true, // 是否开启漫游模式，默认为 false。开启后可以通过鼠标拖拽来平移图表。
zoomOnMouseWheel: 'alt', // 使用 alt + 鼠标滚轮来触发缩放操作。其他可选值有 true、false、'shift'、'ctrl'。默认为 false。
// 其他 dataZoom 配置项...
}
],
// 其他图表配置项...
};

在实际使用中，需要根据具体需求选择合适的 dataZoom 组件类型和配置项，以实现所需的图表缩放和平移效果。同时，也需要注意与其他图表配置项的协调使用，以确保最终的图表展示效果符合预期。