test/custom-shape-morphing3.html - master - githubmirror/echarts

test/custom-shape-morphing3.html
419 строк17 KB
Ovilia
test(theme): fix test cases of v6
30 май 2025, 13:06
30 май 2025, 13:06c448109
<!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/testHelper.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <div id="main0"></div>



        <script>

        require([
            'echarts', 'ecStat', 'ecSimpleTransform', 'ecSimpleOptionPlayer',
            'data/life-expectancy-table.json'
        ], function (echarts, ecStat, ecSimpleTransform, ecSimpleOptionPlayer, rawData) {

            echarts.registerTransform(ecSimpleTransform.aggregate);
            echarts.registerTransform(ecSimpleTransform.id);

            const COLORS = [
                '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
            ];
            var COUNTRY_A = 'Germany';
            var COUNTRY_B = 'France';
            const CONTENT_COLORS = {
                [COUNTRY_A]: '#37a354',
                [COUNTRY_B]: '#e06343'
            };
            const Z2 = {
                [COUNTRY_A]: 1,
                [COUNTRY_B]: 2
            }

            // const COLORS = [
            //     {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
            //     {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
            //     {name: 'Population', index: 2, text: '总人口', unit: ''},
            //     {name: 'Country', index: 3, text: '国家', unit: ''}
            // ];

            var RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'];
            var ID_RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year', 'Id'];
            var SUM_INCOME_DIMENSIONS = ['Income', 'Country'];
            var ANIMATION_DURATION_UPDATE = 1000;
            var AXIS_NAME_STYLE = {
                nameGap: 25,
                nameTextStyle: {
                    fontSize: 20
                },
            };

            var baseOption = {
                animationDurationUpdate: ANIMATION_DURATION_UPDATE,
                dataset: [{
                    id: 'RawData',
                    source: rawData
                }, {
                    id: 'IdRawData',
                    fromDatasetId: 'RawData',
                    transform: [{
                        type: 'filter',
                        config: {
                            dimension: 'Year', gte: 1950
                        }
                    }, {
                        type: 'ecSimpleTransform:id',
                        config: {
                            dimensionIndex: ID_RAW_DATA_DIMENSIONS.indexOf('Id'),
                            dimensionName: 'Id'
                        }
                    }]
                }, {
                    id: 'CountryABData',
                    fromDatasetId: 'IdRawData',
                    transform: {
                        type: 'filter',
                        config: {
                            or: [{
                                dimension: 'Country', '=': COUNTRY_A
                            }, {
                                dimension: 'Country', '=': COUNTRY_B
                            }]
                        }
                    }
                }, {
                    id: 'CountryABSumIncome',
                    fromDatasetId: 'CountryABData',
                    transform: {
                        type: 'ecSimpleTransform:aggregate',
                        config: {
                            resultDimensions: [
                                { from: 'Income', method: 'sum' },
                                { from: 'Country' }
                            ],
                            groupBy: 'Country'
                        }
                    }
                }],
                tooltip: {}
            };

            var optionCreators = {

                'CountryAB_Year_Income_Bar': function (datasetId, onlyCountry) {
                    return {
                        xAxis: {
                            type: 'category'
                        },
                        yAxis: {
                            name: 'Income',
                            ...AXIS_NAME_STYLE
                        },
                        series: {
                            type: 'custom',
                            coordinateSystem: 'cartesian2d',
                            datasetId: datasetId,
                            encode: {
                                x: 'Year',
                                y: 'Income',
                                itemName: 'Year',
                                tooltip: ['Income'],
                            },
                            renderItem: function (params, api) {
                                var valPos = api.coord([api.value('Year'), api.value('Income')]);
                                var basePos = api.coord([api.value('Year'), 0]);
                                var width = api.size([1, 0])[0] * 0.9;

                                var country = api.value('Country');
                                if (onlyCountry != null && onlyCountry !== country) {
                                    return;
                                }

                                return {
                                    type: 'group',
                                    children: [{
                                        type: 'rect',
                                        transition: ['shape', 'style'],
                                        shape: {
                                            x: basePos[0],
                                            y: basePos[1],
                                            width: width,
                                            height: valPos[1] - basePos[1]
                                        },
                                        z2: Z2[country],
                                        style: {
                                            fill: CONTENT_COLORS[country],
                                            opacity: 0.8
                                        }
                                    }]
                                };
                            }
                        }
                    };
                },

                'CountryAB_Year_Population_Bar': function (datasetId, onlyCountry) {
                    return {
                        xAxis: {
                            type: 'category'
                        },
                        yAxis: {
                            name: 'Population',
                            ...AXIS_NAME_STYLE
                        },
                        series: {
                            type: 'custom',
                            coordinateSystem: 'cartesian2d',
                            datasetId: datasetId,
                            encode: {
                                x: 'Year',
                                y: 'Population',
                                itemName: 'Year',
                                tooltip: ['Population'],
                            },
                            renderItem: function (params, api) {
                                var valPos = api.coord([api.value('Year'), api.value('Population')]);
                                var basePos = api.coord([api.value('Year'), 0]);
                                var width = api.size([1, 0])[0] * 0.9;

                                var country = api.value('Country');
                                if (onlyCountry != null && onlyCountry !== country) {
                                    return;
                                }

                                return {
                                    type: 'group',
                                    children: [{
                                        type: 'rect',
                                        transition: ['shape', 'style'],
                                        shape: {
                                            x: basePos[0],
                                            y: basePos[1],
                                            width: width,
                                            height: valPos[1] - basePos[1]
                                        },
                                        style: {
                                            fill: CONTENT_COLORS[country]
                                        }
                                    }]
                                };
                            }
                        }
                    };
                },

                'CountryAB_Income_Population_Scatter': function (datasetId, onlyCountry) {
                    return {
                        xAxis: {
                            name: 'Income',
                            ...AXIS_NAME_STYLE,
                            scale: true
                        },
                        yAxis: {
                            name: 'Population',
                            ...AXIS_NAME_STYLE,
                            scale: true
                        },
                        series: {
                            type: 'custom',
                            coordinateSystem: 'cartesian2d',
                            datasetId: datasetId,
                            encode: {
                                x: 'Income',
                                y: 'Population',
                                itemName: ['Year'],
                                tooltip: ['Income', 'Population', 'Country']
                            },
                            renderItem: function (params, api) {
                                var pos = api.coord([api.value('Income'), api.value('Population')]);

                                var country = api.value('Country');
                                if (onlyCountry != null && onlyCountry !== country) {
                                    return;
                                }

                                return {
                                    type: 'group',
                                    children: [{
                                        type: 'circle',
                                        transition: ['shape', 'style'],
                                        shape: {
                                            cx: pos[0],
                                            cy: pos[1],
                                            r: 10
                                        },
                                        style: {
                                            fill: CONTENT_COLORS[country],
                                            lineWidth: 1,
                                            stroke: '#333',
                                            opacity: 1,
                                            enterFrom: {
                                                opacity: 0
                                            }
                                        }
                                    }]
                                };
                            }
                        }
                    };
                },


                'CountryAB_Income_Sum_Bar': function (datasetId) {
                    return {
                        xAxis: {
                            name: 'Income',
                            ...AXIS_NAME_STYLE
                        },
                        yAxis: {
                            type: 'category'
                        },
                        series: {
                            type: 'custom',
                            coordinateSystem: 'cartesian2d',
                            datasetId: datasetId,
                            encode: {
                                x: 'Income',
                                y: 'Country',
                                itemName: ['Country'],
                                tooltip: ['Income']
                            },
                            renderItem: function (params, api) {
                                var country = api.ordinalRawValue('Country');
                                var valPos = api.coord([api.value('Income'), country]);
                                var basePos = api.coord([0, country]);
                                var height = api.size([0, 1])[1] * 0.4;

                                return {
                                    type: 'group',
                                    children: [{
                                        type: 'rect',
                                        transition: ['shape', 'style'],
                                        shape: {
                                            x: basePos[0],
                                            y: valPos[1] - height / 2,
                                            width: valPos[0] - basePos[0],
                                            height: height
                                        },
                                        style: {
                                            fill: CONTENT_COLORS[country]
                                            // lineWidth: 0,
                                            // stroke: '#333',
                                            // opacity: 1,
                                            // enterFrom: {
                                            //     opacity: 0
                                            // }
                                        }
                                    }]
                                };
                            }
                        }
                    };
                }

            };

            var player = ecSimpleOptionPlayer.create({
                chart: function () {
                    return chart;
                },
                seriesIndex: 0,
                replaceMerge: ['xAxis', 'yAxis'],
                dataMeta: {
                    'IdRawData': {
                        dimensions: ID_RAW_DATA_DIMENSIONS,
                        uniqueDimension: 'Id'
                    },
                    'CountryABData': {
                        dimensions: ID_RAW_DATA_DIMENSIONS,
                        uniqueDimension: 'Id'
                    },
                    'CountryABSumIncome': {
                        dimensions: SUM_INCOME_DIMENSIONS,
                        uniqueDimension: 'Country'
                    }
                },
                optionList: [{
                    dataMetaKey: 'CountryABData',
                    option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData', COUNTRY_A)
                }, {
                    dataMetaKey: 'CountryABData',
                    option: optionCreators['CountryAB_Year_Population_Bar']('CountryABData', COUNTRY_A)
                }, {
                    dataMetaKey: 'CountryABData',
                    option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData', COUNTRY_A)
                }, {
                    dataMetaKey: 'CountryABData',
                    option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData')
                }, {
                    dataMetaKey: 'CountryABSumIncome',
                    option: optionCreators['CountryAB_Income_Sum_Bar']('CountryABSumIncome')
                }, {
                    dataMetaKey: 'CountryABData',
                    option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData')
                }]
            });


            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'Test: buttons, should morph animation merge/split.',
                    'Test: click buttons **before animation finished**, should no blink.',
                    'Test: click buttons **twice**, should no blink.'
                ],
                option: baseOption,
                lazyUpdate: true,
                height: 600,
                buttons: [{
                    text: 'next',
                    onclick: function () {
                        player.next();
                    }
                }, {
                    text: 'previous',
                    onclick: function () {
                        player.previous();
                    }
                }]
            });

            player.next();

        });

        </script>



    </body>
</html>