ucharts 當資料最大值較小的時候,Y軸會出現小數點
阿新 • • 發佈:2020-12-10
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裡面監聽,否則可能改變不了。