一個思惟轉換，讓Echarts可以繪製不刻度均勻數值軸

最近項目組接到了許多對圖表有特殊要求的需求，好比今天說的這個呈現光纖的中斷時長分佈的需求：
光纖的中斷大部分落在30分鐘以內，但偶爾遇到特殊狀況時，會出現中斷一兩天甚至更長的時間，若是把這些時長分佈放在一個刻度均勻的數軸上，勢必形成大部分的指標（此處爲柱狀圖）特別短的問題，所以，但願創建一個刻度一開始均勻分佈，好比10min、20min,到60min以後馬上升爲2hour、1day這樣的需求。

一開始拿到這個任務，個人第一反應，是查找Echarts的配置項手冊，但願經過在yAxis上作手腳來解決問題。然鵝事情老是沒有想象的順利，echart對y軸對配置只能指定幾種type：‘category’、‘value’和‘log’，雖然配置爲log對數軸也能夠解決較大值對較小值對影響的問題，但當值較小時也沒法經過長度區分開，不夠完美。

慶幸的是，在echarts的GitHub官網上，pissang大大給出了一個思路：

深受啓發！爲何必定要依賴Echarts自己給予解決方案呢？徹底能夠本身構造一個新的分佈呀！

很少說，開始碼：

第一步：利用yAixs.axisLabel.formatter僞造一個不均勻座標軸

先給你們看看具體的代碼：

//利用formatter將y軸上原本爲70(min),80(min)的點強制改成2hour和1day
formatter:function(value) { 
    let item='';
    if(value==70){
        item='2hour'            
    }else if(value===80){
        item='1Day'
    }else{
        item=value+' min'
    }
    return item
}

第二步：將數據映射到一個特定的分佈

這句話的意思，其實就是本身構造一個函數，將原始數據裏較大的數值轉換成一個小數值

我是這樣作的：

//模擬數據，其中的200、150是應該落在2hour和1day之間，因此映射後的數據應該落在70min到80min之間
let data = [10, 15, 4, 20, 200, 150, 19,70,1441];
function formatData(arr){    //本身構造一個用來映射data到均勻數軸上的方法
    for(let i=0;i<arr.length;i++){
        if(arr[i]>60&&arr[i]<=120){
            let percent1=(arr[i]-60)/120;
            arr[i]=percent1*10+60;
        }else if(arr[i]>120&&arr[i]<1440){
            let percent2 =(arr[i]-120)/1440;
            console.log(percent2);
            arr[i]=percent2*10+70;
        }
    }
    return arr;
}

上面這個formatData，其實就是對data數組裏超過60的數據進行改造，若是這個數據超過了60min且小於120min（2hour），就按照這個數據在60到120段應該有的比例，映射到60到70段裏，而超過2hour且小於1day的數據，則一樣按這個方法，計算映射到70到80段裏

這樣一來，任務已經基本完成啦！

第三步：將數據反映射爲原來的值

可是如今在圖表裏，咱們拿到的是映射後的數據，若是此時的tooltip是開放的，那麼用戶在tooltip裏讀到的數據就不是原來的200min,150min這種的了，而變成了一個70min到80min之間的較小數據。怎麼辦？只能在每一個須要展現數據的地方，嚴防死守，將這幾條特殊的數據反計算回去咯！

tooltip:{
    formatter:function(params) {  //因爲在tooltip裏須要展現原始的數據，因此要把映射後的數據反計算回去
        let str=params.name+':'+params.value;
        if(params.value>=60&&params.value<70){
            let percent = (params.value-60)/10
            let value = Math.round(percent*120+60);//注意此處的percent已是個浮點數了，因此獲得value以前要用四捨五入取整才行
            str=params.name+' : '+value;
        }else if(params.value>70&&params.value<80){
            let percent = (params.value-70)/10;
            let value =Math.round(percent*1440+120);
            str=params.name+' : '+value;
        }
        return '<div style="width:70px;height:50px;display:flex;align-items:center">\
            <span style="background-color:#D53A35;width:15px;height:15px;display:inline-block;border-radius:50%"></span>\
            <span>'+str+'</span>\
        </div>'
    }
}

嗯，如今就能夠了，接下來上一個效果圖炫耀一下：

一切看上去都是那麼的完美，其實這種方法固然仍是瑕疵的，你能看出來嗎：）