js判断一个数所在的区间
使用场景：在图表上使用警戒线时，后端返回来的x轴数据，与警戒线值不一致，即警戒线与x轴的值一致，才会在x轴上显示一条竖线。这里后端返回来的警戒线值是数值不是区间，所以要自己去找值所在在的区间。
上代码：
data:{
return {
chart0: {
title: {
text: '',
textStyle: {
fontSize: 12,
fontWeight: '500',
color: '#000000',
fonfontFamily: 'Microsoft YaHei',
},
backgroundColor: 'transparent',
show: true,
top: '10',
left: 'center',
},
grid: {
bottom: 20,
},
lengend: {
show: true,
// icon: "pin",
itemWidth: 10, // 图例标记的图形宽度。
itemHeight: 10, // 图例标记的图形高度。
top: '92%',
data: [
],
},
data: [
{
name: '误差统计与分布',
type: 'line',
data: [],
smooth: true, // true 为平滑曲线，false为直线
symbolSize: 0, // 圆圈宽度
// color: '#36c1a8',
lineStyle: {
color: '#53efd7', // 设置线的颜色为红色
},
itemStyle: {
normal: {
color: '#4cedd4',
},
},
},
{
name: '分布区间',
// data: [],
type: 'line',
markLine: {
symbol: 'none',
data: [
{
xAxis: '',
},
],
label: {
position: 'end', // 将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
formatter: '', // 标线展示的内容，这里取的是后端返回的三个值，-3
},
lineStyle: {
color: '#ff0000',
width: 2,
type: 'solid',
},
},
itemStyle: {
normal: {
color: '#ff0000',
},
},
lineStyle: {
color: '#ff0000', // 设置线的颜色为红色
},
},
{
name: '分布区间',
type: 'line',
markLine: {
symbol: 'none',
data: [{
xAxis: '0',
}],
label: {
position: 'end', // 将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
formatter: '0', // 标线展示的内容，这里取的是后端返回的三个值， 0
},
lineStyle: {
color: '#999999',
width: 2,
type: 'solid',
},
},
itemStyle: {
normal: {
color: '#999999',
},
},
lineStyle: {
color: '#999999', // 设置线的颜色为红色
},
},
{
name: '分布区间',
type: 'line',
markLine: {
symbol: 'none',
data: [
{
xAxis: '', //查出来的区间赋值到这，对应x轴数据
},
],
label: {
position: 'end', // 将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
formatter: '', // 标线展示的内容，这里取的是后端返回的三个值，1.5
},
lineStyle: {
color: '#ff0000',
width: 2,
type: 'solid',
},
},
itemStyle: {
normal: {
color: '#ff0000',
},
},
lineStyle: {
color: '#ff0000', // 设置线的颜色为红色
},
},
],
xAxis: {
data: [],
splitLine: {
show: false,
},
axisLabel: {
rotate: 90, // 旋转的角度从 -90 度到 90 度。
fontSize: '10px',
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#999999',
},
},
},
yAxis: {
type: 'value',
show: true,
name: '单位：万只',
splitLine: {
show: false,
},
axisLine: {
show: false,
},
},
tooltip: {
show: true,
trigger: 'axis',
},
},
}
}
methods:{
//调接口获取返回的值
async errorStatisticsDistribution(params) {
const params = {
batchNo: this.batchNo,
}
const res = await errorStatisticsDistribution(params)
if (res.data.code !== 200) return
const resData = res.data.data
this.chart0.data[0].data = resData[0].data
this.chart0.xAxis.data = resData[0].xAxis
this.obj = resData[0].obj
//这里警戒线返的值是 -3, 0, 1.5，需要找到这三个值的区间，回填到警戒线值上
const left = resData[0].section[0].xAxis // -3
const center = 0
const right = resData[0].section[2].xAxis //1.5
//这是返的数据 resData[0].xAxis =['-∞，-3','-3，-1.5','-1.5,1.5','1.5，+∞']
//调函数
this.findInterval(left, resData[0].xAxis, 1)
this.findInterval(center, resData[0].xAxis, 2)
this.findInterval(right, resData[0].xAxis, 3)
},
……
findInterval(value, intervals, flag) {
for (let i = 0; i < intervals.length; i++) {
const interval = intervals[i]
const bounds = interval.split(',')
const lowerBound = parseFloat(bounds[0])
const upperBound = parseFloat(bounds[1])
if ((value >= lowerBound || isNaN(value)) && (value < upperBound || isNaN(upperBound))) {
if (flag === 1) {
this.chart0.data[1].markLine.data[0].xAxis = interval //左边警戒线
this.chart0.data[1].markLine.label.formatter = value
}
else if (flag === 2) {
this.chart0.data[2].markLine.data[0].xAxis = interval //中间警戒线
}
else if (flag === 3) {
this.chart0.data[3].markLine.data[0].xAxis = interval //右边警戒线
this.chart0.data[3].markLine.label.formatter = value
}
return interval
}
}
return '未找到匹配的区间'
},
}
效果图：
