echarts demo

Monkey Wen

于 2020-02-18 08:24:04 发布

阅读量140

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/nujiwala/article/details/104369029

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        .chart{
            width: 500px;
            height:200px;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<!--<div id="container" style="height: 500px; width: 100%" ></div>-->
<div id = "pchart"></div>
<a href="./page/addapi.html" target="_blank">添加api</a>
<script type="text/javascript" src="js/echarts/echarts.js"></script>
</body>
<script type="text/javascript">
    <!--页面刷新的时候执行 -->
    $(document).ready(function(){
        var dataResult = [];
        buildChart();
    });

    function buildChart(){
        $.ajax({
            type:"POST",
            url : "/list",
            contentType: "application/json", //必须这样写
            dataType:"json",
            success:function(json){


                $("#pchart").empty();
                var chart = "";
                for(var i = 0; i < json.result.length;i++){


                    const promise = (i)=>{
                       return new Promise((resolve,reject) => {
                           chart += "<p id='chart"+i+"' class='chart'></p>";
                           resolve(i);
                        })
                    }
                    promise(i).then((i)=>{
                        buildChartJS(i,json.result[i].url,json.result[i].method,json.result[i].params);
                    })
                    // chart += "<p id='chart"+i+"' class='chart'></p>";
                    // buildChartJS(i);


                }
                $("#pchart").append(chart);


            }
        })
    }
    function buildChartJS(i,url,method,params){


        var Chart=echarts.init(document.getElementById('chart'+i));//初始化
        //用户等待
        Chart.showLoading(
            {text: 'Loding...'  }
        );
        //自定义变量
        // var ids = 1;
        getData(Chart,url,method,params); //先执行一次，以防等十秒后才出现图表
        // setInterval(function(){//定时器
        //     getData(Chart, ids);
        // }, 10*1000);//每隔10秒刷新一次
    }
    //获取数据的方法
    function getData(Chart,url,method,params){
    console.log(url,66666333333333)
        var option = {
            title: {
                text: '心跳检测'
            },

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['hello']
            },
            dataZoom:[{
                startValue:new Date()},{
                type: 'inside',
                show: true,
                filterMode: "filter"
            }],
            xAxis: {
                type: 'time',
                data:[],
                offset: 0, //偏移量 多个y轴的时候用
                position: "bottom", //x轴位置
                name: "时间",
                nameLocation: "end",
                nameGap: 15,
                nameRotate: null,
                min: null,//坐标刻度的最小值
                max: null,//坐标刻度的最大值
                minInterval: 2
            },

            yAxis: {
                show: true, //是否显示y轴
                position: "left",//设置y轴的位置
                type: 'value',
            },
            series : [{
                name:"hello",
                type:'line',
                data:[]
            }]
        };
        Chart.hideLoading();
        Chart.setOption(option);
        //发送Ajax请求
        // "result":[{"id":1,"url":"http://127.0.0.1:8080/say_hello","method":0,"params":"{}"},{"id":2,"url":"http://127.0.0.1:8080/say_hi","method":1,"params":null}],"pager":null,"timestamp":1581947814184}
        this.setInterval(function () {
            // dataResult

            $.ajax({
                type:"POST",
                url : "/heart-beat",
                contentType: "application/json", //必须这样写
                dataType:"json",
                data:JSON.stringify({}),
                // data:{},
                success:function(json){//
                    console.log("获取图表数据");
                    console.log(json);
                    var data0 = option.series[0].data;
                    var x = [new Date(), json.result];
                    data0.push({ name: x[0], value: x})
                    //结束
                    // Chart.hideLoading();
                    Chart.setOption({ series: option.series });

                },
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Content-Type", "application/json");
                    xhr.setRequestHeader("method", method);
                    xhr.setRequestHeader("url", url);
                }
            })
        }, 1000)
    }
</script>
</html>

Monkey Wen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts demo

<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> &l...
复制链接

扫一扫