Echarts柱状图数据过多设置滚动条效果

未设置前:

 可以看出数据全部挤压在一起了


设置后:

下面多出一个滚动条,并且鼠标可以拖动数据 


dataZoom: [
			{
				show: true,
				height:8,
				bottom:0,
				startValue: 0, //起始值
				endValue: 5, //结束值
				showDetail: false,
				fillerColor: "rgba(1, 132, 213, 0.4)", // 滚动条颜色
		        borderColor: "rgba(17, 100, 210, 0.12)",
		        backgroundColor: 'rgba(221, 220, 107, .1)',//两边未选中的滑动条区域的颜色
		        handleSize: 0,      //两边手柄尺寸
		        showDetail: false, //拖拽时是否展示滚动条两侧的文字
		        zoomLock: true,         //是否只平移不缩放
		        moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                // minValueSpan: 5,  // 放大到最少几个
                // maxValueSpan: 5,  //  缩小到最多几个
			},
			{
		        type: "inside",  // 支持内部鼠标滚动平移
		        start: 0,
		        // end: 20,
		        startValue: 0, // 从头开始。
		        endValue: 5,  // 最多5个
		        zoomOnMouseWheel: false,  // 关闭滚轮缩放
		        moveOnMouseWheel: true, // 开启滚轮平移
		        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
		    }
		],

猜你喜欢

转载自blog.csdn.net/qq_17211063/article/details/131516969