echarts.js - 动态数据 + 时间坐标轴

echarts.js - 动态数据 + 时间坐标轴_第1张图片

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 = {
                // 标题
                title: { // https://echarts.apache.org/zh/option.html#title
                    text: "动态数据 + 时间坐标轴(Dynamic Data & Time Axis)",
                    link: "https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2",
                    left: 'center' // https://echarts.apache.org/zh/option.html#title.left
                },
                xAxis: { // https://echarts.apache.org/zh/option.html#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",
                    splitLine: {
                        show: true
                    }
                },
                // 提示框
                tooltip: { // https://echarts.apache.org/zh/option.html#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 `
时间:${formatedDate}
`
+ `
数据:${param.value[1]}
`
}, axisPointer: { // https://echarts.apache.org/zh/option.html#tooltip.axisPointer animation: false } }, // 工具栏 toolbox: { // https://echarts.apache.org/zh/option.html#toolbox feature: { // https://echarts.apache.org/zh/option.html#toolbox.feature saveAsImage: {} } }, 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 // areaStyle: {}, // https://echarts.apache.org/zh/option.html#series-line.areaStyle 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>

你可能感兴趣的:(HTML,&,CSS,&,JavaScript,echarts,javascript,html)