echarts折线图改变y轴刻度

目前项目有个要求，比如y轴数据大部分在几百，但是有个峰值达到了1W。。这样导致经常出现的几百的数据变化不明显，这时候就需要对y轴数据进行处理，将不经常出现的数据范围进行缩小，比如1-500和500-5000的间距变为一样，这样就可以方便看到数据的变化了。
针对两个问题有两种解决方法：
1. 不要求y轴数据的规律，这时候可以用开立方缩小数据的间隙。

https://blog.csdn.net/WanweI897/article/details/121271044?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%E8%AE%BE%E7%BD%AE%E4%B8%8D%E5%9D%87%E5%8C%80%E5%88%BB%E5%BA%A6&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-121271044.nonecase&spm=1018.2226.3001.4187

2.要求y轴数据间隙有一定规律
参考

//折线图坐标点算法
//需求：100 200 500 1000 1500 2000...
function initPointData(pointData, max, min) {
    //第一个分界点
    var part1 = 200;
    //第二个分界点
    var part2 = 500;
    //单个间隔
    var inter = 100;
    //前两段间隔
    var twoInter = 300;
    //最后一段间隔
    var lastInter = 500;
    //最大刻度
    if (max > 0) {
        var maxNum = (max / 500 + 1) * 500;
    } else {
        var maxNum = 0;
    }
    if (min < 0) {
        var minNum = -(Math.abs(min / 500) + 1) * 500;
    } else {
        var minNum = 0;
    }
    var returnPosition = 0;  //初始化返回的值*
    //判断当前值范围,不同区间范围计算多余占比，加上之前实际的间隙
    if (pointData <= part1 && pointData >= -part1) {
        returnPosition = pointData;
    } else if (pointData > part1 && pointData <= part2) {
        returnPosition = (pointData - part1) / (part2 - part1) * inter + part1;
    } else if (pointData > part2 && pointData <= maxNum) {
        returnPosition = (pointData - part2) / (maxNum - part2) * ((maxNum - part2) / lastInter) * inter + twoInter;
        console.log((pointData - part2) / (maxNum - part2) * (maxNum / lastInter) * inter)
    } else if (pointData < -part1 && pointData >= -part2) {
        //
        returnPosition = Math.abs(parseFloat(pointData) + part1) / (part1 - part2) * inter - part1;
        console.log(Math.abs(parseFloat(pointData) + part1) / (part1 - part2) * inter)
    } else if (pointData < -part2 && pointData >= minNum) {    //-500 - -1500
        returnPosition = (parseFloat(pointData) + part2) / Math.abs(minNum + part2) * (Math.abs(minNum + part2) / lastInter) * inter - twoInter;
    } else {
        returnPosition = pointData;
    }
    return returnPosition
}

function getData(temp) {
    var jsonString = [];
    for (var i = 0; i < temp.length; i++) {
        var json = {};
        var seaMax = searchMax(temp);
        var seaMin = searchMin(temp);
        json.name = temp[i];
        json.value = initPointData(temp[i], seaMax, seaMin);
        jsonString.push(json);
    }
    return jsonString;
}

function searchMax(arr) {
    var maxNumber = Math.max.apply(null, arr);
    return maxNumber;
}

function searchMin(arr) {
    var minNumber = Math.min.apply(null, arr);
    return minNumber;
}

