1. 程式人生 > 其它 >ucharts 當資料最大值較小的時候,Y軸會出現小數點

ucharts 當資料最大值較小的時候,Y軸會出現小數點

技術標籤:uniappucharts

ucharts 圖表使用的時候如果傳過來的最大值調小,Y軸就會出現下面的問題,這樣肯定是不好的,解決如下:

獲取series傳值裡面的最大值,動態設定Y軸的splitNumber: this.num,

getNum() {
			let maxArr = this.dataEcharts[this.valueKey][0].data;
			let num = '';
			let newArr = maxArr.map(Number); // 字串陣列轉為整數陣列
			let max = newArr[0]
			for(let i =0,len=newArr.length;i<len;i++){
				if(max<newArr[i]){
					max = newArr[i]
				}
			}
			if(max>=5){
				num = 5;
			}else if(max>=4){
				num = 4;
			}else if(max>=3){
				num = 3
			}else if(max>=2){
				num = 2
			}else if(max>=0){
				num = 1
			}
			this.num = num;
		},
...
yAxis: {
				//如果是多座標系則傳陣列型物件[{disabled:true},{disabled:false}]
				disabled: false, //不繪製Y軸
				position: 'left', //Y軸位置,可選值左側left右側right(未起效果)
				min: 1, 
				splitNumber: this.num|| 5,
				format: val => {return val.toFixed(0);} // 格式化Y軸,不顯示小數點
			},
...

注意:如果是元件傳值的話,父元件傳的值如果改變,子元件必須要在watch裡面監聽,否則可能改變不了。