ECharts学习四 --- 数据区域缩放组件（dataZoom）

最新推荐文章于 2025-07-11 10:20:42 发布

原创最新推荐文章于 2025-07-11 10:20:42 发布 · 1.5w 阅读

11 ·

CC 4.0 BY-SA版权

ECharts 专栏收录该内容

5 篇文章

订阅专栏

除了图表外， ECharts 中提供了很多交互组件。例如：

图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline

数据区域缩放组件 dataZoom介绍

dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。
dataZoom 的数据窗口范围的设置，目前支持两种形式：
- 百分比形式：参见 dataZoom.start 和 dataZoom.end。
- 绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。

dataZoom 组件现在支持几种子组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

	var myChart = echarts.init(document.getElementById('main'));
	
	myChart.setOption({
	    xAxis: {
	        type: 'value'
	    },
	    yAxis: {
	        type: 'value'
	    },
	    dataZoom: [// 这个dataZoom组件，若未设置xAxisIndex或yAxisIndex，则默认控制x轴。
	        {
	            type: 'slider',//这个 dataZoom 组件是 slider 型 dataZoom 组件（只能拖动 dataZoom 组件导致窗口变化）
	            xAxisIndex: 0, //控制x轴
	            start: 10, 	// 左边在 10% 的位置
	            end: 60 	// 右边在 60% 的位置
	        },
	        {
	            type: 'inside',//这个 dataZoom 组件是 inside 型 dataZoom 组件（能在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放）
	            xAxisIndex: 0,//控制x轴
	            start: 10,
	            end: 60
	        },
	        {
	            type: 'slider',//slider 型 dataZoom 组件
	            yAxisIndex: 0,//控制y轴
	            start: 30,
	            end: 80
	        },
	        {
	            type: 'inside',// inside 型 dataZoom 组件
	            yAxisIndex: 0,//控制y轴
	            start: 30,
	            end: 80
	        }
	    ],
	    series: [
	        {
	            name: 'scatter',
	            type: 'scatter',// 这是个『散点图』
	            itemStyle: {
	                normal: {
	                    opacity: 0.8
	                }
	            },
	            symbolSize: function (val) {
	                return val[2] * 40;
	            },
	            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
	        }
	    ]
	});
	

</script>
</body>
</html>

效果图：（能在坐标系中进行滑动，以及使用滚轮缩放）