03-绘制折线图和动态心电图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <!--准备一个容器div，放置图表-->
    <!--Echarts会根据容器的大小来显示图标的大小-->
    <!--margin:0 auto  居中-->
    <div id="demo1" style="width: 600px;height: 400px; margin:0 auto"></div>

    <!--使用javascript绘制图表-->
    <script>
        //初始化绘制图标的echarts实例
        //参数是我们要绘制图标的位置
        var myChart = echarts.init(document.querySelector("#demo1"));//我们引入的echarts.min.js会帮我们创建一个echarts对象

        //初始化数据
        let data = []
        var now = new Date(2020,3,1);
        var oneDay = 24*3600*1000;//一天毫秒数
        var value = Math.random()*1000;
        for (var i = 0; i<20; i++){
            now = new Date(now.getTime() + oneDay);//每一次生成新的一天, now.getTime()是将时间转化为毫秒数
            value = value + Math.random()*21;
            data.push({
                name:now.toString(),//时间
                value:[//时间的值
                    [now.getFullYear(),now.getMonth(),now.getDate()].join('/'),//设置我们的x轴，用/进行拼接
                    Math.round(value),//设置我们的y轴，数值即随机出来的value的整数部分
                ]
            });
        }

        console.log(data)

        //指定图表的配置
        var option = {
            //配置图表的标题
            title:{
                text:"折线图-动态折线图"
            },
            //设置鼠标悬浮在图表折线时显示提示的内容：显示具体的数据
            tooltip:{
                //按照水平轴的标准来显示
                trigger:'axis',
                //设置显示的内容
                formatter:function (params) {
                    console.log(params)
                    value = params[0].data.value
                    x = value[0]
                    y = value[1]
                    // return '时间：${x} 股票价格：${y}'
                    return "时间:" + x + "--" + "股票价格:" + y
                },
                //设置坐标轴的指示器
                axisPointer:{
                    //鼠标悬浮时是否有动画
                    animation:false
                }
            },
            //配置x轴
            xAxis: {
                //类型的种类：分类（category），数值类型（value），对数类型（log），时间类型（time）
                type:"time",//设置时间类型
                splitLine:{//配置我们的网格
                    show:false  //设置网格线不显示
                },
                data:data[0].name
            },
            //配置y轴
            yAxis: {
                type: "value",//设置类型为数值型
                splitLine:{//配置我们的网格
                    show:false  //设置网格线不显示
                },
                //设置坐标轴两边留白
                boundaryGap:[0,'100%'], //不留白，设置为0，占比100%
            },
            //设置我们的数据
            series:[
                {
                    name:'股票数据',
                    type:"line",//类型为折线
                    data:data//设置我们的数据
                }
            ]
        }

        //给我们的myChart图标实例设置他的配置
        myChart.setOption(option);

        //让我们的数据动起来
        setInterval(()=>{
            now = new Date(now.getTime() + oneDay)
            value = value + Math.random() * 21
            //先删除一个数据
            data.shift()

            //再添加一个数据
            data.push({
                name:now.toString(),//时间
                value:[//时间的值
                    [now.getFullYear(),now.getMonth(),now.getDate()].join('/'),//设置我们的x轴，用/进行拼接
                    Math.round(value),//设置我们的y轴，数值即随机出来的value的整数部分
                ]
            });

            myChart.setOption({
                series: [{
                    data:data
                }]
            })
        },1000)//间隔1s
    </script>
</body>
</html>
posted @ 2021-11-06 17:14  不是孩子了  阅读(721)  评论(0)    收藏  举报