使用echarts绘画时域频域图的JS代码学习

 function postChart(index){
        // 基于准备好的dom，初始化echarts实例
        console.log(index)
        var myChart = echarts.init(document.getElementById('main'),null,{
            width:1500,
            height:300
        });
        var data1 = document.getElementById("dataline1").value;
        console.log("aaaaa")
        // console.log(data1)
        // console.log(Object.prototype.toString.call(data1))
        // var data2 = data1.substring(1,data1.length-1);
        // console.log(data2.length)
        var data2 = data1.split(",")  // String 数组
 
 
        console.log(data2.length)
        var data4 = new Array()
        // for(var i=0;i<data3.length;i++){
        //     data4.push(parseInt(data3[i]))
        // }
        for(var i = (index-1)*2048;i<index*2048;i++){
            data4.push(parseInt(data2[i]))
        }
        // console.log(data4)
        var data5 = new Array()
        for (var i =0;i<2048;i++){
            data5.push(i)
        }
        // // 指定图表的配置项和数据
        var yname = '幅值'
 
        var a = '2'
        var b = 'm/'+'s'+a.sup()
        console.log(b)
        var option = {
            title:{
              text:'id:5 的时域波形图',
                x:'center'
            },
            grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
                top: '20%',
                left: '3%',
                right: '10%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {  // tooltip 用于控制鼠标滑过或点击时的提示框
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器配置项。
                    type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
                    axis: 'auto', // 指示器的坐标轴。
                    snap: true, // 坐标轴指示器是否自动吸附到点上
                },
                showContent: true,
            },
            toolbox:{
                show : true,        //是否显示工具栏组件
                orient:"horizontal",        //工具栏 icon 的布局朝向'horizontal' 'vertical'
                itemSize:15,              //工具栏 icon 的大小
                itemGap:10,             //工具栏 icon 每项之间的间隔
            },
            xAxis: {
                type: 'category',
                name:'数据点数',
                nameLocation:'end',
                nameTextStyle:{
                    fontSize:20,
                },
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                data:data5,
                // 设置旋转角度
                axisLabel:{
                    // rotate:30,
                    interval:500, //设置间距
                    textStyle:{
                        fontSize:"18",
                        fontStyle:'sans-serif',
                    }
                }
            },
            yAxis: {
                name:yname,
                nameTextStyle:{
                    fontSize:20,
                },
                type: 'value',
                axisLabel:{
                    textStyle:{
                        fontSize:"18",
                        fontStyle:'Times New Roman',
                    }
                }
 
            },
            series: [
                {
                    // data: [150, 230, 224, 218, 135, 147, 260],
                    data: data4,
                    type: 'line',
                    symbol:'none',
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 0.5,
                                color:'rgba(0,0,255)',
                            },
 
                        },
                    },
                }
            ]
        };
 
        // <!--    // 使用刚指定的配置项和数据显示图表。-->
        myChart.setOption(option);
    }复制

代码学习

这是一个JavaScript函数postChart(index)，它使用了ECharts库来绘制时域波形图。函数接受一个index参数，用于指定数据的索引范围，然后根据索引范围从数据源中获取对应的数据，并绘制相应的图表。

下面对这个函数进行简要的解释：

1. console.log(index): 这行代码用于在控制台输出index的值，用于调试目的。

2. var myChart = echarts.init(document.getElementById('main'),null,{width:1500,height:300});: 这行代码初始化ECharts图表实例，并指定绘制图表的容器为ID为main的元素。同时，设置图表的宽度为1500像素，高度为300像素。

3. var data1 = document.getElementById("dataline1").value;: 这行代码获取ID为dataline1的元素的值，即原始数据。这里假设dataline1是一个隐藏的输入框（input type=“hidden”），其值为一串数据。

4. var data2 = data1.split(","): 这行代码将原始数据字符串分割为一个字符串数组data2，每个元素是数据点的值。

5. var data4 = new Array(): 创建一个空数组data4，用于存储根据索引范围筛选后的数据点。

6. for(var i = (index-1)*2048; i < index*2048; i++) {...}: 这个for循环用于根据index的值，遍历从data2中选取数据点，并将其转换为整数后，存储到data4数组中。

7. var data5 = new Array(): 创建一个空数组data5，用于存储数据点的索引（数据点数）。

8. for (var i = 0; i < 2048; i++) {...}: 这个for循环用于生成从0到2047的整数序列，并将它们存储到data5数组中，用于在X轴上显示数据点数。

9. var option = { ... }: 定义了ECharts图表的配置项和数据，包括图表标题、坐标轴配置、数据系列等。

10. myChart.setOption(option);: 使用定义的配置项和数据绘制ECharts图表。

总的来说，这个函数是用于根据给定的索引范围从原始数据中筛选数据，并使用ECharts绘制相应的时域波形图。图表的标题显示了"id:5 的时域波形图"，X轴显示数据点数，Y轴显示幅值。图表使用折线图（line）展示数据，并根据给定的索引范围在图表上显示相应的数据点。

具体的不同的data的作用

在这个JavaScript函数postChart(index)中，有一些用于存储数据的变量data1、data2、data4和data5，它们分别有不同的作用和含义。

1. var data1 = document.getElementById("dataline1").value;：

   • 作用：从HTML页面中获取ID为"dataline1"的元素的值，即原始数据。
   • 含义：data1是一个包含原始数据的字符串，这个数据通常是一串数字，用逗号分隔。

2. var data2 = data1.split(",");：

   • 作用：将原始数据字符串data1分割成一个数组data2，每个数组元素是一个数据点的值。
   • 含义：data2是一个字符串数组，它包含了所有数据点的值。每个数据点的值都以字符串的形式存储在数组中。

3. var data4 = new Array();：

   • 作用：创建一个空数组data4，用于存储根据索引范围筛选后的数据点。
   • 含义：data4是一个用于存储绘制图表时显示的数据点的数组。它是根据给定的索引范围从data2数组中选取的一部分数据点，并将其转换为整数形式存储。

4. for(var i = (index-1)*2048; i < index*2048; i++) {...}：

   • 作用：根据给定的index值遍历从data2中选取数据点，并将其转换为整数后，存储到data4数组中。
   • 含义：这个for循环用于根据index的值，从data2数组中选取特定范围的数据点，并将这些数据点的值转换为整数形式存储到data4数组中。

5. var data5 = new Array();：

   • 作用：创建一个空数组data5，用于存储数据点的索引（数据点数）。
   • 含义：data5是一个用于在X轴上显示数据点数的数组。它包含了从0到2047的整数序列，表示数据点的索引，用于在图表上显示横坐标。

综上所述，这些数据变量在绘制时域波形图时扮演不同的角色：data1是原始数据的字符串形式，data2是将原始数据拆分成字符串数组，data4是根据索引范围筛选后的整数数据点的数组，data5是用于在X轴上显示数据点数的整数数组。这些数据在构建ECharts图表时提供了必要的数据源。