使用websocket将客户端服务器数据进行交互，并在echarts折现图动态显示（一） 原创
程序员文章站
2022-07-07 11:49:37
代码如下: &...
代码如下:
<!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后的数组下标