//极值绘制曲线
function echartsDemo(elementid, title) {
	var datas = {
        xAxis: [123, 456, 789, 576, 423, 425], yAxis1: [123, 456, 789, 576, 423, 425], yAxis2: [742, 842, 126, 586, 485, 523]
    }
    var dom = document.getElementById(elementid);
    var myChart = echarts.init(dom);
    //获取两个曲线的最大最小值
    var seaMax1 = searchMax(datas.yAxis1);
    var seaMin1 = searchMin(datas.yAxis1);
    var seaMax2 = searchMax(datas.yAxis2);
    var seaMin2 = searchMin(datas.yAxis2);
    var totalMax = seaMax1 > seaMax2 ? seaMax1 : seaMax2;
    var totalMin = seaMin1 > seaMin2 ? seaMin2 : seaMin1;
    option = {
        title: {
            text: title,
            show: true,
            top: '0',

        },
        tooltip: {
            type: 'line',
            trigger: 'axis',
            formatter: function (params) {
                var result = ''
                var axisName = ''
                params.forEach(function (item) {
                    axisName = item.axisValue
                    var itemValue = item.marker + item.seriesName + ": " + item.data.name + "</br>"
                    result += itemValue
                })
                var allResult = result + "</br>" + axisName
                return allResult
            },
            axisPointer: {
                lineStyle: {
                    type: 'dotted',
                    color: 'red',
                    width: 2,
                },
                animation: false
            },
            textStyle: {
                fontSize: 10,
                color: 'white',
                decoration: 'none'
            }
        },
        legend: {
            data: ['111', '222']
        },
        xAxis: {
            name: 'Time',
            nameLocation: 'center',
            nameTextStyle: {
                color: "gray",
                fontSize: 10,
                padding: 10
            },
            splitLine: {
                show: false
            },
            type: 'category',
            data: datas.xAxis,
        },
        yAxis: {
            type: 'value',
            interval: 100,
            max: function (value) {//取最大值向上取整为最大刻度
                if (totalMax > 0) {
                    return (parseInt(totalMax / 500)) * 100 + 300;
                } else {
                    return 0;
                }
            },
            min: function (value) {//取最小值向下取整为最小刻度
                if (totalMin < 0) {
                    return (parseInt(totalMin / 500)) * 100 - 300;
                } else {
                    return 0;
                }
            },
            splitLine: {
                show: true,
            },
            minInterval: 100, //这个可自己设置刻度间隔
            axisLabel: {
                formatter: function (value, index) {  //Y轴的自定义刻度值，对应上图
                    //最大值最小值都大于0
                    if (totalMax >= 0 && totalMin >= 0) {
                        var interNum1 = parseInt(totalMax / 500);
                        var numAll = interNum1;
                        if (index == 0) {
                            value = 0
                        } else if (index == 1) {
                            value = 100
                        } else if (index == 2) {
                            value = 200
                        } else if (index == 3) {
                            value = 500
                        }
                        for (var i = numAll; i > 0; i--) {
                             if (index == i + 3) {
                                 value = 500 + i * 500
                            }
                        }
                        return value;
                    }
                    //最大值最小值都小于0
                    if (totalMax < 0 && totalMin < 0) {
                        var interNum2 = parseInt(Math.abs(totalMin / 500));
                        var numAll = interNum2;
                        for (var i = 0; i < interNum2; i++) {
                            if (index == i) {
                                value = -500 * (interNum2 - (i - 1));
                            }
                        }
                        if (index == interNum2) {
                            value = -500
                        } else if (index == interNum2 + 1) {
                            value = -200
                        } else if (index == interNum2 + 2) {
                            value = -100
                        } else if (index == interNum2 + 3) {
                            value = 0
                        }
                        return value;
                    }
                    //最大值大于0，最小值小于0
                    if (totalMax > 0 && totalMin < 0) {
                        var interNum1 = parseInt(totalMax / 500);
                        var interNum2 = parseInt(Math.abs(totalMin / 500));
                        for (var i = 0; i < interNum2; i++) {
                            if (index == i) {
                                value = -500 * (interNum2 - (i - 1))
                            }
                        }
                        if (index == interNum2) {
                            value = -500
                        } else if (index == interNum2 + 1) {
                            value = -200
                        } else if (index == interNum2 + 2) {
                            value = -100
                        } else if (index == interNum2 + 3) {
                            value = 0
                        } else if (index == interNum2 + 4) {
                            value = 100
                        } else if (index == interNum2 + 5) {
                            value = 200
                        } else if (index == interNum2 + 6) {
                            value = 500
                        }
                        for (var i = 0; i < interNum1; i++) {
                            if (index == interNum2 + 7 + i) {
                                value = 500 * (i + 2)
                                console.log(value)
                            }
                        }
                        return value;
                    }
                }
            }
        },
        series: [
        {
            name: '111',
            type: 'line',
            animation: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data: getData(datas.yAxis1)

        }, {
            name: '222',
            type: 'line',
            animation: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data: getData(datas.yAxis2)
        }
        ],

    }
    myChart.clear();
    myChart.setOption(option);
}

