js对象数据处理成Echarts可直接显示的数据
Posted 尔嵘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js对象数据处理成Echarts可直接显示的数据相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let dataForm =
"2022-06-02":
"2022-06-02 15:01:08": 99,
"2022-06-02 17:41:08": 99,
"2022-06-02 18:11:08": 99,
"2022-06-02 08:11:08": 99,
"2022-06-02 14:31:08": 99,
"2022-06-02 11:11:08": 99,
"2022-06-02 08:21:08": 99,
"2022-06-02 10:51:08": 99,
"2022-06-02 18:21:08": 99,
"2022-06-02 07:41:08": 99,
"2022-06-02 15:11:08": 99,
"2022-06-02 05:11:08": 99,
"2022-06-02 12:01:08": 99,
"2022-06-02 07:31:08": 99,
"2022-06-02 17:31:08": 99,
"2022-06-02 14:21:08": 99,
"2022-06-02 08:01:08": 99,
"2022-06-02 18:01:08": 99,
"2022-06-02 10:41:08": 99,
"2022-06-02 11:21:08": 99,
"2022-06-02 05:01:08": 99,
"2022-06-02 13:51:08": 99,
"2022-06-02 11:41:08": 99,
"2022-06-02 12:11:08": 99,
"2022-06-02 06:51:08": 99,
"2022-06-02 14:51:08": 99,
"2022-06-02 18:41:08": 99,
"2022-06-02 16:01:08": 99,
"2022-06-02 12:21:08": 99,
"2022-06-02 11:51:08": 99,
"2022-06-02 07:21:08": 99,
"2022-06-02 19:11:08": 99,
"2022-06-02 15:31:08": 99,
"2022-06-02 11:31:08": 99,
"2022-06-02 09:51:08": 99,
"2022-06-02 06:31:08": 99,
"2022-06-02 14:41:08": 99,
"2022-06-02 06:41:08": 99,
"2022-06-02 18:31:08": 99,
"2022-06-02 09:41:08": 99,
"2022-06-02 17:51:08": 99,
"2022-06-02 15:21:08": 99,
"2022-06-02 07:11:08": 99,
"2022-06-02 19:01:08": 99,
"2022-06-02 05:51:08": 99,
"2022-06-02 15:51:08": 99,
"2022-06-02 13:11:08": 99,
"2022-06-02 12:41:08": 99,
"2022-06-02 06:21:08": 99,
"2022-06-02 16:21:08": 99,
"2022-06-02 07:01:08": 99,
"2022-06-02 09:31:08": 99,
"2022-06-02 13:01:08": 99,
"2022-06-02 19:31:08": 99,
"2022-06-02 17:01:08": 99,
"2022-06-02 06:11:08": 99,
"2022-06-02 19:21:08": 99,
"2022-06-02 08:51:08": 99,
"2022-06-02 18:51:08": 99,
"2022-06-02 16:11:08": 99,
"2022-06-02 12:31:08": 99,
"2022-06-02 15:41:08": 99,
"2022-06-02 09:21:08": 99,
"2022-06-02 10:01:08": 99,
"2022-06-02 05:41:08": 99,
"2022-06-02 10:21:08": 99,
"2022-06-02 09:11:08": 99,
"2022-06-02 08:41:08": 99,
"2022-06-02 06:01:08": 99,
"2022-06-02 14:11:08": 99,
"2022-06-02 16:51:08": 99,
"2022-06-02 19:51:08": 99,
"2022-06-02 17:21:08": 99,
"2022-06-02 10:11:08": 99,
"2022-06-02 05:31:08": 99,
"2022-06-02 13:41:08": 99,
"2022-06-02 13:21:08": 99,
"2022-06-02 10:31:08": 99,
"2022-06-02 08:31:08": 99,
"2022-06-02 16:31:08": 99,
"2022-06-02 11:01:08": 99,
"2022-06-02 12:51:08": 99,
"2022-06-02 05:21:08": 99,
"2022-06-02 16:41:08": 99,
"2022-06-02 14:01:08": 99,
"2022-06-02 07:51:08": 99,
"2022-06-02 19:41:08": 99,
"2022-06-02 13:31:08": 99,
"2022-06-02 09:01:08": 99,
"2022-06-02 17:11:08": 99,
"2022-06-02 23:51:08": 99
,
"2022-06-03":
"2022-06-03 01:01:08": 99,
"2022-06-03 02:41:08": 99,
// "2022-06-03 17:41:08": 99,
// "2022-06-03 18:11:08": 99,
// "2022-06-03 08:11:08": 99,
// "2022-06-03 14:31:08": 99,
// "2022-06-03 11:11:08": 99,
// "2022-06-03 08:21:08": 99,
// "2022-06-03 10:51:08": 99,
// "2022-06-03 18:21:08": 99,
// "2022-06-03 07:41:08": 99,
// "2022-06-03 15:11:08": 99,
// "2022-06-03 05:11:08": 99,
// "2022-06-03 12:01:08": 99,
// "2022-06-03 07:31:08": 99,
// "2022-06-03 17:31:08": 99
"2022-06-03 22:41:08": 99,
; //原格式
//目标格式如下：
// let chartDataX, = ["15:01:08","17:41:08", '18:11:08', '11:11:08', '08:21:08',...];//提取出所以的时间，不重复，重新排序
// let seriesData1 = [99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, ...]; //提取出上面对象下面的"2022-06-02"的元素的数据;要和时间数组的顺序一直
// let seriedData2 = [99, 99, 99, 99, 99, ...];//同理，是data对象下的"2022-06-03"的数据，时间数组上面的数据如果是不存在，就给0，存在就是该数据
let chartDataX = [],
seriesData1 = [];
for (let key in dataForm)
if (dataForm[key])
for (const dataKey in dataForm[key])
if (!chartDataX.includes(dataKey))
chartDataX.push(dataKey.substr(11));
chartDataX = Array.from(new Set(chartDataX)).sort();
console.log("曲线x轴的数据：", chartDataX)
if (chartDataX.length > 0)
for (const key in dataForm)
let seriesItem =
name: key,
type: 'line',
data: (function()
let storeSeriesData = [];
chartDataX.forEach((item) =>
if (dataForm[key][key + ' ' + item])
storeSeriesData.push(dataForm[key][key + ' ' + item]);
else
storeSeriesData.push(null);
);
return storeSeriesData;
)(),
;
seriesData1.push(seriesItem);
console.log(seriesData1)
</script>
</html>
javascript对象数据里面套对象，目标数据是需要遍历两层对象重组成可使用数组数据，通过数组去重、排序、数据对比取值等操作来实现数据的真正可直接用于echarts直接显示。
注意：chartDataX = Array.from(new Set(chartDataX)).sort(); 是为了数组去重且排序一下；
以上是关于js对象数据处理成Echarts可直接显示的数据的主要内容，如果未能解决你的问题，请参考以下文章