ucharts 折线图y轴数据显示问题

ucharts的y轴默认对数据是5等份,y轴的最大值与最小值是默认取数组里面最大值与最小值,

当最大值数值小于5时就会出现这种数据显示异常的问题

 解决方法:自定义y轴的最大值与最小值,从数组拿到最大值与最小值。最大值与最小值分别与5取余,如果能整除,就让y轴的最大值与最小值分别等于数组的最大值与最小值,反之走下面代码逻辑

this.chartList.forEach(item=>{
					arr.push(item.jbw)
					arr.push(item.eyy)
					arr.push(item.syl)
					arr.push(item.qt)
				})
				let min = Math.min.apply(null,arr)
				let max = Math.max.apply(null,arr)
				if(max%5==0){
						this.options.yAxis.data[0].max=max
				}else{
						this.options.yAxis.data[0].max=max+(5-max%5)
				}
				if(min==0){
						this.options.yAxis.data[0].min=min
				}else{
					if(min%5==0){
						this.options.yAxis.data[0].min=min
					}else{
						console.log("ffff")
						this.options.yAxis.data[0].min=min-min%5
					}
				}
<qiunCharts type="column" :chartData="chartData" :chartList="chartList" background="none" :opts="options" :canvas2d="true" :canvasId="chartId" />

效果图:

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值