echarts动态滑动平均滤波

陈拓 2020/12/07-2020/12/08

1. 概述

在正弦波上叠加高斯白噪声，再用滑动平均滤除噪声。

2. HTML页面和js程序

<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container1" style="position:absolute; left:10px; top:0px; height:320px; width:400px;"></div><div id="container3" style="position:absolute; left:400px; top:0px; height:320px; width:400px;"></div><div id="container5" style="position:absolute; left:800px; top:0px; height:320px; width:400px;"></div><div id="container6" style="position:absolute; left:800px; top:280px; height:320px; width:400px;"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><script type="text/javascript">
var dom1 = document.getElementById("container1");
var myChart1 = echarts.init(dom1);
var dom3 = document.getElementById("container3");
var myChart3 = echarts.init(dom3);
var dom5 = document.getElementById("container5");
var myChart5 = echarts.init(dom5);
var dom6 = document.getElementById("container6");
var myChart6 = echarts.init(dom6);
var app = {};
var option;var N_POINT = 500; // 曲线的x轴长度
var angle = 0;
var x_axis1 = [];
var x_data1 = 0;
var y_axis1 = [];
var y_data1 = 0;
var x_axis3 = [];
var x_data3 = 0;
var y_axis3 = [];
var y_data3 = 0;
var x_axis5 = [];
var x_data5 = 0;
var y_axis5 = [];
var y_data5 = 0;
var x_axis6 = [];
var x_data6 = 0;
var y_axis6 = [];
var y_data6 = 0;// 产生三角函数
function sin_data(x) {x = x/10;return Math.sin(x*Math.PI);
}// 产生服从 U(0,1) 的均匀分布随机数random1和random2
function random1(x) {return Math.random();
}
function random2(x) {return Math.random();
}// 用Box Muller方法生成正态分布随机数
function b_m(x, y) {var means=0; // 平均值，决定对称中线var sigma=0.5; // 标准方差，决定曲线的胖瘦z = Math.sqrt(-2 * Math.log(x)) * Math.cos(2 * Math.PI * y);return means + z * sigma;
}var point = 16; // 滑动平均计算平均值时所取的点数
var x = []; // 计算滑动平均值的点
for (var i = 0; i < point; i++) {x[i] = 0;}
var ave = 0; // 滑动平均值
var count = 0; // 滑动平均计数器
// 计算滑动平均值
function smooth(n)
{if (count < point) { // 不滑动x[count] = n;count++;} else { // 数据滑动for (var i = 0; i < point-1; i++) {x[i] = x[i+1];}x[point-1] = n;}// count个点的和var sum = 0;sum = 0;for (var i = 0; i < count; i++) {sum = sum + x[i];}// count个点的平均值//ave = Math.round(sum/count); // 整数ave = sum/count; return ave; //返回估计值
}var inData = 0;
// 生成x轴和y轴数据
function addData(shift) {x_data1++;x_axis1.push(x_data1);x_data3++;x_axis3.push(x_data3);x_data5++;x_axis5.push(x_data5);x_data6++;x_axis6.push(x_data6);y_data1 = 10*sin_data(angle); // 生成sin曲线y_axis1.push(y_data1);angle+=0.1;   var x = random1(); // 生成均匀分布的伪随机数var y = random2(); // 生成均匀分布的伪随机数y_data3 = b_m(x, y); // 生成正态分布的随机数y_axis3.push(y_data3);y_data5 = y_data1 + y_data3; // 生成混合信号y_axis5.push(y_data5);y_data6 = smooth(y_data5); // 滑动平均y_axis6.push(y_data6);if (shift) {x_axis1.shift();y_axis1.shift();x_axis3.shift();y_axis3.shift();x_axis5.shift();y_axis5.shift();x_axis6.shift();        y_axis6.shift();        }
}
// 生成N_POINT个数据，初始化x_axis和y_axis数组，数组的长度在这里被设置成N_POINT
for (var i = 0; i < N_POINT; i++) {addData(false);
}option1 = {title : { show:true,padding: [20,20,100,100],text: 'sin曲线',x:'center'},xAxis: {type: 'category',data: x_axis1},yAxis: {type: 'value'},series: [{animation: false,showSymbol: false,clip: true,data: y_axis1,type: 'line'}]
};option3 = {title : { show:true,padding: [20,20,100,100],text: '高斯白噪声',x:'center'},xAxis: {type: 'category',data: x_axis3},yAxis: {type: 'value'},series: [{animation: false,showSymbol: false,clip: true,data: y_axis3,type: 'line'}]
};option5 = {title : { show:true,padding: [20,20,100,100],text: '混合信号',x:'center'},xAxis: {type: 'category',data: x_axis5},yAxis: {type: 'value'},series: [{animation: false,showSymbol: false,clip: true,data: y_axis5,type: 'line'}]
};
option6 = {title : { show:true,padding: [20,20,100,100],text: '滑动平均滤波后的结果',x:'center'},xAxis: {type: 'category',data: x_axis6},yAxis: {type: 'value'},series: [{animation: false,showSymbol: false,            type: 'line',data: y_axis6,smooth: true,itemStyle: {normal: {lineStyle: {color: '#c23531' //改变折线颜色}}}}]
};setInterval(function () {addData(true); // 生成数据并左移myChart1.setOption(option1);myChart3.setOption(option3);myChart5.setOption(option5);myChart6.setOption(option6);
}, 500); // 500ms刷新一次</script></body>
</html>

3. 在浏览器中的效果图

echarts动态滑动平均滤波相关推荐

mfc动态改变clip风格_echarts动态滑动平均滤波
陈拓 2020/12/07-2020/12/08 1. 概述在正弦波上叠加高斯白噪声,再用滑动平均滤除噪声. 相关文档: 晨之清风:Echarts动态生成sin曲线zhuanlan.zhihu.c ...
C语言实时滑动平均滤波动态改变滑动框内元素数目
#直接上代码 #include <stdio.h> #include <malloc.h> typedef unsigned int uint32_t;//uint32_t _ ...
滑动平均滤波_11种滤波算法程序大全（含源代码分享）
1.限幅滤波法(又称程序判断滤波法) /*A.名称:限幅滤波法(又称程序判断滤波法)B.方法: 根据经验判断,确定两次采样允许的最大偏差值(设为A), 每次检测到新值时判断: 如果本次值与上次值之差& ...
matlab 计算汉明距_matlab实现滑动平均滤波
什么是滑动均值滤波滑动平均滤波就是把连续取得的N个采样值看成一个队列,队列的长度固定为N,每次采样得到一个新数据放到队尾,并丢掉原来队首的一次数据,把队列中的N个数据进行平均运算,就可以获得新的滤波 ...
π型滤波频率计算_滑动平均滤波的截止频率与平均点数计算
1.介绍滑动平均值滤波可以去除随机噪声.测量中随机噪声的影响,使测量结果不准确,通过多次测量同一数据源,使用多点集合平均的方法得到数据一个比较合理的估计就是滑动平均值滤波. 例如第80采样点的5次平 ...
python 曲线平滑处理——方法总结(Savitzky-Golay 滤波器、make_interp_spline插值法和convolve滑动平均滤波)
文章目录 1 插值法对曲线平滑处理 1.1 插值法的常见实现方法 1.2 拟合和插值的区别 1.3 代码实例 2 Savitzky-Golay 滤波器实现曲线平滑 2.1 问题描述 2.2 Savit ...
滑动平均滤波算法——MATLAB实现
算法原理滑动平均滤波算法的基本思想是设定一个宽度固定的滑动窗口,该窗口沿着时间序列滑动,同时取窗内数据的算术平均值作为输出值,而由输出值组成另一个数字序列,也就是滤波后的序列.设N为滑动窗口的宽度, ...
数字滤波算法（一）——滑动平均滤波算法
一.数字滤波器简介数字滤波器是指通过一定的数据逻辑构成的可以滤除输入信号中的特定的噪声的算法,这里所指的数字滤波器主要包括平均值滤波.FIR滤波.CIC滤波等,在之后的实验中,我们将介绍不同数字滤波 ...
python 滤波_[开发技巧]·Python极简实现滑动平均滤波（基于Numpy.convolve）
[开发技巧]·Python极简实现滑动平均滤波(基于Numpy.convolve) 1.滑动平均概念滑动平均滤波法(又称递推平均滤波法),时把连续取N个采样值看成一个队列 ,队列的长度固定为N ...

echarts动态滑动平均滤波

1. 概述

2. HTML页面和js程序

3. 在浏览器中的效果图

echarts动态滑动平均滤波相关推荐

最新文章

热门文章