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

最新推荐文章于 2024-02-19 12:00:11 发布

好好活着，不要熬夜

最新推荐文章于 2024-02-19 12:00:11 发布

阅读量3.5k

点赞数 6

本文链接：https://blog.csdn.net/qq_29761395/article/details/120572338

版权

HTML & CSS & JavaScript 专栏收录该内容

66 篇文章 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 `<div>时间：${formatedDate}</div>` + `<div>数据：${param.value[1]}</div>`
                    },
                    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>

好好活着，不要熬夜

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
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> &.
复制链接

扫一扫