echarts缩放滚动条,移动端echarts缩放,echarts拖动,echarts设置自定义滚动条,echarts datazoom高度,echarts 滚动
ECharts（百度开发的一个可视化图表库）提供了 dataZoom 配置，用于数据区域缩放。其中，滑动条型数据区域缩放组件（dataZoomSlider）是一种常见的 dataZoom 组件类型。

使用 dataZoomSlider 可以让用户通过鼠标拖拽、滚轮滚动等方式对图表中展示的数据进行缩放，从而更加方便地查看感兴趣的数据细节。dataZoomSlider 在 ECharts 中通过配置 xAxis 或 yAxis 上的 dataZoom 组件来实现。

以下是一个简单的例子，演示如何在 ECharts 中配置一个基本的 dataZoomSlider：

javascript
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}],
dataZoom: [{
type: 'slider', // 表示启用 dataZoomSlider
xAxisIndex: 0, // 表示将 dataZoom 应用到第一个 xAxis 上
start: 0, // 表示默认的缩放起始位置为 0%
end: 50 // 表示默认的缩放结束位置为 50%
}]
};


在上面的配置中，我们创建了一个基本的折线图，其中 xAxis 为类目轴，yAxis 为数值轴。我们还定义了一个包含一组数据的 series。最后，在 dataZoom 配置中，我们添加了一个 type 为 slider 的 dataZoom 组件，并将其应用到第一个 xAxis 上。

运行这段代码后，我们会看到在图表下方出现了一个滑动条，通过拖拽这个滑动条可以对图表进行缩放。默认情况下，图表展示的数据范围为 x 轴上的 0%~50% 区间。如果要调整默认的缩放起始位置和结束位置，可以使用 start 和 end 属性进行配置。