频谱图绘制实现 echarts

ECharts是一款由阿里集团开发的开源数据可视化库，它可以方便地绘制各种图表，包括频谱图。在ECharts中，绘制频谱图通常需要使用`heatmap`组件，因为频谱图本质上是一种二维热力图，展示的是数据点的密集程度。

以下是基本步骤：

1. 引入ECharts库和所需的样式文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts@latest/theme/macarons.min.css">

2. 创建一个HTML元素用于放置图表：

<div id="main" style="width: 600px;height:400px;"></div>

3. 编写JavaScript代码来初始化并配置图表：

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 定义数据，可以是数组或者其他形式的数据结构，每个元素代表频率分布的一个区间
var data = [
    [50, 10], [60, 20], [70, 30], [80, 40], [90, 50]
];

// 配置选项，包括坐标轴、颜色映射等
var option = {
    title: {
        text: '频谱图示例'
    },
    tooltip: {},
    series: [{
        name: '频谱',
        type: 'heatmap',
        data: data,
        colorMap: 'Jet', // 或者选择其他颜色映射主题
        label: {
            show: true,
            position: 'top'
        }
    }]
};

// 绘制图表
myChart.setOption(option);