timearray=[1672209600, 1672209660] Timestamp array, here is an example of data to supplement by yourself
data1= [8957120, 8964520] here is an example of data to supplement by yourself
data2= [8957120, 8964520] Here is an example of data to supplement by yourself
If other graphs are needed, the yAxis control displays two y-axis displays, and the legend and series correspondingly increase the graph data
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } } }, legend: { data:["machine flow", "CPU temperature" ] }, toolbox: { show: true, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } },
xAxis: [
{
type: 'category',
boundaryGap: true,
data: timearray,
axisLabel: {
formatter: function (value) {
return new Date(value*1000).format("HH:mm")
}
}
}
],
yAxis : [
{
type: 'value',
scale: true,
name: "",
min: 0,
boundaryGap: [0.2, 0.2],
axisLabel: {
formatter: function (value) {
let showValue1 = ""
showValue1 = unit_converter(value, "B", 2)
return showValue1
}
}
},
{
type: 'value',
scale: true,
name: "",
min: 0,
boundaryGap: [0.2, 0.2],
axisLabel: {
show: unit1==unit2?false:true,
formatter: function (value) {
let showValue2 = ""
showValue2 = unit_converter(value, "B", 2)
return showValue2
}
},
splitLine:{
show:false
}
}
]
series = [{
name:"整机流量",
type:"line",
symbol: "none",
smooth: true,
smoothMonotone:'x',
lineStyle: { width: 0 },
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgb(128, 255, 165)' },
{ offset: 1, color: 'rgb(1, 191, 236)' }
])
},
yAxisIndex: 0,
data:data1,
barGap:'0%'
},
{
name: "CPU温度",
type:"bar",
symbol: "none",
yAxisIndex: 1,
data:data2,
barGap:'0%'
}]
};