echarts处理y轴最大小值根据数据动态处理、分割数和是否从0开始

方法

/*** 取整* @param value 输入值* @param scale 保留位数 正数是整数位，负数是小数位* @param isUpper true 向上取整  false向下取整* @returns*/
const numberFix = (value, scale, isUpper) => {const moreThanZero = value >= 0value = Math.abs(value)if (scale == 0) {return value}if (scale > 0) {scale -= 1}let resultif (moreThanZero) {result =numberFloorOrCeil(value / Math.pow(10, scale), isUpper) *Math.pow(10, scale)} else {result =-1 *numberFloorOrCeil(value / Math.pow(10, scale), !isUpper) *Math.pow(10, scale)}if (scale < 0) {result =numberFloorOrCeil(result * Math.pow(10, -1 * scale), isUpper) /Math.pow(10, -1 * scale)}return result}const numberFloorOrCeil = (value, isUpper) => {if (isUpper) {return Math.ceil(value)} else {return Math.floor(value)}}/*** 得到数字的尺寸* 0=>1* 5=>1* 10=>2* 123=>3* 0.5=>-1* 0.003=>-3* @param value* @returns {number}*/const getNumberMaxScale = value => {const moreThanZero = value >= 0let absValue = Math.abs(value)if (absValue >= 1) {const valueStr = absValue + ''return valueStr.split('.')[0].length} else if (absValue > 0) {let scale = 0while (absValue < 1) {absValue *= 10scale -= 1}return scale} else {// 为0return 1}}/**** @param valueArr 对象数组* @param splitNum 分割线数量* @param fromZero 是否从0开始* @param splitSmallerScale 分割数取整减少位数* @param splitMinScale 1是个位 2是10位，-1表示0.1级别，-2表示0.01级别，-3表示0.001级别; null就是不启用这个功能* @returns {{min: number, max: number, interval: number}}*/const echartsSplit = (valueArr,splitNum = 5,fromZero = true,splitSmallerScale = 0,splitMinScale = null) => {valueArr = [...valueArr]if (fromZero) {valueArr.push(0)}let maxValue = Math.max(...valueArr)let minValue = Math.min(...valueArr)const maxMoreThanZero = maxValue >= 0const minMoreThanZero = minValue >= 0let totalDiff = maxValue - minValuelet totalDiffScale = getNumberMaxScale(totalDiff / splitNum)let splitScale = totalDiffScale - splitSmallerScaleif (splitMinScale != null && splitScale < splitMinScale) {splitScale = splitMinScale}splitScale = splitScale == 0 ? -1 : splitScalelet minResult = numberFix(minValue, splitScale, false)let splitValue = (maxValue - minResult) / splitNumlet splitResult = numberFix(splitValue, splitScale, true)// 如果所有数据值都一样的特殊情况处理if (splitResult == 0) {// 如果所有数据都一样且都为0，则最小值为0minResult = minResult == 0 ? 0 : minResult - 1splitResult = 1}let maxResult = minResult + splitResult * splitNumreturn {min: Math.round(minResult * 100000000) / 100000000,max: Math.round(maxResult * 100000000) / 100000000,interval: Math.round(splitResult * 100000000) / 100000000}}export default echartsSplit

使用

import echartsSplit from '@/utils/echartsSplit'setOptions(list) {const wData = []const qData = []const drpData = []series.forEach((item) => {if (item.name.indexOf('流量') > -1) {qData.push(...item.data.filter((value) => value))} else if (item.name.indexOf('水位') > -1) {wData.push(...item.data.filter((value) => value))} else {drpData.push(...item.data.filter((value) => value))}})this.options.yAxis = yAxis.map((item, index) => {const data = index === 0 ? drpData : index === 1 ? wData : qDataconst obj = echartsSplit(data, 5, false)return {...item,min: obj.min,max: obj.max,interval: obj.interval}})this.options = { ...this.options }
}

效果