一、echarts配置項如下：

var option = {
                animation: true,
                title: {},
                tooltip: {
                    showDelay: 0,
                },
                xAxis: {
                    type: 'value',
                },
                grid: {
                    top: '20%',
                    bottom: '20%'
                },
                yAxis: {
                    min: -90,
                    max: 90,
                },
                series: [{
                    name: '',
                    type: 'line',
                    showSymbol: false,
                    clip: true,
                    markLine: {
                        symbol: ['none', 'none'],
                        label: { show: true },
                    },
                    data: [],
                }]
            };
 

二、效果示例：

三、一些問題：

雖然series的type是line，但我data裡的值是和scatter一樣的散點值。資料庫中的原始資料有波形點數wp（這裡是128）和波形陣列wa（這裡長度為1024），我們需要換成點值陣列[ ...,[1/128*i,wa[i]],...]。

                
                decimal[][] dcw = new decimal[1024][];
                for (int i = 0; i < 1024; i++)
                {
                    dcw[i] 
 
= new decimal[2] { 1/wp * i, wa[i] };
                }            

x軸的刻度是自動生成的，有時候顯示很蛋疼。這裡x軸座標顯示成0-8的整數看起來非常理想，但我也不知道為什麼會顯示成這樣。y軸的刻度是自動的，有時候並不會等分，強行等分官方文件裡說是不推薦的？設定splitNumber和interval可以保證等分間隔。·

                yAxis: {
                    min: -90,
                    max: 90,
                    splitNumber: 6,
                    interval: 30
                
 
}

四、簡單示例原始碼

百度網盤連結: https://pan.baidu.com/s/14688L45HXF3Up41dHDwUig 提取碼: mfth

檔案訪問跨域問題，通過npm安裝live-server,在專案所在的資料夾下執行live-server

為了看效果可以直接將data.json中的座標陣列複製貼上到html中。