test/matrix.html - master - githubmirror/echarts

test/matrix.html
808 строк27 KB
100pah
test regression: fix recent broken.
02 апр 2026, 23:16
02 апр 2026, 23:161e6a16f
<!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="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>



        <div id="main0"></div>
        <div id="main0-1"></div>
        <div id="main0-2"></div>
        <div id="main-dark"></div>
        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main4"></div>
        <div id="main_collect"></div>
        <div id="main_series_data_use_ordinal_number"></div>
        <div id="main_x_y_length"></div>
        <div id="main_events_on_text"></div>





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

            option = {
                matrix: {
                    x: {
                        data: [{
                            value: 'A',
                            children: ['A1', 'A2', {
                                value: 'A3',
                                children: ['A31', 'A32']
                            }]
                        }],
                    },
                    y: {
                        data: ['U', 'V', 'W']
                    },
                    body: {
                        itemStyle: {
                            // borderColor: '#333',
                        },
                        data: [{
                            coord: [['A2', 'A31', 'A32'], 'V'],
                            mergeCells: true,
                        }, {
                            coord: [null, 'W'],
                            clamp: true,
                            mergeCells: true,
                        }]
                    }
                },
                textStyle: {
                    fontSize: 25,
                    color: 'red'
                },
                visualMap: {
                    type: 'continuous',
                    min: 0,
                    max: 80,
                    top: 'middle',
                    dimension: 2,
                    color: ['rgba(100,204,105,0.4)', 'rgba(3,4,5,0.4)'],
                    calculable: true
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'matrix',
                    itemStyle: {
                        borderRadius: 10,
                    },
                    data: [
                        ['A1', 'U', 10], ['A1', 'V', 200], ['A2', 'U', 300],
                        ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60], ['A1', 'W', 80]
                    ],
                    label: {
                        show: true
                    }
                }
            };

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


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

            option = {
                matrix: {
                    x: {
                        show: false,
                        data: [{
                            value: 'A',
                            children: ['A1', 'A2', {
                                value: 'A3',
                                children: ['A31', 'A32']
                            }]
                        }]
                    },
                    y: {
                        show: false,
                        data: ['U', 'V']
                    }
                },
                visualMap: {
                    type: 'continuous',
                    min: 0,
                    max: 80,
                    top: 'middle',
                    dimension: 2,
                    calculable: true
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'matrix',
                    data: [
                        ['A1', 'U', 10], ['A1', 'V', 20], ['A2', 'U', 30],
                        ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60]
                    ],
                    label: {
                        show: true
                    }
                }
            };

            var chart = testHelper.create(echarts, 'main0-1', {
                title: [
                    'no header',
                    'x.show: false, y.show: false'
                ],
                option: option
            });
        });
        </script>


        <script>
        require([
            'echarts',
            // 'map/js/china',
            // './data/nutrients.json'
        ], function (echarts) {
            var option;

            option = {
                dataset: {
                    source: [
                        ['A1', 'U', 10], ['A1', 'V', 20], ['A2', 'U', 30],
                        ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60]
                    ]
                },
                matrix: {
                    x: {
                        data: [{
                            value: 'A',
                            children: ['A1', 'A2', {
                                value: 'A3',
                                children: ['A31', 'A32']
                            }]
                        }]
                    },
                    y: {
                        data: ['U', 'V']
                    }
                },
                visualMap: {
                    type: 'continuous',
                    min: 0,
                    max: 80,
                    top: 'middle',
                    dimension: 2,
                    calculable: true
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'matrix',
                    label: {
                        show: true
                    }
                }
            };

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


        <script>
        require([
            'echarts',
            // 'map/js/china',
            // './data/nutrients.json'
        ], function (echarts) {
            var option;

            option = {
                dataset: {
                    source: []
                },
                matrix: {
                    x: {
                        data: [{
                            value: 'A',
                            children: ['A1', 'A2', {
                                value: 'A3',
                                children: ['A31', 'A32']
                            }]
                        }]
                    },
                    y: {
                        data: ['U', 'V']
                    }
                },
                visualMap: {
                    type: 'continuous',
                    min: 0,
                    max: 80,
                    top: 'middle',
                    dimension: 2,
                    calculable: true
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'matrix',
                    label: {
                        show: true
                    }
                }
            };

            var chart = testHelper.create(echarts, 'main-dark', {
                title: [
                    'Matrix with darkMode'
                ],
                option: option,
                theme: 'dark'
            });
        });
        </script>






        <script>
            require([
                'echarts',
                // 'map/js/china',
                // './data/nutrients.json'
            ], function (echarts) {
                var option;
                option = {
                    matrix: {
                        x: {
                            data: [{
                                value: 'A',
                                children: ['A1', 'A2', {
                                    value: 'A3',
                                    children: ['A31', 'A32']
                                }]
                            }]
                        },
                        y: {
                            data: ['U', 'V']
                        }
                    },
                    series: [{
                        type: 'pie',
                        coordinateSystem: 'matrix',
                        center: ['A1', 'U'],
                        radius: 18,
                        data: [
                            {
                                value: 12,
                                name: 'x'
                            }, {
                                value: 24,
                                name: 'y'
                            }, {
                                value: 23,
                                name: 'z'
                            }
                        ],
                        label: {
                            show: true
                        }
                    }, {
                        type: 'pie',
                        coordinateSystem: 'matrix',
                        center: ['A31', 'V'],
                        radius: 18,
                        data: [
                            {
                                value: 18,
                                name: 'x'
                            }, {
                                value: 44,
                                name: 'y'
                            }, {
                                value: 43,
                                name: 'z'
                            }
                        ],
                        label: {
                            show: true
                        }
                    }]
                };

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






        <script>
            require([
                'echarts',
            ], function (echarts) {
                var option;
                option = {
                    matrix: {
                        x: {
                            data: [{
                                value: 'A',
                                children: ['A1', 'A2', {
                                    value: 'A3',
                                    children: ['A31', 'A32']
                                }]
                            }]
                        },
                        y: {
                            data: ['U', 'V']
                        },
                        body: {
                            data: [{
                                // coord: ['A31', 'V']
                                coord: ['A3', 'V'],
                                mergeCells: true,
                            }]
                        }
                    },
                    series: [{
                        type: 'graph',
                        coordinateSystem: 'matrix',
                        edgeSymbol: ['none', 'arrow'],
                        symbolSize: 30,
                        links: [{
                            source: 0,
                            target: 1
                        }, {
                            source: 1,
                            target: 2
                        }],
                        data: [
                            ['A1', 'U', 10], ['A1', 'V', 20], ['A2', 'U', 30],
                            ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60]
                        ],
                        label: {
                            show: true,
                            formatter: params => {
                                return params.data[2];
                            }
                        }
                    }]
                };

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




        <script>
            require([
                'echarts',
            ], function (echarts) {
                var option;
                option = {
                    matrix: {
                        x: {
                            data: [{
                                value: 'A',
                                children: ['A1', 'A2', {
                                    value: 'A3',
                                    children: ['A31', 'A32']
                                }]
                            }]
                        },
                        y: {
                            data: ['U', 'V']
                        }
                    },
                    series: [{
                        type: 'custom',
                        coordinateSystem: 'matrix',
                        data: [
                            ['A1', 'U', 89, '😄'], ['A31', 'V', 95, '😍'], ['A2', 'U', 45, '😠']
                        ],
                        encode: {
                            x: 0,
                            y: 1,
                            value: 2,
                            label: 3
                        },
                        renderItem: function (params, api) {
                            const x = api.value(0);
                            const y = api.value(1);
                            const rect = api.layout([x, y]).rect;
                            const fontSize = 20;
                            const padding = 10;
                            const value = api.value(2);
                            return {
                                type: 'group',
                                children: [{
                                    type: 'rect',
                                    shape: {
                                        x: rect.x + padding,
                                        y: rect.y + padding,
                                        width: (rect.width - padding * 2) / 100 * value,
                                        height: rect.height - padding * 2
                                    },
                                    style: {
                                        fill: value > 90 ? 'green'
                                            : value > 60 ? 'orange'
                                                : 'red',
                                    }
                                }, {
                                    type: 'text',
                                    style: {
                                        x: rect.x + (rect.width - padding * 2) / 100 * value - padding,
                                        y: rect.y + rect.height / 2 - fontSize / 2,
                                        text: api.value(3),
                                        fontSize: fontSize,
                                        textBaseline: 'middle',
                                        textAlign: 'center'
                                    }
                                }, {
                                    type: 'text',
                                    style: {
                                        x: rect.x + 30,
                                        y: rect.y + rect.height / 2 - fontSize / 2,
                                        text: api.value(2),
                                        fontSize: fontSize,
                                        textBaseline: 'middle',
                                        textAlign: 'center',
                                        fill: 'white'
                                    }
                                }]
                            };
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main4', {
                    title: [
                        'Custom series with Matrix'
                    ],
                    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', 'amount', 1212, 'file', 2321, 'Q', 1412],
                            ['2021-02-02', 'amount', 7181, 'file', 2114, 'Q', 1402],
                            ['2021-02-03', 'amount', 2763, 'file', 4212, 'Q', 8172],
                            ['2021-02-04', 'amount', 6122, 'file', 2942, 'Q', 6121],
                            ['2021-02-05', 'amount', 4221, 'file', 3411, 'Q', 1987],
                            ['2021-02-06', 'amount', 7221, 'file', 5121, 'Q', 1303],
                        ]
                    },
                    matrix: {},
                    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, 'main_collect', {
                    title: [
                        'No matrix.x.data, matrix.y.data declared, collect form dataset.'
                    ],
                    option: option
                });
            });
        </script>






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

                var option = {
                    matrix: {
                        x: {data: ['fruit', 'bread', 'milk']},
                        y: {data: ['good', 'medium', 'bad']},
                    },
                    series: {
                        type: 'scatter',
                        coordinateSystem: 'matrix',
                        label: {show: true},
                        encode: {label: 2},
                        symbolSize: 20,
                        data: [
                            [0, 0, 1223],
                            [1, 0, 323],
                            [2, 0, 142],
                            [0, 1, 63],
                            [1, 1, 91],
                            [2, 1, 45],
                            [0, 2, 55],
                            [1, 2, 15],
                            [2, 2, 53],
                        ]
                    }
                };

                var chart = testHelper.create(echarts, 'main_series_data_use_ordinal_number', {
                    title: [
                        'series.data specify ordinal number rather than text'
                    ],
                    option: option
                });
            });
        </script>




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

                var option = {
                    matrix: {
                        x: {length: 4},
                        y: {length: 3},
                    },
                    series: {
                        type: 'scatter',
                        coordinateSystem: 'matrix',
                        label: {show: true},
                        encode: {label: 2},
                        symbolSize: 20,
                        data: [
                            [0, 0, 1223],
                            [1, 0, 323],
                            [2, 0, 142],
                            [0, 1, 63],
                            [1, 1, 91],
                            [2, 1, 45],
                            [0, 2, 55],
                            [1, 2, 15],
                            [2, 2, 53],
                        ]
                    }
                };

                var chart = testHelper.create(echarts, 'main_x_y_length', {
                    title: [
                        'matrix.x/y.length'
                    ],
                    option: option
                });
            });
        </script>




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

                var option = {
                    matrix: {
                        x: {data: ['A', 'B', 'C']},
                        y: {data: ['U', 'V', 'W']},
                        body: {
                            data: [
                                {coord: [0, 0], value: 1 },
                                {coord: [0, 1], value: 2 },
                                {coord: [0, 2], value: 3 },
                                {coord: [1, 0], value: 4 },
                                {coord: [1, 1], value: 5, itemStyle: {color: 'orange'} },
                                {coord: [1, 2], value: 6 },
                                {coord: [2, 0], value: null },
                                {coord: [2, 1], value: null },
                                {coord: [2, 2], value: null },
                            ],
                        },
                        corner: {
                            data: [
                                {coord: [-1, -1], value: 'Corner' },
                            ],
                        },
                        triggerEvent: true,
                    },
                };

                var chart = testHelper.create(echarts, 'main_events_on_text', {
                    title: [
                        'Events on matrix cell text'
                    ],
                    option: option,
                    inputsStyle: 'compact',
                    inputs: [{
                        type: 'select',
                        text: 'matrix.body.silent:',
                        values: [undefined, true, false],
                        onchange: function (value) {
                            chart.setOption({
                                matrix: {
                                    body: {
                                        silent: this.value,
                                    }
                                }
                            });
                        }
                    }, {
                        type: 'select',
                        text: 'matrix.body.label.silent:',
                        values: [undefined, true, false],
                        onchange: function (value) {
                            chart.setOption({
                                matrix: {
                                    body: {
                                        label: {
                                            silent: this.value,
                                        }
                                    }
                                }
                            });
                        }
                    }]
                });

                // Create event display div
                var eventDisplay = document.createElement('div');
                eventDisplay.style.cssText = 'padding: 8px';
                eventDisplay.textContent = 'Click on any cell to see event data';

                var chartContainer = document.getElementById('main_events_on_text');
                chartContainer.parentNode.insertBefore(eventDisplay, chartContainer);

                chart.on('click', function (params) {

                    var eventInfo = {
                        componentType: params.componentType,
                        coord: params.coord,
                        name: params.name,
                        targetType: params.targetType,
                    };

                    eventDisplay.textContent = 'Clicked: ' + JSON.stringify(eventInfo);
                    eventDisplay.style.color = '';
                });

            });
        </script>




    </body>
</html>