echarts 柱状图去掉滚动条默认样式

饺子啊~

已于 2024-10-25 10:27:01 修改

阅读量2k

点赞数

分类专栏： vue 文章标签： echarts 前端 javascript

于 2022-11-16 23:23:26 首次发布

本文链接：https://blog.csdn.net/anLazyAnt/article/details/127895588

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Echarts柱状图中去除默认滚动条样式并进行自定义设置，包括颜色、尺寸、透明度和手柄大小等。通过dataZoom组件，设置了filterMode、fillerColor、borderColor、handleSize、showDetail等属性，实现了滚动条视觉效果的个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts 柱状图，内部可滚动，去掉滚动条默认样式


        
				dataZoom: [
					{
						type: 'slider',
						xAxisIndex: [0],
						start: 60,
						end: 100,
						orient: 'horizontal',
						bottom: '3%',
						backgroundColor: '#efefef',
						fillerColor: '#bfbfbf',
						borderColor: 'rgba(0, 89, 154, 0)',
						filterMode: 'none',
						showDataShadow: false,
						showDetail: false,
						realtime: true,
						zoomLock: true,
						height: 5,
						bottom: 0,
						moveHandleSize: 0,
						brushSelect: false,
						handleStyle: {
							opacity: 0
						}
					},
					{
						xAxisIndex: [0],
						start: 60,
						end: 100,
						filterMode: 'none',
						type: 'inside',
						zoomLock: true,
						zoomOnMouseWheel: false,
						moveOnMouseMove: true,
						moveOnMouseWheel: true
					}
				]