<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const dom = document.getElementById("container")
var chart = echarts.init(dom)
const data = []
const option = {
// https://echarts.apache.org/zh/option.html#title
title: {
text: "动态数据 + 时间坐标轴（Dynamic Data & Time Axis）",
link: "https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2"
},
// https://echarts.apache.org/zh/option.html#tooltip
tooltip: {
show: true,
trigger: "axis", // https://echarts.apache.org/zh/option.html#tooltip.trigger
formatter: function(params) { // https://echarts.apache.org/zh/option.html#tooltip.formatter
// console.log(params)
param = params[0]
const date = new Date(param.value[0])
const formatedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}`
return `<div>时间：${formatedDate}</div>` + `<div>数据：${param.value[1]}</div>`
},
axisPointer: { // https://echarts.apache.org/zh/option.html#tooltip.axisPointer
animation: false
}
},
// https://echarts.apache.org/zh/option.html#xAxis
xAxis: {
type: "time", // https://echarts.apache.org/zh/option.html#xAxis.type
splitLine: { // https://echarts.apache.org/zh/option.html#xAxis.splitLine
show: false
}
},
yAxis: {
type: "value",
// boundaryGap: [ "20%", "100%" ],
boundaryGap: [ 0, "100%" ],
splitLine: {
show: false
}
},
series: [{
type: "line", // https://echarts.apache.org/zh/option.html#series-line.type
name: "", // https://echarts.apache.org/zh/option.html#series-line.name
showSymbol: false, // https://echarts.apache.org/zh/option.html#series-line.showSymbol
data: data
}]
}
let value = 10
function randomData() {
const now = new Date()
value = value + Math.random() * 21 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
const obj = {
name: now.toString(),
value: [
now, Math.round(value)
]
}
return obj
}
// 每一秒添加一个数据
window.setInterval(function() {
const obj = randomData()
// console.log(obj)
if(60 < data.length) {
data.shift()
}
data.push(obj)
chart.setOption({
series: [{
data: data
}]
});
}, 1000);
if (option && typeof option === "object") {
chart.setOption(option)
}
</script>
</body>
</html>