echart遇到个问题，折线图希望 今日--昨日--前日 这个显示顺序，当前的顺序是从接口查询出来的，时间倒序，这时候我们应该先对集合进行时间正序排列，再对列进行排序。
async OPCNumberQuery() {
let res = await monitorService.getQuery(this.param, 'm009')
// 通过 loadsh 里的 sortBy(list:当前集合,'排序属性值') 进行升序
let resTimeBy = sortBy(res, 'time')
console.log(resTimeBy)
this.OPCNumberXAxis = res.length > 0 ? this.setEchartData(resTimeBy, 'time').xAxis : []
this.OPCNumberData = res.length > 0 ? this.setEchartData(resTimeBy, 'time').yAxis : []
},
如果所示，time 升序排序
注：对象里是无序的，不能进行排序，集合可以排序。
这里想按集合里对象 key 值排序，但因为对象的无序特殊性，我们可以先将对象的所有 key 值放到集合中去进行排序，然后将排好序的 key 和原集合对应的值重新创建一个新集合。
getObjectKeyBy(list) {
let arr = []
for (let i = 0; i < list.length; i++) {
let obj = {}
// 当前对象的所有key值集合，先进行排序，再重新赋值
Object.keys(list[i]).sort() .forEach((el) => {
obj[el] = list[i][el]
})
arr.push(obj)
}
return arr
},
转换代码如下：可以看到页面列也进行了排序。
async OPCNumberQuery() {
let res = await monitorService.getQuery(this.param, 'm009')
let resTimeBy = this.getObjectKeyBy(sortBy(res, 'time'))
console.log(resTimeBy)
this.OPCNumberXAxis = res.length > 0 ? this.setEchartData(resTimeBy, 'time').xAxis : []
this.OPCNumberData = res.length > 0 ? this.setEchartData(resTimeBy, 'time').yAxis : []
},
但是有种特殊情况，就是数字和字符串一起用 .sort() 排序，不能准确的进行排序，是因为它是采用 unicode 编码导致的。
但是这几列除了 every_minute 其他列包含了类型不统一（数字和字符串类型），不能正确排序，这时候需要统一转换成数字类型
async settlementRTPQuery() {
let res = await monitorService.getQuery(this.param, 'm005')
let resTimeBy = this.getObjectKeyBy(sortBy(res, 'every_minute'))
console.log(resTimeBy)
this.settlementRTPXAxis = res.length > 0 ? this.setEchartData(resTimeBy, 'every_minute', { smooth: true }).xAxis : []
this.settlementRTPData = res.length > 0 ? this.setEchartData(resTimeBy, 'every_minute', { smooth: true }).yAxis : []
},
解决 .sort() 排序问题方案：
let arr=[2,6,3,4,11,1];
arr.sort()
console.log(arr) // [1, 11, 2, 3, 4, 6]
arr.sort(function (a,b) {
return a-b;
});
console.log(arr) // [1, 2, 3, 4, 6, 11]
// 数值类型排序
getByWarn(list) {
return list.sort(function (a, b) {
return a - b
})
},
// 数字类型排序
getObjectKeyNumBy(lists, xName) {
let arr = []
for (let i = 0; i < lists.length; i++) {
let obj = {}
// 正常打印 keys 集合 顺序不对是 unicode 编码导致的，用 getByWarn() 函数去解决这个问题
console.log(Object.keys(lists[i]).sort()) // ['10_30', '30', '3_5', '5_10', 'every_minute']
this.getByWarn(Object.keys(lists[i]).sort()).forEach((el, index) => {
obj[el] = lists[i][el]
})
arr.push(obj)
}
return arr
},
// 获取接口数据
async settlementRTPQuery() {
let res = await monitorService.getQuery(this.param, 'm005')
let resTimeBy = this.getObjectKeyNumBy(sortBy(res, 'every_minute'))
console.log(resTimeBy)
this.settlementRTPXAxis = res.length > 0 ? this.setEchartData(resTimeBy, 'every_minute', { smooth: true }).xAxis : []
this.settlementRTPData = res.length > 0 ? this.setEchartData(resTimeBy, 'every_minute', { smooth: true }).yAxis : []
},
但是发现调用 getByWarn() 这个函数还是没有效果，是因为这个方法是数值类型比较，我们这里key 包含特殊字符，不是数值类型，但是我们可以转换成数值类型，方便进行去比较，这里转换成 “.”
// 将对比的数值带 “_” 统一转换成 “.” 进行对比，修改方法如下
getByWarn(list) {
return list.sort(function (a, b) {
a = a.indexOf('_') < 0 ? a + '.' : a.replace('_', '.')
b = b.indexOf('_') < 0 ? b + '.' : b.replace('_', '.')
return a - b
})
},
console.log(this.getByWarn(Object.keys(lists[i]).sort())) // ['3_5', '5_10', '10_30', '30', 'every_minute']
出现了 keys 集合排列是对的，但是集合循环赋值生成新集合时顺序还是有误，循环赋值的时候，“30” 这个还是算作数值类型，排在所有字符串类型的key 值前面。
解决方案：因为循环生成的对象里排序是乱序，只能强制在key 前加循环序号，可以看出列是按正确序号排序的，拼接序号后添加一个不常用字符串，然后最终显示时，方便后续截掉，这里是 ”=“。
// 入参 lists: 集合；xName：不需要排序的列属性名，修改方法如下
getObjectKeyNumBy(lists, xName) {
let arr = []
for (let i = 0; i < lists.length; i++) {
let obj = {}
this.getByWarn(Object.keys(lists[i]).sort()).forEach((el, index) => {
if (el != xName) {
// 数字类型排序，不确定前面加序号
obj[index + '=' + el] = lists[i][el]
} else {
obj[el] = lists[i][el]
}
})
arr.push(obj)
}
return arr
},
完整代码：
// echarts x轴名字转换
getName(name) {
let label = ''
switch (name.indexOf('=') >= 0) {
case true:
label = name.substring(2, name.length).replace('_', '-') + '秒'
break
default:
label = name
}
return label
},
// 数据转换成echarts y轴数据，list:集合；xName：x轴名称；param：线性echarts其他属性
setEchartData(lists, xName, param) {
let yAxis = []
let xAxis = []
Object.keys(lists[0]).forEach((el) => {
if (el != xName) {
let obj = {
name: this.getName(el),
name_old: el,
type: 'line',
data: [],
}
yAxis.push({ ...obj, ...param })
}
})
lists.forEach((el) => {
// x轴数据
xAxis.push(el[xName])
for (let k in el) {
yAxis.forEach((ke) => {
if (k == ke.name_old) {
ke.data.push(el[k])
}
})
}
})
return { xAxis: xAxis, yAxis: yAxis }
},
// [3_5,10_30,30] 进行比较排序
getByWarn(list) {
return list.sort(function (a, b) {
a = a.indexOf('_') < 0 ? a + '.' : a.replace('_', '.')
b = b.indexOf('_') < 0 ? b + '.' : b.replace('_', '.')
return a - b
})
},
// 数字类型排序
getObjectKeyNumBy(lists, xName) {
let arr = []
for (let i = 0; i < lists.length; i++) {
let obj = {}
this.getByWarn(Object.keys(lists[i]).sort()).forEach((el, index) => {
if (el != xName) {
// 数字类型排序，不确定前面加序号
obj[index + '=' + el] = lists[i][el]
} else {
obj[el] = lists[i][el]
}
})
arr.push(obj)
}
return arr
},
async settlementRTPQuery() {
try {
let res = await monitorService.getQuery(this.param, 'm005')
let resTimeBy = this.getObjectKeyNumBy(sortBy(res, 'every_minute'), 'every_minute')
this.settlementRTPXAxis = res.length > 0 ? this.setEchartData(resTimeBy, 'every_minute', { smooth: true }).xAxis : []
this.settlementRTPData = res.length > 0 ? this.setEchartData(resTimeBy, 'every_minute', { smooth: true }).yAxis : []
} catch (e) {}
},
