echarts 添加滚动轴

最新推荐文章于 2024-06-08 21:17:27 发布

茶梨吐司

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_41615323/article/details/114368458

版权

需求：解决x轴数据过多导致页面拥挤
解决：添加滚动轴 dataZoom

				dataZoom:[
					 { //y轴固定,让内容滚动
							type: 'slider',
							xAxisIndex: [0],
							show:true, //显示滚轴
							height:8, //设置滚轴的高度
							bottom:0, //设置滚轴在底部
							start: 0,
							end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
							zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
							minValueSpan:0,//用于限制窗口大小的最小值（实际数值）。
							maxValueSpan:7,//用于限制窗口大小的最大值（实际数值）。
							realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
							showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认true
							filterMode:'empty' // 溢出窗口数据隐藏		
					},			
				],

效果
完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		  <div id="main" style="width: 450px;height:300px;"></div>
	</body>
	
	    <!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script type="text/javascript">
		var xArr = ['横坐标1','横坐标2','横坐标3','横坐标4','横坐标5','横坐标6','横坐标7','横坐标8','横坐标9','横坐标10','横坐标13','横坐标14','横坐标15','横坐标16','横坐标17','横坐标18','横坐标19','横坐标26','横坐标27','横坐标28']
		var dataArr = [100, 600, 300, 100, 250, 500,400,449,600, 600, 300, 100, 250, 500,400,149,201,332,123,455];
		
		
		
		
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		
		// 指定图表的配置项和数据
		var option = {
		    backgroundColor: '#ffffff',
				title: {
					text: '测试统计表',
					subtext: '这是一个测试统计表',
					x: 'center'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				dataZoom:[
					 { //y轴固定,让内容滚动
							type: 'slider',
							xAxisIndex: [0],
							show:true, //显示滚轴
							height:8, //设置滚轴的高度
							bottom:0, //设置滚轴在底部
							start: 0,
							end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
							zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
							minValueSpan:0,//用于限制窗口大小的最小值（实际数值）。
							maxValueSpan:7,//用于限制窗口大小的最大值（实际数值）。
							realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
							showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认true
							filterMode:'empty' // 溢出窗口数据隐藏		
					},			
				],
		    xAxis: [{
		        type: 'category',
						 data: xArr,
						 axisTick: {
							alignWithLabel: true
						},
		        axisLabel: {
		            margin: 10,
		            color: '#a4a4a4',
								interval: 0,
		        },
		        axisLine: {
		            show: false
		        },
		        axisTick: {
		            show: false
		        }
		    }],
		    yAxis: [{
					  type: 'value',
		        axisLabel: {
		            color: '#a4a4a4',
		        },
		        axisLine: {
		            show: true
		        },
		        axisTick: {
		            show: true
		        },
		        splitLine: {
		            show: true
		        }
		    }],
					series: [{
						name: '',
						type: 'bar',
						barWidth: '20px',
						data: dataArr,
						itemStyle: {
								normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 1,
												color: 'rgba(102,159,239,1)'
										}, {
												offset: 0,
												color: 'rgba(170,202,246,1)' 
										}], )
								}
						},
					}]
		};	

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	 </script>
</html>

茶梨吐司

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
echarts 添加滚动轴

需求：解决x轴数据过多导致页面拥挤解决：添加滚动轴 dataZoom dataZoom:[ { //y轴固定,让内容滚动 type: 'slider', xAxisIndex: [0], show:true, //显示滚轴 height:8, //设置滚轴的高度 bottom:0, //设置滚轴在底部 start: 0, end: 80,//设置X轴刻度之间的间隔(根据数据量来调整).
复制链接

扫一扫