美文网首页
Echarts动态设置y轴的最大值,只要一个方法

Echarts动态设置y轴的最大值,只要一个方法

作者: nomooo | 来源:发表于2020-03-13 16:44 被阅读0次

    思路:取出所有数据的最大值,如果跟10作比较,比10小,返回10
    如果比10大,返回比最大值大的数字,而这个数刚好是10的倍数,这样柱状图比较美观。

    下面中的maxValue 为最大值的限制,可随意更改。

    方法中传入数组即可,嵌套很深的数组都可以取出最大值

    TypeScript

    // 设置y轴最大值
    const setYAxisMaxVal = (arrayF: number[]): number => {
        // 扁平化n维数组方法,与Array.flat()相同
        const flatten = (arr: any) => {
            while (arr.some((item: any) => Array.isArray(item))) {
                arr = [].concat(...arr);
            }
            return arr;
        };
      // 计算y轴最大值并返回
        const returnMaxValue = (array: number[], referMax: number): number => {
            try {
                // flat和flatMap方法为ES2019(ES10)方法,目前还未在所有浏览器完全兼容,所以使用trycatch
                if (Math.max(...array.flat(Infinity)) > referMax) {
                    referMax = (referMax - (Math.max(...array.flat(Infinity)) % referMax)) + Math.max(...array.flat(Infinity));
                }
                return referMax;
            } catch (error) {
                // 如果客户端不支持flat,则使用上面自己写的flatten来扁平化数组 
                if (Math.max(...flatten(array)) > referMax) {
                    referMax = (referMax - (Math.max(...flatten(array)) % referMax)) + Math.max(...flatten(array));
                }
                return referMax;
            }
        };
        let maxValue: number = 10;
        maxValue = returnMaxValue(arrayF, maxValue);
        return maxValue;
    };
    
    

    使用

                const arr1 = [1, 2, 3, 5, 8]
                const arr2 = [11, 1, 8, 5, 8]
                const arr3 = [18, 11, 18, 5, 28]
                console.log(setYAxisMaxVal([arr1, arr2, arr3])) // 30
    

    或者是这样

                const arr1 = [1, 2, 3, 5, 8]
                const arr2 = [11, 1, 8, 5, 8]
                const arr3 = [18, 11, 18, 5, 28]
                const arr4 = [18, 11, 18, 5, 28, [88, 102]]
                console.log(setYAxisMaxVal([arr1, arr2, arr3, arr4])) // 110
    

    普通的js环境

                const setYAxisMaxVal = (arrayF) => {
                    const flatten = (arr) => {
                        while (arr.some((item) => Array.isArray(item))) {
                            arr = [].concat(...arr);
                        }
                        return arr;
                    };
                    const returnMaxValue = (array, referMax) => {
                        try {
                            if (Math.max(...array.flat(Infinity)) > referMax) {
                                referMax = (referMax - (Math.max(...array.flat(Infinity)) % referMax)) + Math.max(...array.flat(Infinity));
                            }
                            return referMax;
                        } catch (error) {
                            if (Math.max(...flatten(array)) > referMax) {
                                referMax = (referMax - (Math.max(...flatten(array)) % referMax)) + Math.max(...flatten(array));
                            }
                            return referMax;
                        }
                    };
                    let maxValue = 10;
                    maxValue = returnMaxValue(arrayF, maxValue);
                    return maxValue;
                };
    

    使用方法同上

    相关文章

      网友评论

          本文标题:Echarts动态设置y轴的最大值,只要一个方法

          本文链接:https://www.haomeiwen.com/subject/jefdshtx.html