हीटमैप चार्ट: ग्रिड-आधारित घनत्व और पैटर्न मैपिंग

const hours = ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'];
const days = ['सोमवार', 'मंगलवार', 'बुधवार', 'गुरुवार', 'शुक्रवार'];

// डेटा प्रारूप: [xIndex, yIndex, मान]
const data = [
    [0, 0, 5], [1, 0, 1], [2, 0, 0], [3, 0, 0], [4, 0, 12], [5, 0, 24], [6, 0, 38], [7, 0, 42], [8, 0, 35], [9, 0, 20], [10, 0, 10], [11, 0, 6],
    [0, 1, 3], [1, 1, 0], [2, 1, 0], [3, 1, 1], [4, 1, 15], [5, 1, 28], [6, 1, 45], [7, 1, 50], [8, 1, 40], [9, 1, 22], [10, 1, 12], [11, 1, 4],
    [0, 2, 2], [1, 2, 1], [2, 2, 0], [3, 2, 0], [4, 2, 11], [5, 2, 26], [6, 2, 41], [7, 2, 48], [8, 2, 38], [9, 2, 19], [10, 2, 8],  [11, 2, 3],
    [0, 3, 4], [1, 3, 2], [2, 3, 0], [3, 3, 1], [4, 3, 14], [5, 3, 30], [6, 3, 49], [7, 3, 55], [8, 3, 42], [9, 3, 25], [10, 3, 15], [11, 3, 5],
    [0, 4, 6], [1, 4, 3], [2, 4, 1], [3, 4, 2], [4, 4, 10], [5, 4, 20], [6, 4, 32], [7, 4, 36], [8, 4, 28], [9, 4, 18], [10, 4, 9],  [11, 4, 2]
];

option = {
    tooltip: {
        position: 'top'
    },
    grid: {
        height: '50%',
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: hours,
        splitArea: { show: true }
    },
    yAxis: {
        type: 'category',
        data: days,
        splitArea: { show: true }
    },
    visualMap: {
        min: 0,
        max: 60,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
    },
    series: [
        {
            name: 'सिस्टम लोड',
            type: 'heatmap',
            data: data,
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

विकल्प = {
    सुझाव: { स्थिति: 'ऊपर' },
    xAxe: {
        प्रकार: 'श्रेणी',
        डेटा: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxe: {
        प्रकार: 'श्रेणी',
        डेटा: ['उत्पाद A', 'उत्पाद B', 'उत्पाद C']
    },
    visualMap: {
        प्रकार: 'टुकड़ों में',
        न्यूनतम: 0,
        अधिकतम: 100,
        बाएं: 'केंद्र',
        नीचे: '5%',
        अभिमुख: 'क्षैतिज',
        टुकड़े: [
            { न्यूनतम: 80, लेबल: 'उच्च प्रदर्शन', रंग: '#16a34a' },
            { न्यूनतम: 40, अधिकतम: 79, लेबल: 'मध्यम', रंग: '#f59e0b' },
            { अधिकतम: 39, लेबल: 'ध्यान देने की आवश्यकता', रंग: '#dc2626' }
        ]
    },
    श्रृंखला: [
        {
            प्रकार: 'तापमान नक्शा',
            डेटा: [
                [0, 0, 85], [1, 0, 92], [2, 0, 78], [3, 0, 88],
                [0, 1, 45], [1, 1, 55], [2, 1, 62], [3, 1, 35],
                [0, 2, 25], [1, 2, 30], [2, 2, 18], [3, 2, 42]
            ],
            लेबल: { दिखाएं: सच },
            आइटम शैली: {
                किनारे का रंग: '#ffffff',
                किनारे की चौड़ाई: 2
            }
        }
    ]
};

विकल्प = {
    ग्रिड: { लेबल समावेश: सच },
    xAxe: {
        प्रकार: 'श्रेणी',
        डेटा: ['नोड 1', 'नोड 2', 'नोड 3', 'नोड 4']
    },
    yAxe: {
        प्रकार: 'श्रेणी',
        डेटा: ['सेवा X', 'सेवा Y', 'सेवा Z']
    },
    visualMap: {
        न्यूनतम: 0,
        अधिकतम: 100,
        गणना योग्य: सच,
        अभिमुख: 'क्षैतिज',
        बाएं: 'केंद्र',
        नीचे: '0%',
        inRange: {
            रंग: ['#f0f9ff', '#0284c7', '#0f172a'] // सॉफ्ट नीला से गहरा स्लेट ग्रेडिएंट
        }
    },
    श्रृंखला: [
        {
            प्रकार: 'तापमान नक्शा',
            डेटा: [
                [0, 0, 12], [1, 0, 45], [2, 0, 78], [3, 0, 95],
                [0, 1, 34], [1, 1, 67], [2, 1, 89], [3, 1, 23],
                [0, 2, 56], [1, 2, 78], [2, 2, 12], [3, 2, 88]
            ]
        }
    ]
};