echarts/test/heatmap-encode-value-fix.html at fc125ec107d83b305b9ebfb5ffa73cb3706026a1 · apache/echarts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Heatmap Encode Value Bug Fix Test</title>
    <script src="../dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        // Dataset with multiple value columns
        var dataset = {
            source: [
                ['x', 'y', 'value1', 'value2', 'value3'],
                ['A', 'X', 0.1, 0.5, 0.9],
                ['A', 'Y', 0.2, 0.6, 0.8],
                ['B', 'X', 0.3, 0.7, 0.7],
                ['B', 'Y', 0.4, 0.8, 0.6]
            ]
        };

        var xData = [
            { value: 'Group1', children: [{ value: 'A' }, { value: 'B' }] }
        ];

        var yData = [
            { value: 'Group1', children: [{ value: 'X' }, { value: 'Y' }] }
        ];

        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            dataset: dataset,
            matrix: {
                top: 80,
                bottom: 80,
                left: 120,
                right: 30,
                x: {
                    data: xData,
                    levels: [{ levelSize: 20 }, { levelSize: 50 }]
                },
                y: {
                    data: yData,
                    levels: [{ levelSize: 20 }, { levelSize: 50 }]
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'matrix',
                encode: {
                    x: 'x',
                    y: 'y',
                    value: 'value1'
                },
                datasetIndex: 0
            }],
            visualMap: {
                type: 'continuous',
                min: 0,
                max: 1,
                calculable: true,
                orient: 'vertical',
                left: 10,
                top: 80,
                inRange: {
                    color: ['#ffffff', '#006400']
                }
            },
            tooltip: {
                show: true,
                formatter: function (params) {
                    var d = params.data;
                    return 'x: ' + d[0] + '<br>y: ' + d[1] + '<br>' +
                           'value1: ' + d[2] + '<br>' +
                           'value2: ' + d[3] + '<br>' +
                           'value3: ' + d[4];
                }
            }
        };

        myChart.setOption(option);
    </script>
</body>
</html>