githubmirror/echarts

test/matrix_application.html
1 380 строк56 KB
100pah
test(matrix): Add an application case.
04 июн 2025, 14:57
04 июн 2025, 14:573123a3a
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/draggable.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main1_b"></div>
        <div id="main2"></div>
        <div id="main3"></div>
        <div id="main4"></div>
        <div id="main_tiny_cartesians"></div>
        <div id="main_grid_layout"></div>

        <script>
            require([
                'echarts',
                // 'map/js/china',
                // './data/nutrients.json'
            ], function (echarts) {
                const label = {
                    fontSize: 16,
                    color: '#555'
                };
                const option = {
                    matrix: {
                        x: {
                            data: ['Positive', 'Negative'],
                            label
                        },
                        y: {
                            data: ['Positive', 'Negative'],
                            label
                        },
                        top: 80,
                        width: 600,
                        left: 'center'
                    },
                    series: {
                        type: 'custom',
                        coordinateSystem: 'matrix',
                        data: [
                            ['Positive', 'Positive', 10],
                            ['Positive', 'Negative', 2],
                            ['Negative', 'Positive', 3],
                            ['Negative', 'Negative', 5]
                        ],
                        label: {
                            show: true,
                            formatter: params => {
                                const value = params.value[2];
                                return '{name|'
                                    + (params.value[0] === params.value[1]
                                    ? 'True ' : 'False ')
                                    + params.value[1] + '}\n{value|'
                                    + value + '}';
                            },
                            rich: {
                                name: {
                                    color: '#fff',
                                    backgroundColor: '#999',
                                    textBorderColor: '#333',
                                    padding: 5,
                                    fontSize: 18
                                },
                                value: {
                                    color: '#444',
                                    textBorderWidth:  0,
                                    padding: 5,
                                    fontSize: 16,
                                    align: 'center'
                                }
                            }
                        },
                        renderItem: function (params, api) {
                            const x = api.value(0);
                            const y = api.value(1);
                            const rect = api.layout([x, y]).rect;
                            return {
                                type: 'rect',
                                shape: rect,
                                style: api.style({
                                    fill: x === y ? '#8f8' : '#f88',
                                }),
                            }
                        }
                    },
                    graphic: {
                        elements: [{
                            type: 'text',
                            style: {
                                text: 'True Class',
                                fill: '#333',
                                font: 'bold 24px serif',
                                textAlign: 'center'
                            },
                            x: (window.innerWidth - 600) / 2 + 600 / 6 * 4,
                            y: 40,
                        }, {
                            type: 'text',
                            style: {
                                text: 'Predicted Class',
                                fill: '#333',
                                font: 'bold 24px serif',
                                textAlign: 'center'
                            },
                            x: (window.innerWidth - 600) / 2 - 50,
                            y: 270,
                            rotation: Math.PI / 2
                        }]
                    }
                };

                var chart = testHelper.create(echarts, 'main0', {
                    title: [
                        'Confusion Matrix'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require([
                'echarts',
                // 'map/js/china',
                // './data/nutrients.json'
            ], function (echarts) {
                const xCnt = 10;
                const yCnt = 6;
                const xData = [];
                const yData = [];
                for (let i = 0; i < xCnt; ++i) {
                    xData.push({
                        value: 'X' + (i + 1)
                    });
                }

                for (let i = 0; i < yCnt; ++i) {
                    yData.push({
                        value: 'Y' + (i + 1)
                    });
                }

                const data = [];
                for (let i = 1; i <= xCnt; ++i) {
                    for (let j = 1; j <= yCnt; ++j) {
                        data.push([
                            'X' + i,
                            'Y' + j,
                            Math.random() * 2 - 1
                        ]);
                    }
                }

                const option = {
                    matrix: {
                        x: {
                            data: xData
                        },
                        y: {
                            data: yData
                        },
                        top: 80
                    },
                    visualMap: {
                        type: 'continuous',
                        min: -1,
                        max: 1,
                        dimension: 2,
                        calculable: true,
                        orient: 'horizontal',
                        top: 5,
                        left: 'center',
                        inRange: {
                            color: [
                                '#313695',
                                '#4575b4',
                                '#74add1',
                                '#abd9e9',
                                '#e0f3f8',
                                '#ffffbf',
                                '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026'
                            ],
                            symbolSize: [15, 40]
                        }
                    },
                    series: {
                        type: 'scatter',
                        coordinateSystem: 'matrix',
                        data,
                        itemStyle: {
                            opacity: 1
                        },
                        label: {
                            show: true,
                            formatter: params => params.value[2].toFixed(2)
                        }
                    }
                };

                var chart = testHelper.create(echarts, 'main1', {
                    title: [
                        'Correlation Matrix (Scatter)'
                    ],
                    option: option
                });
            });
        </script>






        <script>
            require(['echarts'], function (echarts) {
                const makeRenderItem = (xDim, yDim, valDim, dataExtent) => (params, api) => {
                    const xval = api.value(xDim);
                    const yval = api.value(yDim);
                    const labelVal = api.value(valDim);
                    const rect = api.layout([xval, yval]).rect;
                    const height = rect.height * 0.3;
                    const y = rect.y + (rect.height - height) / 2;
                    const x = rect.x + rect.width * 0.3;
                    const widthMax = rect.width * 0.5;
                    const width = linearMap(labelVal, dataExtent, [0, widthMax])
                    return {
                        type: 'group',
                        children: [{
                            type: 'rect',
                            shape: {x, y, width, height},
                            style: api.style({
                                fill: '#47f',
                            }),
                        }, {
                            type: 'text',
                            x: rect.x + 15,
                            y: rect.y + rect.height / 2,
                            style: {
                                text: labelVal + '',
                                fill: '#333',
                                textVerticalAlign: 'middle',
                            },
                        }]
                    };
                };

                function linearMap(val, domain, range) {
                    const d0 = domain[0];
                    const d1 = domain[1];
                    const r0 = range[0];
                    const r1 = range[1];
                    const subDomain = d1 - d0;
                    const subRange = r1 - r0;

                    return subDomain === 0 ? subRange === 0 ? r0 : (r0 + r1) / 2
                        : val === d0 ? r0
                        : val === d1 ? r1
                        : (val - d0) / subDomain * subRange + r0;
                }

                const _dataExtent = [0, 10000];

                var option = {
                    dataset: {
                        source: [
                            ['2021-02-01', 0, 1212, 1, 2321, 2, 1412],
                            ['2021-02-02', 0, 7181, 1, 2114, 2, 1402],
                            ['2021-02-03', 0, 2763, 1, 4212, 2, 8172],
                            ['2021-02-04', 0, 6122, 1, 2942, 2, 6121],
                            ['2021-02-05', 0, 4221, 1, 3411, 2, 1987],
                            ['2021-02-06', 0, 7221, 1, 5121, 2, 1303],
                        ]
                    },
                    matrix: {
                        x: {
                            data: ['Operation Count', 'File Count', 'Total Size'],
                            itemStyle: {
                                color: '#333',
                            },
                            label: {
                                color: '#eee',
                            }
                        },
                        y: {
                            levelSize: 100,
                        },
                        corner: {
                            itemStyle: {
                                color: '#333',
                            },
                            label: {
                                color: '#eee',
                            },
                            data: [{coord: [-1, -1], value: 'Date'}]
                        }
                    },
                    series: [{
                        type: 'custom',
                        coordinateSystem: 'matrix',
                        encode: {x: 1, y: 0},
                        renderItem: makeRenderItem(1, 0, 2, _dataExtent),
                    }, {
                        type: 'custom',
                        coordinateSystem: 'matrix',
                        symbol: 'rect',
                        encode: {x: 3, y: 0},
                        renderItem: makeRenderItem(3, 0, 4, _dataExtent),
                    }, {
                        type: 'custom',
                        coordinateSystem: 'matrix',
                        encode: {x: 5, y: 0},
                        renderItem: makeRenderItem(5, 0, 6, _dataExtent),
                    }],
                };

                var chart = testHelper.create(echarts, 'main1_b', {
                    title: [
                        'custom series, tiny bar.'
                    ],
                    option: option
                });
            });
        </script>



        <script>
            require([
                'echarts',
                // 'map/js/china',
                // './data/nutrients.json'
            ], function (echarts) {
                const xCnt = 8;
                const yCnt = xCnt;
                const xData = [];
                const yData = [];
                for (let i = 0; i < xCnt; ++i) {
                    xData.push({
                        value: 'X' + (i + 1)
                    });
                }

                for (let i = 0; i < yCnt; ++i) {
                    yData.push({
                        value: 'Y' + (i + 1)
                    });
                }

                const data = [];
                for (let i = 1; i <= xCnt; ++i) {
                    for (let j = 1; j <= yCnt; ++j) {
                        if (i >= j) {
                            data.push([
                                'X' + i,
                                'Y' + j,
                                i === j ? 1 : Math.random() * 2 - 1
                            ]);
                        }
                    }
                }

                const option = {
                    matrix: {
                        x: {
                            data: xData
                        },
                        y: {
                            data: yData
                        },
                        top: 80
                    },
                    visualMap: {
                        type: 'continuous',
                        min: -1,
                        max: 1,
                        dimension: 2,
                        calculable: true,
                        orient: 'horizontal',
                        top: 5,
                        left: 'center',
                        inRange: {
                            color: [
                                '#313695',
                                '#4575b4',
                                '#74add1',
                                '#abd9e9',
                                '#e0f3f8',
                                '#ffffbf',
                                '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026'
                            ]
                        }
                    },
                    series: {
                        type: 'heatmap',
                        coordinateSystem: 'matrix',
                        data,
                        label: {
                            show: true,
                            formatter: params => params.value[2].toFixed(2)
                        }
                    }
                };

                var chart = testHelper.create(echarts, 'main2', {
                    title: [
                        'Correlation Matrix (Heatmap)'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require([
                'echarts',
            ], function (echarts) {
                const xData = [];
                const yData = [];
                for (let i = 0; i < 5; ++i) {
                    const children = [];
                    for (let j = 0; j < 5; ++j) {
                        children.push(i * 5 + j + 1 + '');
                    }
                    xData.push({
                        value: 'X' + (i + 1),
                        children
                    });
                    yData.push({
                        value: 'Y' + (i + 1),
                        children
                    });
                }

                const data = [];
                const size = 25;
                let temp = {};

                for (let i = 1; i <= size; ++i) {
                    for (let j = 1; j <= size; ++j) {
                        let base = i === j ? 100 : 20;
                        const iGroup = Math.ceil(i / 5);
                        const jGroup = Math.ceil(j / 5);
                        base += (3 - Math.abs(iGroup - jGroup)) * 35;
                        if (i % 5 === j % 5) {
                            base += 20;
                        }
                        if (Math.random() > 0.9) {
                            base += Math.random() * 40;
                        }

                        if (i > j) {
                            // Use the previously calculated value to ensure symmetry
                            data.push([
                                i + '',
                                j + '',
                                temp[j + '_' + i]
                            ]);
                        } else {
                            // Calculate a new value and save it for future use
                            let value = (Math.random() * 0.5 + 0.5) * base;
                            data.push([
                                i + '',
                                j + '',
                                value
                            ]);
                            temp[i + '_' + j] = value;
                        }
                    }
                }

                const option = {
                    matrix: {
                        x: {
                            data: xData,
                            // show: false
                        },
                        y: {
                            data: yData,
                            // show: false
                        },
                        width: 500,
                        height: 500,
                        left: (window.innerWidth - 500) / 2
                    },
                    tooltip: {
                        show: true,
                        valueFormatter: value => Math.round(value)
                    },
                    visualMap: {
                        type: 'continuous',
                        min: 15,
                        max: 120,
                        dimension: 2,
                        calculable: true,
                        orient: 'horizontal',
                        top: 5,
                        left: 'center',
                        inRange: {
                            color: [
                                '#313695',
                                '#4575b4',
                                '#74add1',
                                '#abd9e9',
                                '#e0f3f8',
                                '#ffffbf',
                                '#fee090',
                                '#fdae61',
                                '#f46d43',
                                '#d73027',
                                '#a50026'
                            ]
                        }
                    },
                    series: {
                        type: 'heatmap',
                        coordinateSystem: 'matrix',
                        data
                    }
                };

                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Covariance Matrix'
                    ],
                    option: option,
                    height: 600
                });
            });
        </script>

        <script>
            require([
                'echarts',
            ], function (echarts) {
                const colors = {
                    red: '#f88',
                    green: '#8f8',
                    blue: '#8bf',
                    yellow: '#ff8',
                }
                const option = {
                    matrix: {
                        x: {
                            data: Array.from({length: 19}, (_, i) => i + 1 + ''),
                            label: {
                                show: false
                            },
                            itemStyle: {
                                borderWidth: 0
                            },
                            dividerLineStyle: {
                                width: 0,
                            },
                        },
                        y: {
                            data: Array.from({length: 10}, (_, i) => i + 1 + ''),
                            label: {
                                show: false
                            },
                            itemStyle: {
                                borderWidth: 0
                            },
                            dividerLineStyle: {
                                width: 0,
                            },
                        },
                        left: 'center',
                        width: 900,
                        backgroundStyle: {
                            borderWidth: 0
                        },
                        body: {
                            itemStyle: {
                                borderWidth: 0
                            }
                        },
                    },
                    series: {
                        type: 'custom',
                        coordinateSystem: 'matrix',
                        data: [
                            ['1', '1', '1', 'H', colors.red],
                            ['19', '1', '2', 'He', colors.red],
                            ['1', '2', '3', 'Li', colors.red],
                            ['2', '2', '4', 'Be', colors.red],
                            ['14', '2', '5', 'B', colors.yellow],
                            ['15', '2', '6', 'C', colors.yellow],
                            ['16', '2', '7', 'N', colors.yellow],
                            ['17', '2', '8', 'O', colors.yellow],
                            ['18', '2', '9', 'F', colors.yellow],
                            ['19', '2', '10', 'Ne', colors.yellow],
                            ['1', '3', '11', 'Na', colors.red],
                            ['2', '3', '12', 'Mg', colors.red],
                            ['14', '3', '13', 'Al', colors.yellow],
                            ['15', '3', '14', 'Si', colors.yellow],
                            ['16', '3', '15', 'P', colors.yellow],
                            ['17', '3', '16', 'S', colors.yellow],
                            ['18', '3', '17', 'Cl', colors.yellow],
                            ['19', '3', '18', 'Ar', colors.yellow],
                            ['1', '4', '19', 'K', colors.red],
                            ['2', '4', '20', 'Ca', colors.red],
                            ['4', '4', '21', 'Sc', colors.blue],
                            ['5', '4', '22', 'Ti', colors.blue],
                            ['6', '4', '23', 'V', colors.blue],
                            ['7', '4', '24', 'Cr', colors.blue],
                            ['8', '4', '25', 'Mn', colors.blue],
                            ['9', '4', '26', 'Fe', colors.blue],
                            ['10', '4', '27', 'Co', colors.blue],
                            ['11', '4', '28', 'Ni', colors.blue],
                            ['12', '4', '29', 'Cu', colors.blue],
                            ['13', '4', '30', 'Zn', colors.blue],
                            ['14', '4', '31', 'Ga', colors.yellow],
                            ['15', '4', '32', 'Ge', colors.yellow],
                            ['16', '4', '33', 'As', colors.yellow],
                            ['17', '4', '34', 'Se', colors.yellow],
                            ['18', '4', '35', 'Br', colors.yellow],
                            ['19', '4', '36', 'Kr', colors.yellow],
                            ['1', '5', '37', 'Rb', colors.red],
                            ['2', '5', '38', 'Sr', colors.red],
                            ['4', '5', '39', 'Y', colors.blue],
                            ['5', '5', '40', 'Zr', colors.blue],
                            ['6', '5', '41', 'Nb', colors.blue],
                            ['7', '5', '42', 'Mo', colors.blue],
                            ['8', '5', '43', 'Tc', colors.blue],
                            ['9', '5', '44', 'Ru', colors.blue],
                            ['10', '5', '45', 'Rh', colors.blue],
                            ['11', '5', '46', 'Pd', colors.blue],
                            ['12', '5', '47', 'Ag', colors.blue],
                            ['13', '5', '48', 'Cd', colors.blue],
                            ['14', '5', '49', 'In', colors.yellow],
                            ['15', '5', '50', 'Sn', colors.yellow],
                            ['16', '5', '51', 'Sb', colors.yellow],
                            ['17', '5', '52', 'Te', colors.yellow],
                            ['18', '5', '53', 'I', colors.yellow],
                            ['19', '5', '54', 'Xe', colors.yellow],
                            ['1', '6', '55', 'Cs', colors.red],
                            ['2', '6', '56', 'Ba', colors.red],
                            ['4', '9', '57', 'La', colors.green],
                            ['5', '9', '58', 'Ce', colors.green],
                            ['6', '9', '59', 'Pr', colors.green],
                            ['7', '9', '60', 'Nd', colors.green],
                            ['8', '9', '61', 'Pm', colors.green],
                            ['9', '9', '62', 'Sm', colors.green],
                            ['10', '9', '63', 'Eu', colors.green],
                            ['11', '9', '64', 'Gd', colors.green],
                            ['12', '9', '65', 'Tb', colors.green],
                            ['13', '9', '66', 'Dy', colors.green],
                            ['14', '9', '67', 'Ho', colors.green],
                            ['15', '9', '68', 'Er', colors.green],
                            ['16', '9', '69', 'Tm', colors.green],
                            ['17', '9', '70', 'Yb', colors.green],
                            ['4', '6', '71', 'Lu', colors.blue],
                            ['5', '6', '72', 'Hf', colors.blue],
                            ['6', '6', '73', 'Ta', colors.blue],
                            ['7', '6', '74', 'W', colors.blue],
                            ['8', '6', '75', 'Re', colors.blue],
                            ['9', '6', '76', 'Os', colors.blue],
                            ['10', '6', '77', 'Ir', colors.blue],
                            ['11', '6', '78', 'Pt', colors.blue],
                            ['12', '6', '79', 'Au', colors.blue],
                            ['13', '6', '80', 'Hg', colors.blue],
                            ['14', '6', '81', 'Tl', colors.yellow],
                            ['15', '6', '82', 'Pb', colors.yellow],
                            ['16', '6', '83', 'Bi', colors.yellow],
                            ['17', '6', '84', 'Po', colors.yellow],
                            ['18', '6', '85', 'At', colors.yellow],
                            ['19', '6', '86', 'Rn', colors.yellow],
                            ['1', '7', '87', 'Fr', colors.red],
                            ['2', '7', '88', 'Ra', colors.red],
                            ['4', '10', '89', 'Ac', colors.green],
                            ['5', '10', '90', 'Th', colors.green],
                            ['6', '10', '91', 'Pa', colors.green],
                            ['7', '10', '92', 'U', colors.green],
                            ['8', '10', '93', 'Np', colors.green],
                            ['9', '10', '94', 'Pu', colors.green],
                            ['10', '10', '95', 'Am', colors.green],
                            ['11', '10', '96', 'Cm', colors.green],
                            ['12', '10', '97', 'Bk', colors.green],
                            ['13', '10', '98', 'Cf', colors.green],
                            ['14', '10', '99', 'Es', colors.green],
                            ['15', '10', '100', 'Fm', colors.green],
                            ['16', '10', '101', 'Md', colors.green],
                            ['17', '10', '102', 'No', colors.green],
                            ['4', '7', '103', 'Lr', colors.blue],
                            ['5', '7', '104', 'Rf', colors.blue],
                            ['6', '7', '105', 'Db', colors.blue],
                            ['7', '7', '106', 'Sg', colors.blue],
                            ['8', '7', '107', 'Bh', colors.blue],
                            ['9', '7', '108', 'Hs', colors.blue],
                            ['10', '7', '109', 'Mt', colors.blue],
                            ['11', '7', '110', 'Ds', colors.blue],
                            ['12', '7', '111', 'Rg', colors.blue],
                            ['13', '7', '112', 'Cn', colors.blue],
                            ['14', '7', '113', 'Nh', colors.yellow],
                            ['15', '7', '114', 'Fl', colors.yellow],
                            ['16', '7', '115', 'Mc', colors.yellow],
                            ['17', '7', '116', 'Lv', colors.yellow],
                            ['18', '7', '117', 'Ts', colors.yellow],
                            ['19', '7', '118', 'Og', colors.yellow],

                            ['3', '6', null, 'La~Yb', colors.green],
                            ['3', '7', null, 'Ac~No', colors.green],
                        ],
                        label: {
                            show: true,
                            formatter: params => {
                                if (params.value[2] == null) {
                                    return '{small|' + params.value[3] + '}';
                                }
                                return params.value[2] + '\n' + params.value[3];
                            },
                            rich: {
                                small: {
                                    fontSize: 12,
                                    color: '#777'
                                }
                            },
                            textStyle: {
                                fontSize: 14,
                                color: '#555',
                                align: 'center'
                            }
                        },
                        renderItem: function (params, api) {
                            const x = api.value(0);
                            const y = api.value(1);
                            const rect = api.layout([x, y]).rect;
                            const isElement = !isNaN(api.value(2));
                            const margin = 2;
                            return {
                                type: 'rect',
                                shape: {
                                    x: rect.x + margin,
                                    y: rect.y + margin,
                                    width: rect.width - margin * 2,
                                    height: rect.height - margin * 2
                                },
                                style: api.style({
                                    fill: api.value(4),
                                    stroke: '#aaa',
                                    lineWidth: isElement ? 1 : 0,
                                    opacity: isElement ? 1 : 0.5
                                }),
                            }
                        }
                    }
                };

                var chart = testHelper.create(echarts, 'main4', {
                    title: [
                        'Periodic Table'
                    ],
                    option: option,
                    height: 600
                });

                if (!chart) {
                    return;
                }

                const elements = [
                    ['2', '9', 'Lanthanides', 20],
                    ['2', '10', 'Actinides', 20],
                    ['1', '1', 'Nonmetals', -70],
                    ['1', '2', 'Metals', -70],
                    ['19', '1', 'Noble gases', 0, -40],
                    ['9', '3', 'Transition metals\n(somtimes excl. group 12)', -25],
                    ['1', '8', 's-block\n(incl. He)', 20, -3],
                    ['3', '8', 'f-block', 0, -10],
                    ['9', '8', 'd-block', -25, -10],
                    ['17', '8', 'p-block (excl. He)', -25, -10],
                    ['16', '1', 'Some elements near\nthe dashed staircase are\nsometimes called metalloids']
                ].map(row => {
                    const center = chart.convertToPixel({
                        matrixIndex: 0
                    }, row.slice(0, 2));
                    return {
                        type: 'text',
                        style: {
                            text: row[2],
                            fill: '#333',
                            font: 'italic bold 14px sans-serif',
                            textAlign: 'center',
                            textVerticalAlign: 'middle'
                        },
                        x: center[0] + (row[3] || 0),
                        y: center[1] + (row[4] || 0),
                    };
                });

                chart.setOption({
                    graphic: {
                        elements
                    }
                });
            });
        </script>


        <script>
            require([
                'echarts',
            ], function (echarts) {

                const _matrixDimensionData = {
                    x: [
                        'Mon', 'Tue', 'Wed', 'Thu', 'Fri'
                    ],
                    y: [
                        '8:00 - 10:00',
                        '10:00 - 12:00',
                        '12:00 - 14:00',
                        '14:00 - 16:00',
                        '16:00 - 18:00',
                        '18:00 - 20:00',
                    ]
                };
                const _yBreakTimeIndex = 2; // '12:00 - 14:00',

                function eachMatrixCell(cb) {
                    _matrixDimensionData.y.forEach((yval, yidx) => {
                        if (yidx === _yBreakTimeIndex) {
                            return;
                        }
                        _matrixDimensionData.x.forEach((xval, xidx) => {
                            cb(xval, yval, xidx, yidx);
                        });
                    });
                }

                function generateSeriesData(dayCount) {
                    const dataSource = {};
                    let allDataMax = 0;
                    let allDataMin = 0;

                    eachMatrixCell((xval, yval, xidx, yidx) => {
                        const dayStart = new Date('2025-05-05T00:00:00.000Z'); // Monday
                        dayStart.setDate(xidx + 5);
                        const timeStart = dayStart.getTime();
                        const sevenDay = 7 * 1000 * 3600 * 24;
                        const cellData = dataSource[makeId(xidx, yidx)] = [];
                        let lastVal = +(Math.random() * 300).toFixed(0);

                        let turnCount = null;
                        let sign = -1;
                        for (let idx = 0; idx < dayCount; idx++) {

                            if (turnCount == null || idx >= turnCount) {
                                turnCount = idx + Math.round(dayCount / 4 * ((Math.random() - 0.5) * 0.1));
                                sign = -sign;
                            }
                            const deltaMag = 50;
                            const delta = +(Math.random() * deltaMag - deltaMag / 2 + sign * deltaMag / 3).toFixed(0);
                            const val = Math.max(0, lastVal += delta);
                            const xTime = timeStart + idx * sevenDay;
                            const dataXVal = echarts.time.format(xTime, '{yyyy}-{MM}-{dd}');
                            cellData.push([dataXVal, val]);
                            allDataMax = Math.max(val, allDataMax);
                        }
                    });

                    const {axisMin, axisMax} = uniformAxisMinMax([allDataMin, allDataMax]);
                    return {dataSource, axisMax, axisMin};
                }

                function uniformAxisMinMax(dataExtent) {
                    if (dataExtent[0] > dataExtent[1]) {
                        dataExtent = dataExtent.slice();
                        dataExtent.reverse();
                    }
                    function getMinMax(idx) {
                        const methods = ['floor', 'ceil'];
                        const exponent = echarts.number.quantityExponent(dataExtent[idx]);
                        const multiplier = Math.pow(10, exponent);
                        return Math[methods[idx]](dataExtent[idx] / multiplier) * multiplier;
                    }
                    return {
                        axisMin: getMinMax(0),
                        axisMax: getMinMax(1),
                    };
                }

                const _data = generateSeriesData(365);

                function makeId(xidx, yidx) {
                    return `${xidx}|${yidx}`;
                }

                const option = {
                    matrix: {
                        x: {
                            data: _matrixDimensionData.x,
                            label: {
                                fontSize: 18,
                                color: '#555'
                            },
                        },
                        y: {
                            data: _matrixDimensionData.y,
                            label: {
                                fontSize: 16,
                                color: '#777'
                            },
                        },
                        corner: {
                            data: [{
                                coord: [-1, -1],
                                value: 'Time',
                            }],
                            label: {
                                fontSize: 16,
                                color: '#777'
                            },
                        },
                        body: {
                            data: [{
                                coord: [null, _yBreakTimeIndex],
                                mergeCells: true,
                                value: 'Break',
                                label: {
                                    color: '#999',
                                    fontSize: 16,
                                }
                            }],
                        },
                        top: 30,
                        bottom: 80,
                        width: '80%',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: (function () {
                        const optionList = [];
                        eachMatrixCell((xval, yval, xidx, yidx) => {
                            optionList.push({
                                id: makeId(xidx, yidx),
                                coordinateSystem: 'matrix',
                                coord: [xval, yval],
                                top: 10,
                                bottom: 10,
                                left: 'center',
                                width: '90%',
                                containLabel: true,
                            });
                        });
                        return optionList;
                    })(),
                    xAxis: (function () {
                        const optionList = [];
                        eachMatrixCell((xval, yval, xidx, yidx) => {
                            optionList.push({
                                type: 'category',
                                id: makeId(xidx, yidx),
                                gridId: makeId(xidx, yidx),
                                scale: true,
                                axisTick: {show: false},
                                axisLabel: {show: false},
                                axisLine: {show: false},
                                splitLine: {show: false},
                            });
                        });
                        return optionList;
                    })(),
                    yAxis: (function () {
                        const optionList = [];
                        eachMatrixCell((xval, yval, xidx, yidx) => {
                            optionList.push({
                                id: makeId(xidx, yidx),
                                gridId: makeId(xidx, yidx),
                                // interval: _data.axisMax - _data.axisMin,
                                interval: Number.MAX_SAFE_INTEGER,
                                // min: _data.axisMin,
                                // max: _data.axisMax,
                                scale: true,
                                axisLabel: {
                                    showMaxLabel: true,
                                    fontSize: 9,
                                },
                                axisLine: {show: false},
                                axisTick: {show: false},
                            });
                        });
                        return optionList;
                    })(),
                    dataZoom: {
                        type: 'slider',
                        xAxisIndex: 'all',
                        left: '10%',
                        right: '10%',
                        bottom: 30,
                        height: 30,
                        throttle: 120,
                    },
                    series: (function () {
                        const optionList = [];
                        eachMatrixCell((xval, yval, xidx, yidx) => {
                            optionList.push({
                                xAxisId: makeId(xidx, yidx),
                                yAxisId: makeId(xidx, yidx),
                                type: 'line',
                                symbol: 'none',
                                lineStyle: {
                                    lineWidth: 1,
                                },
                                data: _data.dataSource[makeId(xidx, yidx)],
                            });
                        });
                        return optionList;
                    })(),
                };

                var chart = testHelper.create(echarts, 'main_tiny_cartesians', {
                    title: [
                        'Cartesians in matrix'
                    ],
                    option: option,
                    height: 500,
                });
            });

        </script>







        <script>
            require([
                'echarts',
            ], function (echarts) {

                const _contentDefList = [{
                    option: {
                        title: {
                            id: 'header_1',
                            text: 'Header section',
                            textStyle: {fontSize: 14},
                            left: 'center',
                            top: 15,
                        },
                        xAxis: {
                            type: 'time',
                            id: 'header_1',
                            gridId: 'header_1',
                        },
                        yAxis: {
                            id: 'header_1',
                            gridId: 'header_1',
                        },
                        grid: {
                            id: 'header_1',
                            containLabel: true,
                            top: 50,
                            bottom: 10,
                            left: 10,
                            right: 10,
                        },
                        series: {
                            type: 'line',
                            id: 'header_1',
                            xAxisId: 'header_1',
                            yAxisId: 'header_1',
                            symbol: 'none',
                            data: generateSingleSeriesData(100),
                        },
                    },
                }, {
                    option: {
                        title: {
                            id: 'sidebar_1',
                            text: 'Sidebar section',
                            textStyle: {fontSize: 14},
                            left: 'center',
                            top: 15,
                        },
                        xAxis: {
                            id: 'sidebar_1',
                            gridId: 'sidebar_1',
                            axisLabel: {
                                hideOverlap: true,
                            },
                        },
                        yAxis: {
                            type: 'time',
                            id: 'sidebar_1',
                            gridId: 'sidebar_1',
                            axisLabel: {
                                hideOverlap: true,
                            },
                        },
                        grid: {
                            id: 'sidebar_1',
                            top: 50,
                            bottom: 30,
                            left: 40,
                            right: 30,
                        },
                        series: {
                            type: 'bar',
                            id: 'sidebar_1',
                            xAxisId: 'sidebar_1',
                            yAxisId: 'sidebar_1',
                            data: generateSingleSeriesData(10, true),
                        },
                    },
                }, {
                    option: {
                        title: {
                            id: 'main_content_area_1',
                            text: 'Main Content Area',
                            textStyle: {fontSize: 14},
                            left: 'center',
                            top: 15,
                        },
                        xAxis: {
                            type: 'time',
                            id: 'main_content_area_1',
                            gridId: 'main_content_area_1',
                        },
                        yAxis: {
                            id: 'main_content_area_1',
                            gridId: 'main_content_area_1'
                        },
                        grid: {
                            id: 'main_content_area_1',
                            containLabel: true,
                            top: 50,
                            bottom: 10,
                            left: 10,
                            right: 10,
                        },
                        series: {
                            type: 'line',
                            id: 'main_content_area_1',
                            xAxisId: 'main_content_area_1',
                            yAxisId: 'main_content_area_1',
                            symbol: 'none',
                            data: generateSingleSeriesData(100),
                        },
                    },
                }, {
                    option: {
                        title: {
                            id: 'footer_1',
                            text: 'Footer section',
                            textStyle: {fontSize: 14},
                            left: 'center',
                            top: 15,
                        },
                        xAxis: {
                            type: 'time',
                            id: 'footer_1',
                            gridId: 'footer_1',
                        },
                        yAxis: {
                            id: 'footer_1',
                            gridId: 'footer_1'
                        },
                        grid: {
                            id: 'footer_1',
                            containLabel: true,
                            top: 50,
                            bottom: 10,
                            left: 10,
                            right: 10,
                        },
                        series: {
                            type: 'bar',
                            id: 'footer_1',
                            xAxisId: 'footer_1',
                            yAxisId: 'footer_1',
                            data: generateSingleSeriesData(10),
                        },
                    },
                }];

                const _option = {
                    matrix: {
                        x: {show: false, data: []},
                        y: {show: false, data: []},
                        body: {
                            itemStyle: {borderColor: 'none'}
                        },
                        top: 0,
                        bottom: 0,
                        left: 0,
                        right: 0,
                    },
                    tooltip: {
                        trigger: 'axis',
                    },

                    media: (function () {
                        const mediaList = [{
                            query: {maxWidth: 500},
                            matrix: {
                                x: {data: Array(1).fill(null)},
                                y: {data: Array(4).fill(null)},
                            },
                            coordList: [{
                                id: 'header_1',
                                coord: [0, 0],
                            }, {
                                id: 'sidebar_1',
                                coord: [0, 1],
                            }, {
                                id: 'main_content_area_1',
                                coord: [0, 2],
                            }, {
                                id: 'footer_1',
                                coord: [0, 3],
                            }]
                        }, {
                            // default with no query,
                            matrix: {
                                x: {data: Array(4).fill(null)},
                                y: {data: Array(3).fill(null)},
                            },
                            coordList: [{
                                id: 'header_1',
                                coord: [[0, 3], 0],
                            }, {
                                id: 'sidebar_1',
                                coord: [0, [1, 2]],
                            }, {
                                id: 'main_content_area_1',
                                coord: [[1, 3], 1],
                            }, {
                                id: 'footer_1',
                                coord: [[1, 3], 2],
                            }]
                        }];

                        const mediaOption = mediaList.map(({query, matrix, coordList}) => ({
                            query,
                            option: {
                                matrix: matrix,
                                title: coordList.map(({id, coord}) => ({id, coord, coordinateSystem: 'matrix'})),
                                grid: coordList.map(({id, coord}) => ({id, coord, coordinateSystem: 'matrix'})),
                            },
                        }));
                        console.log('mediaOption', mediaOption);
                        return mediaOption;
                    })(),

                    // Other components and series:
                    ...(function () {
                        const partialOption = {};
                        for (const def of _contentDefList) {
                            if (!def.option) {
                                continue;
                            }
                            Object.keys(def.option).forEach(componentName => {
                                partialOption[componentName] = partialOption[componentName] || [];
                                if (Array.isArray(def.option[componentName])) {
                                    partialOption[componentName] =
                                        partialOption[componentName].concat(def.option[componentName]);
                                }
                                else {
                                    partialOption[componentName].push(def.option[componentName]);
                                }
                            })
                        }
                        return partialOption;
                    })()
                }; // End of _option

                console.log(_option);

                function generateSingleSeriesData(dayCount, inverseXY) {
                    const dayStart = new Date('2025-05-05T00:00:00.000Z'); // Monday
                    const timeStart = dayStart.getTime();
                    const sevenDay = 7 * 1000 * 3600 * 24;
                    const seriesData = [];
                    let lastVal = +(Math.random() * 300).toFixed(0);

                    let turnCount = null;
                    let sign = -1;
                    for (let idx = 0; idx < dayCount; idx++) {
                        if (turnCount == null || idx >= turnCount) {
                            turnCount = idx + Math.round(dayCount / 4 * ((Math.random() - 0.5) * 0.1));
                            sign = -sign;
                        }
                        const deltaMag = 50;
                        const delta = +(Math.random() * deltaMag - deltaMag / 2 + sign * deltaMag / 3).toFixed(0);
                        const val = Math.max(0, lastVal += delta);
                        const xTime = timeStart + idx * sevenDay;
                        const dataXVal = echarts.time.format(xTime, '{yyyy}-{MM}-{dd}');
                        const item = [dataXVal, val];
                        if (inverseXY) {
                            item.reverse();
                        }
                        seriesData.push(item);
                    }

                    return seriesData;
                }

                var chart = testHelper.create(echarts, 'main_grid_layout', {
                    title: [
                        'Responsive grid layout',
                        'Using media query; resize to change the layout',
                    ],
                    option: _option,
                    width: 700,
                    height: 400,
                    inputsStyle: 'compact',
                    draggable: true,
                    inputs: [{
                        type: 'select',
                        text: 'show frame lines:',
                        values: [false, true],
                        onchange() {
                            const shouldShow = this.value;
                            chart.setOption({
                                matrix: {
                                    body: {itemStyle: {borderColor: shouldShow ? '#ccc' : 'none'}}
                                }
                            });
                        }
                    }]
                });
            });

        </script>






    </body>
</html>