其他分享
首页 > 其他分享> > echarts.js - 动态数据 + 时间坐标轴

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

作者：互联网

在这里插入图片描述

<!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>

标签：zh,option,js,https,apache,org,动态数据,echarts
来源： https://blog.csdn.net/qq_29761395/article/details/120572338