<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 热图实现</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chartContainer {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="chartContainer"></div>

    <script>
        // 初始化图表
        const chart = echarts.init(document.getElementById('chartContainer'));

        // 生成模拟数据
        function generateData() {
            const timePoints = 100; // 时间点数量
            const yPoints = 80;    // Y轴点数量
            const data = [];
            
            // 时间轴数据 (0-10秒)
            const times = Array.from({length: timePoints}, (_, i) => (i / (timePoints - 1)) * 10);
            
            // Y轴数据 (-40到40)
            const yValues = Array.from({length: yPoints}, (_, i) => (i / (yPoints - 1)) * 80 - 40);
            
            // 生成热图数据
            for (let i = 0; i < yPoints; i++) {
                for (let j = 0; j < timePoints; j++) {
                    const y = yValues[i];
                    const t = times[j];
                    
                    // 模拟原始图表中的模式：中间（y=0附近）值较高（红色），上下对称
                    // 添加一些波动和条纹效果
                    let baseValue = -30 - Math.abs(y) * 0.3; // 基础值，Y轴越远值越低
                    
                    // 添加水平条纹效果
                    baseValue += Math.sin(y * 0.5) * 5;
                    
                    // 添加垂直波动效果
                    baseValue += Math.sin(t * 0.8) * 3;
                    
                    // 添加随机噪点
                    baseValue += (Math.random() - 0.5) * 8;
                    
                    // 限制在-60到20范围内
                    baseValue = Math.max(-60, Math.min(20, baseValue));
                    
                    data.push([j, i, baseValue]);
                }
            }
            
            return {
                times: times,
                yValues: yValues,
                data: data
            };
        }

        // 生成数据
        const { times, yValues, data } = generateData();
        console.log('data', data)

        // 配置选项
        const option = {
            tooltip: {
                formatter: function(params) {
                    return `时间: ${times[params.data[0]].toFixed(1)}s<br/>Y值: ${yValues[params.data[1]].toFixed(1)}<br/>值: ${params.data[2].toFixed(1)}`;
                }
            },
            grid: {
                left: '5%',
                right: '8%',
                bottom: '10%',
                top: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: times.map(t => t.toFixed(1)),
                name: 'Time (s)',
                nameLocation: 'middle',
                nameGap: 30,
                axisLabel: {
                    interval: 10 // 间隔显示标签，避免拥挤
                }
            },
            yAxis: {
                type: 'category',
                data: yValues.map(y => y.toFixed(0)),
                axisLabel: {
                    interval: 10 // 间隔显示标签
                }
            },
            visualMap: {
                type: 'continuous',
                min: -60,
                max: 20,
                color: ['#ff0000', '#ff7d00', '#ffff00', '#00ff00', '#007dff', '#0000ff', '#00007d'],
                orient: 'vertical',
                right: 0,
                top: 'center',
                itemWidth: 20,
                itemHeight: 150,
                label: {
                    formatter: function(value) {
                        return value;
                    }
                }
            },
            series: [{
                type: 'heatmap',
                data: data,
                emphasis: {
                    itemStyle: {
                        borderColor: '#333',
                        borderWidth: 1
                    }
                },
                progressive: 1000,
                animation: false
            }]
        };

        // 设置配置项
        chart.setOption(option);

        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            chart.resize();
        });
    </script>
</body>
</html>