效果图

代码

dataZoom: [
			// {
			// 	type: "slider",
			// 	show: val.Ydata.length > 8 ? true : false, //隐藏或显示（true）组件
			// 	backgroundColor: "#1c3030", // 组件的背景颜色。
			// 	fillerColor: "#74adb2", // 选中范围的填充颜色。
			// 	borderColor: "none", // 边框颜色
			// 	showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
			// 	startValue: 0, // 数据窗口范围的起始数值
			// 	endValue: 8, // 数据窗口范围的结束数值（一页显示多少条数据）
			// 	yAxisIndex: [0, 1], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
			// 	filterMode: "empty",
			// 	width: 5, //滚动条高度
			// 	height: "80%", //滚动条显示位置
			// 	right: 3, // 距离右边
			// 	handleSize: 0, //控制手柄的尺寸
			// 	zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
			// 	top: "middle"
			// },
			{
				type: "slider",
				// 判断什么时候显示滚动条
				show: val.Ydata.length > 8 ? true : false,
				top: "middle",
				showDetail: false,
				brushSelect: false,
				orient: "vertical",
				backgroundColor: "#172b2c",
				showDataShadow: false,
				startValue: 0,
				endValue: 8,
				borderColor: "transparent",
				fillerColor: "#74adb2",
				zoomLock: true,
				// 重点设置
				handleSize: "92%",
				// 这个设置不知道为什么不起作用，echarts版本是5以上也不生效
				borderRadius: 100,
				width: 5, //滚动条高度
				height: "80%", //滚动条显示位置
				right: 3, // 距离右边
				handleStyle: {
					borderWidth: "none"
				},
				handleColor: "#74adb2",
				// 通过svg画图形 这个路径是圆
				handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z"
			},
			{
				//没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
				type: "inside",
				yAxisIndex: [0, 1], //控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
				zoomOnMouseWheel: false, //滚轮是否触发缩放
				moveOnMouseMove: true, //鼠标移动能否触发平移
				moveOnMouseWheel: true //鼠标滚轮能否触发平移
			}
		]