js 每5s刷新折线图展示

最新推荐文章于 2021-12-25 18:36:34 发布

52o。

最新推荐文章于 2021-12-25 18:36:34 发布

阅读量935

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_43633797/article/details/101535536

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js 每5s刷新折线图展示

[注]：确保你解决了前后端跨域问题

<!DOCTYPE html>
<html>
<head>
    <title>用于展示图例，隔一段时间刷新一次数据</title>
</head>

<body>
    <div>
    <!-- 各种图的展示 -->
    <br>
        <div id="main" style="height: 500px; width: 100%"></div>
        <div id="second" style="height: 500px; width: 100%"></div>
    </div>
</body>
    <script src="/static/js/echarts-2.2.7/build/dist/echarts.js"></script>
    <script type="text/javascript">

        window.xx_test = {};

        var myChart;
        // 路径配置
        require.config({
            paths: {
                echarts: '/../../echarts-2.2.7/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                myChart = ec.init(document.getElementById('main'));

                modify_xx_test();
                var option = {
                    title: {
                        text: '慢日志走势图',
                        subtext: '测试专用',
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAxis: {
                        type: 'category',
                        data: getData(),
                        boundaryGap: true,
                        axisLabel: {
                            interval: 9,
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: xx_test.ylabel,
                        type: 'line',
                        smooth: true
                    }]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );

        function modify_xx_test() {
            $.ajax({
            	// 你的接口
                url: '',
                type: 'POST',
                async: false,
                success: function (datas) {
                    datas = JSON.parse(datas);
                    xx_test = datas;
                }
            })
        }

        function getData() {
            return xx_test.xlabel;
        }


        {#定时器执行#}
        window.setInterval(function () {
            if (!myChart) {
                return;
            } else {
                modify_xx_test();
                option = myChart.getOption();
                option.series[0].data = xx_test.ylabel;
                option.xAxis[0].data = xx_test.xlabel;
                console.log(option.xAxis[0].data);
                myChart.setOption(option);
                window.onresize = myChart.resize;
            }
		// 5000表示每隔5s时间刷新下数据
        }, 5000)


    </script>

</html>