echarts繪制波形圖

一、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中賦值給echarts的data項。