<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
