CutestUI

<div class="heatmap-container heatmap-blue">
    <div class="heatmap-controls">
        <div class="control-group">
            <label for="themeSelect">选择主题：</label>
            <select id="themeSelect">
                <option value="blue">蓝色主题</option>
                <option value="red">红色主题</option>
                <option value="green">绿色主题</option>
                <option value="purple">紫色主题</option>
            </select>
        </div>
    </div>
    
    <div class="heatmap-wrapper">
        <div class="heatmap-grid"></div>
        <div class="heatmap-tooltip"></div>
    </div>
    
    <div class="heatmap-legend">
        <div class="legend-item">
            <span class="legend-color heatmap-cell-0"></span>
            <span>最低</span>
        </div>
        <!-- 更多图例项... -->
    </div>
</div>

// 热力图组件类
class Heatmap {
    constructor(containerId, options = {}) {
        this.container = document.getElementById(containerId);
        this.gridElement = this.container.querySelector('.heatmap-grid');
        this.tooltip = this.container.querySelector('.heatmap-tooltip');
        
        this.options = { ...this.defaultOptions, ...options };
        this.init();
    }
    
    defaultOptions = {
        theme: 'blue',
        gridSize: 52,
        cellSize: 12,
        generateRandomData: true
    };
    
    init() {
        this.render();
        this.bindEvents();
    }
    
    render() {
        // 清空现有网格
        this.gridElement.innerHTML = '';
        
        // 设置网格样式
        this.gridElement.style.gridTemplateColumns = `repeat(${this.options.gridSize}, ${this.options.cellSize}px)`;
        
        // 生成数据
        const data = this.generateData();
        
        // 渲染单元格
        data.forEach((value, index) => {
            const cell = document.createElement('div');
            cell.classList.add('heatmap-cell');
            cell.classList.add(`heatmap-cell-${value}`);
            
            // 为每个单元格存储数据值
            cell.dataset.value = value;
            
            this.gridElement.appendChild(cell);
        });
    }
    
    generateData() {
        const data = [];
        const totalCells = this.options.gridSize * this.options.gridSize;
        
        for (let i = 0; i < totalCells; i++) {
            if (this.options.generateRandomData) {
                // 生成随机数据
                data.push(Math.floor(Math.random() * 8));
            } else if (this.options.customData) {
                // 使用自定义数据
                data.push(this.options.customData[i] || 0);
            } else {
                data.push(0);
            }
        }
        
        return data;
    }
    
    bindEvents() {
        // 如果有工具提示，绑定鼠标事件
        if (this.tooltip) {
            const cells = this.gridElement.querySelectorAll('.heatmap-cell');
            
            cells.forEach(cell => {
                cell.addEventListener('mouseenter', (e) => {
                    const value = cell.dataset.value;
                    this.tooltip.textContent = `值: ${value}`;
                    this.tooltip.style.left = `${e.pageX + 10}px`;
                    this.tooltip.style.top = `${e.pageY - 30}px`;
                    this.tooltip.style.opacity = '1';
                });
                
                cell.addEventListener('mouseleave', () => {
                    this.tooltip.style.opacity = '0';
                });
            });
        }
    }
    
    // 更改主题
    setTheme(theme) {
        // 移除所有主题类
        this.container.classList.remove('heatmap-blue', 'heatmap-red', 'heatmap-green', 'heatmap-purple');
        // 添加新主题类
        this.container.classList.add(`heatmap-${theme}`);
        this.options.theme = theme;
    }
    
    // 更改网格大小
    setGridSize(size) {
        this.options.gridSize = size;
        this.render();
    }
}

// 初始化热力图
document.addEventListener('DOMContentLoaded', function() {
    const basicHeatmap = new Heatmap('basicHeatmap');
    
    // 主题切换
    document.getElementById('themeSelect').addEventListener('change', function(e) {
        basicHeatmap.setTheme(e.target.value);
    });
    
    // 网格大小切换
    document.getElementById('gridSizeSelect').addEventListener('change', function(e) {
        basicHeatmap.setGridSize(parseInt(e.target.value));
    });
    
    // 初始化其他示例热力图
    new Heatmap('redThemeGrid', { theme: 'red' });
    new Heatmap('greenThemeGrid', { theme: 'green' });
    new Heatmap('purpleThemeGrid', { theme: 'purple' });
    
    // 自定义数据分布
    const customData = generateConcentratedData(52);
    new Heatmap('customDataGrid', { customData: customData, generateRandomData: false });
    
    // 生成集中式数据分布
    function generateConcentratedData(size) {
        const data = [];
        const center = Math.floor(size / 2);
        
        for (let y = 0; y < size; y++) {
            for (let x = 0; x < size; x++) {
                const distance = Math.sqrt(Math.pow(x - center, 2) + Math.pow(y - center, 2));
                // 中心区域数值较高，向外逐渐降低
                const value = Math.max(0, Math.min(7, 7 - Math.floor(distance / 2)));
                data.push(value);
            }
        }
        
        return data;
    }
});