echarts动态滑动平均滤波

最新推荐文章于 2024-08-03 13:23:10 发布

晨之清风

最新推荐文章于 2024-08-03 13:23:10 发布

阅读量630

点赞数

分类专栏： echarts 文章标签： echaert 滑动平均 javascript 动态仿真

本文链接：https://blog.csdn.net/chentuo2000/article/details/111088311

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

陈拓 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. 在浏览器中的效果图

晨之清风

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
echarts动态滑动平均滤波

陈拓 2020/12/07-2020/12/081. 概述在正弦波上叠加高斯白噪声，再用滑动平均滤除噪声。相关文档：《Echarts动态生成sin曲线》https://blog.csdn.net/chentuo2000/article/details/110622403《Echarts动态产生高斯白噪声》https://blog.csdn.net/chentuo2000/article/details/1107951462. HTML页面和js程序<!DOCTYPE.
复制链接

扫一扫