使用websocket将客户端服务器数据进行交互，并在echarts折现图动态显示（一）

最新推荐文章于 2023-09-05 10:03:19 发布

宇宙无敌帅超人

最新推荐文章于 2023-09-05 10:03:19 发布

阅读量9.1k

点赞数 2

分类专栏： AUTO_SHIP 文章标签： echarts 折线图动态显示

本文链接：https://blog.csdn.net/weixin_40896352/article/details/79221751

版权

AUTO_SHIP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>echarts最终版</title>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <button οnclick="addData()">点我加载数据更新</button>
    <div id="test"></div>
</body>
<script type="text/javascript">
    //var date = new Date();
    //document.writeln( date.toLocaleTimeString() );
    //document.writeln( date.getSeconds() );
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    var options = {
            //定义一个标题
            title:{
                text:'PH值'
            },
            legend:{
                data:['时间']
            },
            //X轴设置
            xAxis:{
                name :'时间',
                data: (function (){
                        var res = [];
                        var len = 10;
                        while (len--) {
                            var now = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
                            res.push(now);
                        }
                        return res;
                    })()
            },
            //y轴不设置意味着y轴的数值随传进来参数最值自动给出波动范围
            yAxis:{

            },
            //name=legend.data的时候才能显示图例
            series:[{
                name:'时间',
                type:'line',
                data:(function(){
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.push(Math.round(Math.random() * 100));
                        }
                      return res;
                    })()
            }]

        };
    myChart.setOption(options,true);

    //这里有两个点要重点注意下
    //1.在addData函数内需要先使用myChart.getOption()来获取已生成折线图的配置参数信息
    //2.在对原data数组进行数据的增减时，需要在series和xAxis后加上序列下标
    function addData() {
        //myChart.setOption(options,true);
        //myChart.clear(); 
        var myChart = echarts.init(document.getElementById('main'));
        var option = myChart.getOption();
        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
        option.series[0].data.shift();                 
        option.series[0].data.push(Math.random()*100);
        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        myChart.setOption(option);
        myChart.hideLoading();
        }
            
</script>
</html>

知识点积累：

1.js的Data函数与Math函数的用法

2.对echarts中数据更新的解决办法（包括以函数形式返回数组传入data，以及通过option.series方法对原图表数据进行更改）

注意事项：

1.echarts开发中经常遇到更改参数导致图表显示不出，其原因多数是因为更改了原先的数据格式导致的

2.最后在函数中对options中的数据进行更替时，需要先用getOption方法得到原先图表的option数据，再对其进行操作

3.最后在函数中对options中的数据进行更替时，不要遗漏了series后的数组下标