Echarts实现不均匀刻度的方法，自定义刻度(转)

原文地址

今天突然有个我们的咨询公司找我问一个echarts问题，这个问题确实值得一解决，很有意思。

问题是这样的。数据中有很多低于100的数值，但是最高值却能达到14000。

data = [93.65, 101.08, 97.15, 171.58, 115.23, 127.55, 117, 115.46, 114.27, 106.68, 116.66, 110.77, 111.88, 114.08, 130.46, 129.04, 126.71, 116.46, 121.66, 119.56, 146.02, 741.23, 3436.16, 14700, 19,336, 8647.53, 4815.84, 4541.84, 4587.21, 5272.62]
他用常规的echarts实现效果如下：

 

他主要两个诉求：一是不均匀的划分Y轴，二是tooltip显示原值。

这个问题网上貌似没有一个成型的解决方案，所以我记录一下，方便他人。最终我实现的效果如下：

 

代码如下：

一、修改纵坐标的数值

    

yAxis: {
            type: 'value',
            axisLine:{
                show:false
                },
            axisTick:{
                show:false
                },
            min:0,
            max:21000,
            splitNumber:8,
            axisLabel:{
            formatter:function(v){
                let item = ''
                if(v===0){
                    item='0'
                }else if(v==3000){
                    item = '1'
                }else if(v==6000){
                    item = '100'
                }else if(v==9000){
                    item = '300'
                }else if(v==12000){
                    item = '500'
                }else if(v==15000){
                    item = '1000'
                }else if(v==18000){
                    item = '10000'
                }else if(v==21000){
                    item = '20000'
                }else if(v==24000){
                    item = '30000'
                }
                return item
                }
            }
    },

二、处理原数据，采用的方法是把以前100以内的数据模拟到6000以内，就是同比例放大。

let wxdata = [93.65, 101.08, 97.15, 171.58, 115.23, 127.55, 117, 115.46, 114.27, 106.68, 116.66, 110.77, 111.88, 114.08, 130.46, 129.04, 126.71, 116.46, 121.66, 119.56, 146.02, 741.23, 3436.16, 14700, 19,336, 8647.53, 4815.84, 4541.84, 4587.21, 5272.62]
      
function formatData(arr){
    let newHashArray = []
    for(var i=0;i<arr.length;i++){
        let obj={}
        let temp = arr[i]
        if(arr[i]>0&&arr[i]<1){
            arr[i]=arr[i]*3000    
        }else if(arr[i]>1&&arr[i]<100){
            arr[i]=3000+arr[i]*(3000/99)
        }else if(arr[i]>100&&arr[i]<300){
            arr[i]=6000+arr[i]*(3000/200)
        }else if(arr[i]>300&&arr[i]<500){
            arr[i]=9000+arr[i]*(3000/200)
        }else if(arr[i]>500&&arr[i]<1000){
            arr[i]=12000+arr[i]*(3000/500)
        }else if(arr[i]>1000&&arr[i]<10000){
            arr[i]=15000+arr[i]*(3000/9000)
        }
        obj.value = arr[i]
        obj.formatV = temp
        newHashArray.push(obj)
          }
          return newHashArray;
      }
let wxArray = formatData(wxdata)
//二、在series中直接设置data，data会直接取value值

{
    name: '微信小程序浏览量',
    type: 'line',
    areaStyle: {},
    lineStyle:{
        color:['rgb(7,193,96)'],
    },
    data:wxArray
},
//三、修改tooltip的值

tooltip: {
            trigger: 'axis',
            formatter(param){
                                
                return `微信访问：${param[7].data.formatV}`
                }
        },

这个折线就是模拟，精度肯定是不那么准确，但是看趋势还是不错的，而且tooltip的值也是准确的。还不错。