首页 前端知识 echarts 当数据过多时,我们使用dataZoom来进行缩放,但是因为数据差距过大而不显示比较大的数据的解决方法

echarts 当数据过多时,我们使用dataZoom来进行缩放,但是因为数据差距过大而不显示比较大的数据的解决方法

2024-05-12 17:05:21 前端知识 前端哥 915 811 我要收藏

1、横向缩放

[{
		"type": 'slider',
		"realtime": true,
		"start": 0,
		"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
		"height": 10, //组件高度
		"left": 0, //左边的距离
		"right": 5, //右边的距离
		"bottom": 30, //下边的距离
		"show": true, // 是否展示
		"fillerColor": "#D8DEEE", // 滚动条颜色
		"borderColor": "#D8DEEE",
		"zoomLock": true,
		"fillerMode": 'filler',
		"showDetail": false,
		"brushSelect": false,
		"dataBackground": {
			"areaStyle": {
				"color": '#F2F7FF'
			}
		}
	},
	{
		"type": "inside", // 支持内部鼠标滚动平移
		"start": 0,
		"show": true,
		"zoomLock": true,//开启 就是禁止滚轮缩放
		"end": 100 - 1500,
		"xAxisIndex": [0]//数据差距大不显示的解决
	}
]

2.纵向缩放

[{
		"type": 'slider',
		"realtime": true,
		"start": 0,
		"end": end, // 数据窗口范围的结束百分比。范围是:0 ~ 100。
		// "height": 5, //组件高度
		"width": 10,
		"left": 3, //左边的距离
		"show": true, // 是否展示
		"fillerColor": "rgba(17, 100, 210, 0.42)", // 滚动条颜色
		"borderColor": "rgba(17, 100, 210, 0.12)",
		"showDetail": false, //拖拽时是否展示滚动条两侧的文字
		"zoomLock": true, //是否只平移不缩放
		"moveOnMouseMove": false, //鼠标移动能触发数据窗口平移
		"zoomOnMouseWheel": false, //鼠标移动能触发数据窗口缩放
		"yAxisIndex": [0],
		"dataZoom-slider": {
			"orient": 'vertical'
		},
		"show": true, // 是否展示
		"fillerColor": "#D8DEEE", // 滚动条颜色
		"borderColor": "#D8DEEE",
		// "zoomLock": true,
		"fillerMode": 'filler',
		"brushSelect": false,
		"dataBackground": {
			"areaStyle": {
				"color": '#F2F7FF'
			}
		}
	},
	{
		"type": "inside", // 支持内部鼠标滚动平移
		"start": 0,
		"end": 50,
		"zoomLock": true,
		// "zoomOnMouseWheel": false,  // 关闭滚轮缩放
		// "moveOnMouseWheel": true, // 开启滚轮平移
		// "moveOnMouseMove": true,  // 鼠标移动能触发数据窗口平移 
		"yAxisIndex": [0],//纵向数据差异过大不显示解决
	}
]

总结:设置"yAxisIndex": [0]或者"xAxisIndex": [0]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8394.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!