echarts 曲线
新版 直接加载js 数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" name="btn" value="展示" id="btnId" onclick="check()"/>
<div id="container" style="height: 500px"></div>
<div></div>
<div id="container2" style="height: 500px"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script type='text/javascript' src='dataDays.js'></script>
<script>
document.getElementById("btnId").addEventListener("click", check);
function avg(array) {
let sum = 0;
for (let i = 0; i < array.length; i++) {
sum += parseInt(array[i], 10);
}
return (sum / array.length).toFixed(2)
}
function check() {
const xRet = []; // 多少个时间段
const xRet2 = []; // 多少个时间段
const yRet = []; // 数组，每个数组对应一天的Value值
const yRet2 = []; // 数组，每个数组对应一天的Value值
const selectInfo = {};
const selectInfo2 = {};
let nSocket = all["info"]["NSocket"];
let days = all["info"]["days"];
let xlen = 24 * 60 / all["info"]["timeMinutes"];
for (let j = 1; j <= xlen; ++j) { // x 轴
xRet.push(j);
}
let idx = 0
for (let day = 0; day <= days; day++) {
for (const el in all["data"][day] ){
// console.log("=====",all["data"][day][el])
selectInfo[idx + 1] = Object.keys(selectInfo).length === 0;
yRet.push({
name: idx + 1, // index就是20个slot
type: 'bar', // bar 柱状图 line 折线图
// stack: 'Total', // 后一个在前一个堆叠
data: all["data"][day][el], // 数组
});
idx ++
}
}
for (let i = 1; i <= days; ++i) {
xRet2.push(i);
}
for (let socketIdx = 0; socketIdx < nSocket; socketIdx++) {
let averageTmp = []
for (let day = 0; day < days; day++) {
let v = avg(all["data"][day][socketIdx])
averageTmp.push(v)
}
yRet2.push({
name: socketIdx + 1, // index就是20个slot
type: 'bar', // bar 柱状图 line 折线图
// stack: 'Total', // 后一个在前一个堆叠
data: averageTmp, // 数组
});
}
console.log(xRet)
// console.log("----",yRet)
const dom = document.getElementById('container');
const myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const option = {
title: {
text: 'socket当日曲线图'
},
tooltip: {
show: true,
trigger: 'axis'
},
dataZoom: { // 放大和缩放
type: 'inside'
},
xAxis: {
name: "时间段",
type: 'category',
axisLabel: {
// showMinLabel: true,
// show: true,
},
data: xRet
},
legend: { // 显示图例组件
bottom: '0',
z: 100,
selected: selectInfo // 默认启动只显示一条线
},
yAxis: {
name: "间隔",
type: 'value'
},
series: yRet
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
// -------------------------------------------------------
const dom2 = document.getElementById('container2');
const myChart2 = echarts.init(dom2, null, {
renderer: 'canvas',
useDirtyRect: false
});
const option2 = {
title: {
text: '每日平均值 曲线图'
},
tooltip: {
show: true,
trigger: 'axis'
},
dataZoom: { // 放大和缩放
type: 'inside'
},
xAxis: {
name: "时间段",
type: 'category',
axisLabel: {
// showMinLabel: true,
// show: true,
},
data: xRet2
},
legend: { // 显示图例组件
bottom: '0',
z: 100,
selected: selectInfo2 // 默认启动只显示一条线
},
yAxis: {
name: "间隔",
type: 'value'
},
series: yRet2
};
if (option2 && typeof option2 === 'object') {
myChart2.setOption(option2);
}
window.addEventListener('resize', myChart.resize);
window.addEventListener('resize', myChart2.resize);
}
</script>
</body>
</html>