效果图：100，200，500，1000

3.一定范围内显示正常，范围外数字压缩显示
比如在[-500,500]内范围显示，在其他内容时候压缩显示。

function testFun(elementid, title, datas) {
	//定义范围
    var lowerScale = -500
    var higherScale = 500
    
    var dom = document.getElementById(elementid);
    var myChart = echarts.init(dom);
    option = {
        title: {
            text: title,
            show: true,
            top: '0'
        },
        tooltip: {
            type: 'line',
            trigger: 'axis',
            formatter: function (params) {
                var str = "";
                $.each(params, function (i, item) {
                    //将压缩后的数据还原显示
                    var value = item.data
                    if (value < lowerScale) {
                        value = -Math.pow((value - lowerScale), 2) + lowerScale
                    } else if (value > higherScale) {
                        value = Math.pow((value - higherScale), 2) + higherScale
                    }
                    if (item.data !== undefined) {
                        str += item.seriesName + '：' + thousandBitSeparator(parseFloat(value).toFixed(2)) + '<br/>';
                    }
                    if (i == params.length - 1) {
                        str += 'Time: ' + item.axisValue;
                    }
                })
                return str;
            },
            axisPointer: {
                lineStyle: {
                    type: 'dotted',
                    color: 'red',
                    width: 2,
                },
                animation: false
            },
            textStyle: {
                fontSize: 10,
                color: 'white',
                decoration: 'none'
            }
        },
        legend: {
            data: ['data1','data2', 'data3'],
        },
        xAxis: {
            name: 'Time',
            nameLocation: 'center',
            nameTextStyle: {
                color: "gray",
                fontSize: 10,
                padding: 10
            },
            splitLine: {
                show: false
            },
            type: 'category',
            data: datas.xAxis,
            axisLabel: {
                formatter: (value, index) => {
                    return value.substr(11, 5);
                },
                interval:13,
                align: 'center'
            }
        },
        grid: {
            top: '12%',
            bottom: '5%',
            left: '2%',
            right: '16px',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            min: function (value) {
                return value.min
            },

            max: function (value) {
                return value.max
            },
            scale: true,
            axisTick: {
                inside: true
            },
            axisLabel: {
                inside: true,
                margin: 5,
                textStyle: {
                    fontSize: 12,
                },
                formatter: function (value) {
                	//还原y轴刻度标签
                    if (value < lowerScale) {
                        return Math.floor(-Math.pow((value - lowerScale), 2) + lowerScale)
                    } else if (value > higherScale) {
                        return (Math.pow((value - higherScale), 2) + higherScale).toFixed(2)
                    } else {
                        return value
                    }
                }
            },
            //min:0
        },
        series: [
        {
            name: 'data1',
            type: 'line',
            animation: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            //数据压缩
            data: datas.y1.map(function (i) {
                if (i < lowerScale) {
                    return lowerScale - Math.sqrt(Math.abs(i - lowerScale))
                } else if (i > higherScale) {
                    return higherScale + Math.sqrt(i - higherScale)
                } else {
                    return i
                }
            })
        },
        {
            name: 'data2',
            type: 'line',
            animation: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            itemStyle: {
                normal: {
                    color: '#0000FF', // 折线条的颜色
                }
            },
            //数据压缩
            data: datas.y2.map(function (i) {
                if (i < lowerScale) {
                    return lowerScale - Math.sqrt(Math.abs(i - lowerScale))
                } else if (i > higherScale) {
                    return higherScale + Math.sqrt(i - higherScale)
                } else {
                    return i
                }
            })

        }, {
            name: 'data3',
            type: 'line',
            animation: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            //数据压缩
            data: datas.y3.map(function (i) {
                if (i < lowerScale) {
                    return lowerScale - Math.sqrt(Math.abs(i - lowerScale))
                } else if (i > higherScale) {
                    return higherScale + Math.sqrt(i - higherScale)
                } else {
                    return i
                }
            })
        }
        ],

    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $(window).resize(myChart.resize);
}

这样显示的刻度就为可以在范围外压缩数据，如
-500,-400…400,500,10000