使用websocket将客户端服务器数据进行交互，并在echarts折现图动态显示（一）原创-范文大全|优秀作文-实用文体写作网

代码如下:

<!DOCTYPE html><html><head>    <meta chart="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="tex新领导上任欢迎词t/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的时候才能显示图例            ries:[{                name:'时间',                type:'line',                data:(function(){                        var res = [];                        var len = 10;                        while (len--) {                            res.push铅笔(Math.round(Math.random() * 100));                        }                      return res;                    })()            }]        };    myChart.tOption(options,true);    //这里有两个点要重点注意下    //1.在addData函数内需要先使用myChart.getOption()来获取已生成折线图的配置参数信息    //2.在对原data数组进行数据的增减时，需要在ries和xAxis后加上序列下标    function addData() {        //myChart.tOption(options,true);        //myChart.clear();         var myChart = echarts.init(document.getElementById('main'));        var option = myChart.getOption();      高锰酸钾化学符号  axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');        option.ries[0].data.shift();                         option.ries[0].data.push(Math.random()*100);        option.xAxis[0].data.shift();        option.xAxis[0].data.push(axisData);        myChart.tOption(option);        myChart.hideLoading();        }            </script></html>

知识点积累：

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

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

注意事项：

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

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

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