test/axis-layout-0.html - master - githubmirror/echarts

test/axis-layout-0.html
1 276 строк63 KB
100pah
feat(grid layout): add outerBoundsClamp to limit shrink.
25 июн 2025, 09:02
25 июн 2025, 09:0221d51a5
<!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="axis-layout-0-quick-cases.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            .test-inputs-slider, .test-inputs-select {
                font-size: 12px;
            }
        </style>


        <div id="main_all"></div>


        <script>

            require([
                'echarts'
            ], function (echarts) {

                const _XY_PAIR_INDICES = [0, 1, 2];
                const _XY_AXIS_PAIR_COUNT_LIST = [1, 2, 3];
                const NOT_SET = 'not set';

                // --- option states start ---------------
                let _xyAxisPairCount;
                let _timeStart;
                let _useLazyUpdate;
                let _currNameTextMargin;
                let _currAxisLabelTextMargin;
                let _currOuterBoundsMode;
                let _currXAxisType;
                let _currYAxisType;
                let _currContainLabel;
                function resetOptionStates() {
                    _xyAxisPairCount = 1;
                    _timeStart = Date.now();
                    _useLazyUpdate = false;
                    _currNameTextMargin = [3, 5, 3, 5];
                    _currAxisLabelTextMargin = [0, 3, 0, 3];
                    _currOuterBoundsMode = undefined;
                    _currXAxisType = 'value';
                    _currYAxisType = 'log';
                    _currContainLabel = false;
                }
                resetOptionStates();
                // --- option states end -----------------

                const _initValues = {
                    width: 750,
                    height: 300,
                    allAxis: {
                        axisLine: {
                            onZero: [false, true],
                        },
                        axisLabel: {
                        },
                        nameLocation: ['middle', 'end', 'start'],
                        plainBorderedStyle: {
                            borderWidth: 2,
                            borderColor: 'rgba(0,0,180,0.5)',
                            backgroundColor: 'rgba(0,0,150,0.5)',
                            fontSize: 30,
                            // padding: [10, 20, 30, 40],
                            padding: [10, 20],
                        },
                        plainNormalStyle: {
                            borderWidth: 0,
                            backgroundColor: 'transparent',
                            fontSize: 12,
                            padding: 0,
                        },
                    },
                    xAxis: {
                        position: ['bottom', 'top'],
                        nameRotate: 0,
                        axisLabel: {
                        },
                    },
                    yAxis: {
                        position: ['left', 'right'],
                        nameRotate: 0,
                        axisLabel: {
                        },
                    },
                    grid: {
                        left: 10,
                        right: 10,
                        top: 30,
                        bottom: 10,
                        outerBounds: {
                            left: 5,
                            right: 5,
                            top: 5,
                            bottom: 5,
                        },
                    }
                };

                const _gridBoxIndicatorShapeOptions = {};
                const _gridOuterBoundsIndicatorShapeOptions = {};
                resetGridBoxIndicatorShapeOptions();
                resetGridOuterBoundsIndicatorShapeOptions();

                function resetGridBoxIndicatorShapeOptions() {
                    _gridBoxIndicatorShapeOptions.left = _initValues.grid.left;
                    _gridBoxIndicatorShapeOptions.top = _initValues.grid.top;
                    _gridBoxIndicatorShapeOptions.right = _initValues.grid.right;
                    _gridBoxIndicatorShapeOptions.bottom = _initValues.grid.bottom;
                }
                function resetGridOuterBoundsIndicatorShapeOptions() {
                    _gridOuterBoundsIndicatorShapeOptions.left = _initValues.grid.outerBounds.left;
                    _gridOuterBoundsIndicatorShapeOptions.top = _initValues.grid.outerBounds.top;
                    _gridOuterBoundsIndicatorShapeOptions.right = _initValues.grid.outerBounds.right;
                    _gridOuterBoundsIndicatorShapeOptions.bottom = _initValues.grid.outerBounds.bottom;
                }

                function updateIndicatorShapeOptions() {
                    let parsedOuterBoundsMode = _currOuterBoundsMode;
                    if (_currContainLabel) {
                        parsedOuterBoundsMode = 'same';
                    }
                    if (parsedOuterBoundsMode === 'none') {
                        _gridOuterBoundsIndicatorShapeOptions.left = -1000;
                        _gridOuterBoundsIndicatorShapeOptions.top = -1000;
                        _gridOuterBoundsIndicatorShapeOptions.right = -1000;
                        _gridOuterBoundsIndicatorShapeOptions.bottom = -1000;
                    }
                    else if (parsedOuterBoundsMode == 'same') {
                        _gridOuterBoundsIndicatorShapeOptions.left = _gridBoxIndicatorShapeOptions.left;
                        _gridOuterBoundsIndicatorShapeOptions.top = _gridBoxIndicatorShapeOptions.top;
                        _gridOuterBoundsIndicatorShapeOptions.right = _gridBoxIndicatorShapeOptions.right;
                        _gridOuterBoundsIndicatorShapeOptions.bottom = _gridBoxIndicatorShapeOptions.bottom;
                    }
                }

                function makeAxisName({xy, idx, richTag}) {
                    const txt = `${xy}Axis_${idx} long name`;
                    return richTag
                        ? `{name_big_1|${txt}}`
                        : txt;
                }

                function makeGridBoxIndicatorOption() {
                    var shapeOpt = _gridBoxIndicatorShapeOptions;
                    return {
                        type: 'rect',
                        id: 'grid_box_indicator',
                        shape: {
                            x: shapeOpt.left,
                            y: shapeOpt.top,
                            width: _initValues.width - shapeOpt.left - shapeOpt.right,
                            height: _initValues.height - shapeOpt.top - shapeOpt.bottom,
                        },
                        style: {
                            fill: 'rgba(0,0,100,0.1)'
                        },
                        silent: true,
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'grid.t/r/b/l/w/h rect',
                                stroke: '#fff',
                                lineWidth: 2,
                                fill: '#555',
                                fontSize: 10,
                            }
                        },
                        textConfig: {
                            position: 'insideTopRight',
                            distance: 0,
                        },
                    }
                }
                function makeGridOuterBoundsIndicatorOption() {
                    var shapeOpt = _gridOuterBoundsIndicatorShapeOptions;
                    return {
                        type: 'rect',
                        id: 'grid_outerBounds_indicator',
                        shape: {
                            x: shapeOpt.left,
                            y: shapeOpt.top,
                            width: _initValues.width - shapeOpt.left - shapeOpt.right,
                            height: _initValues.height - shapeOpt.top - shapeOpt.bottom,
                        },
                        style: {
                            fill: 'rgba(0,80,0,0.1)'
                        },
                        silent: true,
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'grid.outerBounds.t/r/b/l/w/h rect',
                                stroke: '#fff',
                                lineWidth: 2,
                                fill: '#555',
                                fontSize: 10,
                            }
                        },
                        textConfig: {
                            position: 'insideTopRight',
                            distance: 0,
                        },
                    }
                }

                function makeSeries(axisCountArr, seriesDataKind) {
                    function makeSeriesData(seriesDataKind, idx) {
                        if (seriesDataKind === 'small_amount') {
                            return {
                                series0: [
                                    [-50, 12 + idx],
                                    [33, 32 + idx],
                                    [55, 31 + idx]
                                ],
                                series1: [
                                    _currYAxisType === 'log'
                                        ? [9000000000, 832 + idx * 100]
                                        : [9000000000, -832 + idx * 100],
                                    [10000000000, 899983232 + idx * 100],
                                    [33333330000, 32323233232 + idx * 100],
                                    [55555550000, 31133232233 + idx * 100]
                                ]
                            };
                        }
                        else if (seriesDataKind === 'big_amount') {
                            const result = {
                                series0: [],
                                series1: [],
                            };
                            for (let idx = 0; idx < 10000; idx++) {
                                result.series0.push(
                                    Math.random() * 100, Math.random() * 100000
                                );
                                result.series1.push(
                                    Math.random() * 10000, Math.random() * 1000
                                );
                            }
                            return result;
                        }
                        else {
                            throw new Error();
                        }
                    }

                    const list = [];
                    axisCountArr.forEach((_, idx) => {
                        const seriesData = makeSeriesData(seriesDataKind, idx);
                        list.push({
                            xAxisIndex: idx,
                            yAxisIndex: idx,
                            symbolSize: 10,
                            name: `series_small_${idx}`,
                            data: seriesData.series0,
                            type: 'scatter'
                        }, {
                            xAxisIndex: idx,
                            yAxisIndex: idx,
                            symbolSize: 10,
                            name: `series_big_${idx}`,
                            data: seriesData.series1,
                            type: 'scatter'
                        });
                    });
                    return list;
                }

                function makeAxisCountArr() {
                    return (new Array(_xyAxisPairCount)).fill(1);
                }

                function makeXYAxisNameStyles() {
                    const richStyle = {
                        borderWidth: 4,
                        borderColor: 'rgba(0,180,0,0.5)',
                        backgroundColor: 'rgba(0,150,0,0.5)',
                        // padding: [10, 20, 30, 40],
                        padding: [10, 20],
                        color: '#000',
                        fontSize: 20,
                    };
                    const nameRichStyle = {
                        name_big_1: richStyle
                    };
                    const labelRichStyle = {
                        label_big_1: richStyle
                    };
                    return {nameRichStyle, labelRichStyle};
                }

                function makeXAxisOption() {
                    const {nameRichStyle, labelRichStyle} = makeXYAxisNameStyles();
                    return makeAxisCountArr().map((_, idx) => ({
                        id: idx,
                        type: _currXAxisType,
                        name: makeAxisName({xy: 'x', idx}),
                        nameTextStyle: {
                            rich: nameRichStyle,
                            color: '#555',
                        },
                        nameMoveOverlap: true,
                        nameLocation: _initValues.allAxis.nameLocation[0],
                        axisLabel: {
                            textStyle: {
                                rich: labelRichStyle,
                                color: '#555',
                            }
                        },
                        axisLine: {
                            show: true,
                        },
                        axisLine: {
                            onZero: _initValues.allAxis.axisLine.onZero[0],
                        },
                        position: _initValues.xAxis.position,
                    }));
                }

                function makeYAxisOption() {
                    const {nameRichStyle, labelRichStyle} = makeXYAxisNameStyles();
                    return makeAxisCountArr().map((_, idx) => ({
                        id: idx,
                        name: makeAxisName({xy: 'y', idx}),
                        type: _currYAxisType,
                        nameTextStyle: {
                            rich: nameRichStyle,
                            color: '#555',
                        },
                        nameMoveOverlap: true,
                        nameLocation: _initValues.allAxis.nameLocation[0],
                        axisLabel: {
                            textStyle: {
                                rich: labelRichStyle,
                                color: '#555',
                            }
                        },
                        axisLine: {
                            onZero: _initValues.allAxis.axisLine.onZero[0],
                        },
                        position: _initValues.yAxis.position,
                    }));
                }

                function createOption() {
                    const axisCountArr = makeAxisCountArr();

                    return {
                        // animation: false,
                        backgroundColor: 'rgba(0,0,0,0.1)',
                        legend: {
                            top: 3,
                            backgroundColor: 'rgba(250,0,0,0.4)',
                            borderRadius: 3,
                            borderWidth: 2,
                            borderColor: 'rgba(150,0,0,0.7)',
                        },
                        graphic: {
                            elements: [
                                makeGridBoxIndicatorOption(),
                                makeGridOuterBoundsIndicatorOption()
                            ]
                        },
                        tooltip: {},
                        xAxis: makeXAxisOption(),
                        yAxis: makeYAxisOption(),
                        grid: [{
                            left: _initValues.grid.left,
                            right: _initValues.grid.right,
                            top: _initValues.grid.top,
                            bottom: _initValues.grid.bottom,
                            show: true,
                            backgroundColor: 'rgba(150,0,0,0.2)',
                        }],
                        series: makeSeries(axisCountArr, 'small_amount')
                    };
                }

                function isXYPairDisabled(xyPairIndex) {
                    return xyPairIndex >= _xyAxisPairCount;
                }

                function resetToInitialState() {
                    // Reset to the initial state.
                    chart.__testHelper.restoreInputsToInitialState();
                    resetOptionStates();
                    resetGridBoxIndicatorShapeOptions();
                    resetGridOuterBoundsIndicatorShapeOptions();
                    _xyAxisPairCount = 1;
                    chartSetOption(chart, createOption(), {notMerge: true});
                }

                window.__ec_debug = (function () {
                    const ec_debug = {
                        applied_opt_idx: 0,
                        option_arr: [],
                        save_option(option, ecSetOptionOpt) {
                            ec_debug.option_arr.push({option, ecSetOptionOpt});
                        },
                        set_next_option(count) {
                            count = Math.min(count || 1, ec_debug.option_arr.length - ec_debug.applied_opt_idx);
                            for (let idx = 0; idx < count; idx++) {
                                const {option, ecSetOptionOpt} = ec_debug.option_arr[ec_debug.applied_opt_idx++];
                                chart.setOption(option, ecSetOptionOpt);
                            }
                        },
                    };
                    return ec_debug;
                })();

                function chartSetOption(chart, option, ecSetOptionOpt) {
                    _timeStart = Date.now();
                    ecSetOptionOpt = Object.assign({}, ecSetOptionOpt || {});
                    ecSetOptionOpt.lazyUpdate = _useLazyUpdate;
                    console.log('--- chart.setOption ---');
                    chart.setOption(option, ecSetOptionOpt);
                    // window.__ec_debug.save_option(option, ecSetOptionOpt);
                    // console.log(testHelper.printObject(option));
                }

                // console.log(testHelper.printObject(createOption()));

                const chart = testHelper.create(echarts, 'main_all', {
                    title: [
                        'Axis and grid layout tests.',
                        'The **gray** background is the chart canvas.',
                        'The **purple background** represents grid.top/right/bottom/left rect.',
                        'The **green background** represents grid.outerBounds.top/right/bottom/left rect.',
                        'Need to check the case that **legend disable all series**',
                        'Click **stop recording input and copy to clipboard** for saving case to axis-layout-0-quick-cases.js',
                    ],
                    option: createOption(),
                    width: _initValues.width,
                    height: _initValues.height,
                    saveInputsInitialState: true,
                    inputsStyle: 'compact',
                    // boundingRect: {
                    //     silent: false
                    // },
                    inputs: [
                        {
                            type: 'select',
                            text: 'quick test cases:',
                            prevent: {
                                recordInputs: true,
                                inputsState: true
                            },
                            options: __AXIS_LAYOUT_0_TEST_CASE_LIST,
                            onchange() {
                                _useLazyUpdate = true;
                                resetToInitialState();
                                var record = this.value;
                                if (record) {
                                    chart.__testHelper.replayInputs(this.value);
                                }
                                _useLazyUpdate = false;
                            }
                        },
                        {
                            type: 'br',
                        },
                        {
                            text: 'stop recording inputs and copy to clipboard',
                            prevent: {
                                recordInputs: true,
                                inputsState: true
                            },
                            onclick() {
                                chart.__testHelper.recordInputs({
                                    action: 'stop',
                                    printObjectOpt: {
                                        marginLeft: 8,
                                        lineBreakMaxColumn: 100
                                    }
                                });
                                resetToInitialState();
                                chart.__testHelper.recordInputs({
                                    action: 'start',
                                });
                            }
                        },
                        {
                            type: 'select',
                            text: 'boundingRect:',
                            values: ['hide', 'show'],
                            prevent: {
                                recordInputs: true,
                                inputsState: true
                            },
                            onchange() {
                                var opt = this.value === 'show' ? {color: 'rgba(255,0,0,0.5)'} : false;
                                chart.__testHelper.boundingRect(opt);
                            }
                        },
                        {
                            type: 'select',
                            text: 'x/yAxis pair count',
                            values: _XY_AXIS_PAIR_COUNT_LIST,
                            value: _xyAxisPairCount,
                            onchange() {
                                _xyAxisPairCount = this.value;
                                const disabledGroupIds = [];
                                const enabledGroupIds = [];
                                _XY_PAIR_INDICES.forEach(xyPairIndex => {
                                    if (isXYPairDisabled(xyPairIndex)) {
                                        disabledGroupIds.push(xyPairIndex);
                                    }
                                    else {
                                        enabledGroupIds.push(xyPairIndex);
                                    }
                                });
                                chart.__testHelper.disableInputs({groupId: enabledGroupIds, disabled: false});
                                chart.__testHelper.disableInputs({groupId: disabledGroupIds, disabled: true});
                                const option = createOption();
                                chartSetOption(chart, option, {notMerge: true});
                            }
                        },
                        {
                            type: 'br',
                        },
                        ...(['top', 'right', 'bottom', 'left'].map(prop => ({
                            type: 'range',
                            text: `grid.${prop}:`,
                            min: -200,
                            max: 500,
                            value: _initValues.grid[prop],
                            onchange() {
                                const newVal = this.value;
                                _gridBoxIndicatorShapeOptions[prop] = newVal;
                                updateIndicatorShapeOptions();
                                chartSetOption(chart, {
                                    grid: {[prop]: newVal},
                                    graphic: {
                                        elements: [
                                            makeGridBoxIndicatorOption(),
                                            makeGridOuterBoundsIndicatorOption()
                                        ]
                                    },
                                });
                            }
                        }))),
                        {
                            type: 'br'
                        },
                        {
                            type: 'select',
                            text: 'grid.outerBoundsMode:',
                            values: [undefined, 'same', 'none', 'auto'],
                            onchange() {
                                _currOuterBoundsMode = this.value;
                                updateIndicatorShapeOptions();
                                chartSetOption(chart, {
                                    grid: {outerBoundsMode: _currOuterBoundsMode},
                                    graphic: {
                                        elements: [
                                            makeGridBoxIndicatorOption(),
                                            makeGridOuterBoundsIndicatorOption()
                                        ]
                                    },
                                });
                            }
                        },
                        ...(['top', 'right', 'bottom', 'left'].map(prop => ({
                            type: 'range',
                            text: `grid.outerBounds.${prop}:`,
                            min: -200,
                            max: 500,
                            value: _initValues.grid[prop],
                            onchange() {
                                const newVal = this.value;
                                _gridOuterBoundsIndicatorShapeOptions[prop] = newVal;
                                updateIndicatorShapeOptions();
                                chartSetOption(chart, {
                                    grid: {outerBounds: {[prop]: newVal}},
                                    graphic: {
                                        elements: [
                                            makeGridBoxIndicatorOption(),
                                            makeGridOuterBoundsIndicatorOption()
                                        ]
                                    },
                                });
                            }
                        }))),
                        {
                            type: 'br'
                        },
                        {
                            type: 'select',
                            text: 'grid.outerBoundsContain:',
                            values: [undefined, 'all', 'axisLabel', 'auto'],
                            onchange() {
                                chartSetOption(chart, {
                                    grid: {outerBoundsContain: this.value}
                                });
                            }
                        },
                        ...['Width', 'Height'].map(prop => {
                            return {
                                type: 'select',
                                text: `grid.outerBoundsClamp${prop}:`,
                                options: [
                                    {value: undefined},
                                    {id: 'absolute', input: {type: 'range', min: -10, max: 500}, text: 'absolute'},
                                    {id: 'percent', input: {type: 'range', min: -10, max: 100, suffix: '%'}, text: 'percent'},
                                ],
                                onchange() {
                                    let val = this.value;
                                    if (this.optionId === 'percent') {
                                        val += '%'
                                    }
                                    chartSetOption(chart, {
                                        grid: {
                                            [`outerBoundsClamp${prop}`]: val
                                        }
                                    });
                                }
                            };
                        }),
                        {
                            type: 'select',
                            text: 'grid.containLabel(deprecated):',
                            values: [false, true],
                            onchange() {
                                _currContainLabel = this.value;
                                updateIndicatorShapeOptions();
                                chartSetOption(chart, {
                                    grid: {containLabel: this.value},
                                    graphic: {
                                        elements: [
                                            makeGridBoxIndicatorOption(),
                                            makeGridOuterBoundsIndicatorOption()
                                        ]
                                    },
                                });
                            }
                        },
                        {
                            type: 'select',
                            text: 'series.data:',
                            values: ['small_amount', 'big_amount'],
                            onchange() {
                                const dataKind = this.value;

                                const axisCountArr = makeAxisCountArr();
                                const series = makeSeries(axisCountArr, dataKind);
                                chartSetOption(chart, {
                                    series: series,
                                }, {
                                    replaceMerge: ['series']
                                });
                                // makeSeriesData
                            }
                        },
                        {
                            type: 'br',
                        },
                        {
                            type: 'select',
                            text: `xAxis.type:`,
                            values: ['value', 'category', 'time'],
                            onchange() {
                                _currXAxisType = this.value;
                                chartSetOption(chart, {
                                    xAxis: makeXAxisOption(),
                                }, {
                                    replaceMerge: ['xAxis']
                                });
                            }
                        },
                        {
                            type: 'select',
                            text: `yAxis.type:`,
                            values: ['log', 'category', 'value', 'time'],
                            onchange() {
                                _currYAxisType = this.value;
                                chartSetOption(chart, {
                                    yAxis: makeYAxisOption(),
                                }, {
                                    replaceMerge: ['yAxis']
                                });
                            }
                        },
                        {
                            type: 'select',
                            text: 'inputs below control xyAxis pair index:',
                            values: _XY_PAIR_INDICES,
                            onchange() {
                                chart.__testHelper.switchGroup(this.value);
                            },
                        },
                        {
                            type: 'br',
                        },
                        {
                            type: 'groupset',
                            id: 'groupset0',
                            inputsHeight: 130,
                            groups: _XY_PAIR_INDICES.map(controllingAxisIndex => ({
                                id: controllingAxisIndex,
                                text: 'settings of axisIndex: ' + controllingAxisIndex,
                                disabled: isXYPairDisabled(controllingAxisIndex),
                                inputs: [
                                ...['xAxis', 'yAxis'].map(xyAxisProp => {
                                    return {
                                        type: 'select',
                                        text: `${xyAxisProp}[${controllingAxisIndex}].show:`,
                                        values: [true, false],
                                        onchange() {
                                            chartSetOption(chart, {
                                                [xyAxisProp]: {id: controllingAxisIndex, show: this.value}
                                            });
                                        },
                                    }
                                }),
                                ...['xAxis', 'yAxis'].map(xyAxisProp => {
                                    return {
                                        type: 'select',
                                        text: `${xyAxisProp}[${controllingAxisIndex}].inverse:`,
                                        values: [false, true],
                                        onchange() {
                                            chartSetOption(chart, {
                                                [xyAxisProp]: {
                                                    inverse: this.value,
                                                    id: controllingAxisIndex,
                                                },
                                            });
                                        }
                                    };
                                }),
                                {
                                    type: 'br',
                                },
                                ...['xAxis', 'yAxis'].map(xyAxisProp => {
                                    return {
                                        type: 'select',
                                        text: `${xyAxisProp}[${controllingAxisIndex}].boundaryGap:`,
                                        values: [true, false],
                                        onchange() {
                                            chartSetOption(chart, {
                                                [xyAxisProp]: {
                                                    boundaryGap: this.value,
                                                    id: controllingAxisIndex,
                                                },
                                            });
                                        }
                                    };
                                }),
                                {
                                    type: 'hr',
                                    text: 'axisLine',
                                },
                                {
                                    type: 'select',
                                    text: `xAxis[${controllingAxisIndex}].position:`,
                                    values: _initValues.xAxis.position,
                                    onchange() {
                                        chartSetOption(chart, {xAxis: {
                                            position: this.value,
                                            id: controllingAxisIndex,
                                        }});
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `yAxis[${controllingAxisIndex}].position:`,
                                    values: _initValues.yAxis.position,
                                    onchange() {
                                        chartSetOption(chart, {yAxis: {
                                            position: this.value,
                                            id: controllingAxisIndex,
                                        }});
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].onZero:`,
                                    values: _initValues.allAxis.axisLine.onZero,
                                    onchange() {
                                        chartSetOption(chart, {
                                            xAxis: {
                                                axisLine: {onZero: this.value},
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                axisLine: {onZero: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'br',
                                },
                                ...(['xAxis', 'yAxis'].map(prop => ({
                                    type: 'select',
                                    text: `${prop}[${controllingAxisIndex}].offset:`,
                                    options: [
                                        {value: NOT_SET},
                                        {input: {
                                            type: 'range',
                                            value: 0,
                                            min: -200,
                                            max: 200,
                                        }, text: 'range'}
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {
                                            [prop]: {
                                                offset: this.value,
                                                id: controllingAxisIndex,
                                            }
                                        });
                                    }
                                }))),
                                {
                                    type: 'hr',
                                    text: 'axis tick',
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].axisTick.length:`,
                                    values: [5, 0, 30, -30],
                                    onchange() {
                                        chartSetOption(chart, {
                                            xAxis: {
                                                axisTick: {length: this.value},
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                axisTick: {length: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].axisTick.inside`,
                                    values: [false, true],
                                    onchange() {
                                        chartSetOption(chart, {
                                            xAxis: {
                                                axisTick: {inside: this.value},
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                axisTick: {inside: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'hr',
                                    text: 'axis label',
                                },
                                ...(['xAxis', 'yAxis'].map(prop => ({
                                    type: 'select',
                                    text: `${prop}[${controllingAxisIndex}].axisLabel.rotate:`,
                                    options: [
                                        {value: NOT_SET},
                                        {input: {
                                            type: 'range',
                                            value: 0,
                                            min: -100,
                                            max: 100,
                                        }, text: 'range'}
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {[prop]: {
                                            axisLabel: {rotate: this.value},
                                            id: controllingAxisIndex,
                                        },});
                                    }
                                }))),
                                {
                                    type: 'br',
                                },
                                ...(['xAxis', 'yAxis'].map(prop => ({
                                    type: 'select',
                                    text: `${prop}[${controllingAxisIndex}].axisLabel.margin:`,
                                    options: [
                                        {value: NOT_SET},
                                        {value: 0},
                                        {value: 8},
                                        {input: {
                                            type: 'range',
                                            value: 8, // The default value in echarts
                                            step: 1, // 0.1
                                            min: -100,
                                            max: 100,
                                        }, text: 'range'}
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {
                                            [prop]: {
                                                axisLabel: {margin: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                }))),
                                {
                                    type: 'br',
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].axisLable.inside:`,
                                    values: [false, true],
                                    onchange() {
                                        chartSetOption(chart, {
                                            xAxis: {
                                                axisLabel: {inside: this.value},
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                axisLabel: {inside: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].showMin&MaxLabel:`,
                                    values: [NOT_SET, null, true, false],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {
                                            xAxis: {
                                                axisLabel: {showMinLabel: this.value, showMaxLabel: this.value},
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                axisLabel: {showMinLabel: this.value, showMaxLabel: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}] label style:`,
                                    values: ['no', 'plain', 'rich'],
                                    onchange() {
                                        const opt = this.value;
                                        const formatter = opt === 'rich'
                                            ? `{label_big_1|{value}}`
                                            : null;
                                        chartSetOption(chart, {
                                            xAxis: {
                                                axisLabel: {
                                                    ...opt === 'plain'
                                                        ? _initValues.allAxis.plainBorderedStyle
                                                        : _initValues.allAxis.plainNormalStyle,
                                                    formatter,
                                                },
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                axisLabel: {
                                                    ...opt === 'plain'
                                                        ? _initValues.allAxis.plainBorderedStyle
                                                        : _initValues.allAxis.plainNormalStyle,
                                                    formatter,
                                                },
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'br',
                                },
                                ...([
                                    {desc: 'left/right', idx: [1, 3]},
                                    {desc: 'top/bottom', idx: [0, 2]}
                                ].map(({desc, idx}) => ({
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].axisLabel.textMargin.${desc}:`,
                                    options: [
                                        {value: NOT_SET},
                                        {value: undefined},
                                        {input: {type: 'range', min: -50, max: 100, value: 5}, text: 'range'}
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        let textMargin;
                                        if (this.value == null) {
                                            textMargin = undefined;
                                        }
                                        else {
                                            _currAxisLabelTextMargin[idx[0]] = _currAxisLabelTextMargin[idx[1]] = this.value;
                                            textMargin = _currAxisLabelTextMargin;
                                        }
                                        chartSetOption(chart, {
                                            xAxis: {id: controllingAxisIndex, axisLabel: {textMargin}},
                                            yAxis: {id: controllingAxisIndex, axisLabel: {textMargin}},
                                        });
                                    }
                                }))),
                                {
                                    type: 'br',
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].axisLabel.hideOverlap:`,
                                    options: [
                                        {value: undefined},
                                        {value: true},
                                        {value: false},
                                    ],
                                    onchange() {
                                        const hideOverlap = this.value;
                                        chartSetOption(chart, {
                                            xAxis: {id: controllingAxisIndex, axisLabel: {hideOverlap}},
                                            yAxis: {id: controllingAxisIndex, axisLabel: {hideOverlap}},
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].axisLabel.interval:`,
                                    options: [
                                        {value: undefined},
                                        {value: 'auto'},
                                        {value: 0},
                                        {value: 1},
                                        {value: 2},
                                    ],
                                    onchange() {
                                        const interval = this.value;
                                        chartSetOption(chart, {
                                            xAxis: {id: controllingAxisIndex, axisLabel: {interval}},
                                            yAxis: {id: controllingAxisIndex, axisLabel: {interval}},
                                        });
                                    }
                                },
                                {
                                    type: 'hr',
                                    text: 'axis name',
                                },
                                ...(['xAxis', 'yAxis'].map(prop => ({
                                    type: 'select',
                                    text: `${prop}[${controllingAxisIndex}].nameRotate:`,
                                    options: [
                                        {value: NOT_SET},
                                        {input: {
                                            type: 'range',
                                            value: 0,
                                            min: -100,
                                            max: 100,
                                        }, text: 'range'},
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {
                                            [prop]: {
                                                nameRotate: this.value,
                                                id: controllingAxisIndex,
                                            }
                                        });
                                    }
                                }))),
                                {
                                    type: 'br'
                                },
                                ...(['xAxis', 'yAxis'].map(prop => ({
                                    type: 'select',
                                    text: `${prop}[${controllingAxisIndex}].nameGap:`,
                                    options: [
                                        {value: NOT_SET},
                                        {value: 0},
                                        {input: {
                                            type: 'range',
                                            value: 15,
                                            min: -100,
                                            max: 100,
                                        }, text: 'range'}
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {[prop]: {
                                            nameGap: this.value,
                                            id: controllingAxisIndex,
                                        }});
                                    }
                                }))),
                                {
                                    type: 'br'
                                },
                                {
                                    type: 'select',
                                    text: `xAxis[${controllingAxisIndex}].nameMoveOverlap:`,
                                    values: [true, false],
                                    onchange() {
                                        chartSetOption(chart, {
                                            xAxis: {
                                                nameMoveOverlap: this.value,
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `yAxis[${controllingAxisIndex}].nameMoveOverlap:`,
                                    values: [true, false],
                                    onchange() {
                                        chartSetOption(chart, {
                                            yAxis: {
                                                nameMoveOverlap: this.value,
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `xAxis[${controllingAxisIndex}].nameLocation:`,
                                    values: _initValues.allAxis.nameLocation,
                                    onchange() {
                                        chartSetOption(chart, {
                                            xAxis: {
                                                nameLocation: this.value,
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `yAxis[${controllingAxisIndex}].nameLocation:`,
                                    values: _initValues.allAxis.nameLocation,
                                    onchange() {
                                        chartSetOption(chart, {
                                            yAxis: {
                                                nameLocation: this.value,
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                {
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].nameTrancate:`,
                                    values: [NOT_SET, undefined, 20],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        chartSetOption(chart, {
                                            xAxis: {
                                                nameTruncate: {maxWidth: this.value},
                                                id: controllingAxisIndex,
                                            },
                                            yAxis: {
                                                nameTruncate: {maxWidth: this.value},
                                                id: controllingAxisIndex,
                                            },
                                        });
                                    }
                                },
                                ...['x', 'y'].map(xy => {
                                    return {
                                        type: 'select',
                                        text: `${xy}Axis[${controllingAxisIndex}] name style:`,
                                        values: ['no', 'plain', 'rich', 'no_name'],
                                        onchange() {
                                            const opt = this.value;
                                            const richTag = opt === 'rich' ? 'name_big_1' : undefined;
                                            let name;
                                            if (opt !== 'no_name') {
                                                name = makeAxisName(
                                                    {xy: xy, idx: controllingAxisIndex, richTag}
                                                );
                                            }
                                            chartSetOption(chart, {
                                                [`${xy}Axis`]: {
                                                    name: name,
                                                    nameTextStyle: opt === 'plain'
                                                        ? _initValues.allAxis.plainBorderedStyle
                                                        : _initValues.allAxis.plainNormalStyle,
                                                    id: controllingAxisIndex,
                                                },
                                            });
                                        }
                                    }
                                }),
                                ...([
                                    {desc: 'left/right', idx: [1, 3]},
                                    {desc: 'top/bottom', idx: [0, 2]}
                                ].map(({desc, idx}) => ({
                                    type: 'select',
                                    text: `x/yAxis[${controllingAxisIndex}].nameTextStyle.textMargin.${desc}:`,
                                    options: [
                                        {value: NOT_SET},
                                        {value: undefined},
                                        {input: {type: 'range', min: -50, max: 100, value: 5}, text: 'range'}
                                    ],
                                    onchange() {
                                        if (this.value === NOT_SET) { return; }
                                        let textMargin;
                                        if (this.value == null) {
                                            textMargin = undefined;
                                        }
                                        else {
                                            _currNameTextMargin[idx[0]] = _currNameTextMargin[idx[1]] = this.value;
                                            textMargin = _currNameTextMargin;
                                        }
                                        chartSetOption(chart, {
                                            xAxis: {id: controllingAxisIndex, nameTextStyle: {textMargin}},
                                            yAxis: {id: controllingAxisIndex, nameTextStyle: {textMargin}},
                                        });
                                    }
                                }))),
                                ] // End of group-set.groups.inputs
                            })) // End of group-set.groups
                        }, // End of group-set
                    ] // End of `inputs`
                }); // End of `testHelper.create(...)`

                window.__ec_chart = chart;
                window.__ec_graphic = echarts.graphic;

                if (chart) {
                    chart.on('rendered', function () {
                        if (_timeStart) {
                            console.log('cost time', Date.now() - _timeStart, 'ms');
                            _timeStart = null;
                        }
                    });
                    chart.__testHelper.recordInputs({
                        action: 'start',
                    });
                }

            });



        </script>


    </body>
</html>