test/custom-feature.html - master - githubmirror/echarts

test/custom-feature.html
592 строки23 KB
sushuang
Merge pull request #21006 from apache/master
31 май 2025, 18:57
31 май 2025, 18:57485be0f
<!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>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>


        <div id="main-eventful"></div>
        <div id="main-clip-by-system"></div>
        <div id="main-clip-by-self"></div>
        <div id="main-SVG-Path"></div>
        <div id="main-tooltip-trigger-axis"></div>
        <div id="main-tooltip-trigger-item"></div>

        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    xAxis: {},
                    yAxis: {},
                    dataZoom: [{}, {type: 'inside'}],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            return {
                                type: 'group',
                                position: api.coord([api.value(0), api.value(1)]),
                                children: [{
                                    type: 'rect',
                                    shape: {
                                        x: -100,
                                        y: -100,
                                        width: 200,
                                        height: 200,
                                        r: 10
                                    },
                                    style: {
                                        fill: 'rgba(102,241,98,0.4)'
                                    },
                                    silent: true,
                                    styleEmphasis: false
                                }, {
                                    type: 'group',
                                    name: 'innerGroup',
                                    children: [{
                                        type: 'circle',
                                        shape: {
                                            r: 30,
                                            cx: 0,
                                            cy: 0
                                        },
                                        info: 0,
                                        style: {
                                            fill: 'red',
                                            text: 'dataIndex: ' + params.dataIndex,
                                            textFill: '#000',
                                            textStroke: '#fff',
                                            textStrokeWidth: 1
                                        }
                                    }, {
                                        type: 'rect',
                                        shape: {
                                            x: 50,
                                            y: 60,
                                            width: 80,
                                            height: 80
                                        },
                                        style: {
                                            fill: '#ff3391'
                                        }
                                    }]
                                }]
                            };
                        },
                        data: [[121, 333], [29, 212]]
                    }]
                };

                var chart = testHelper.create(echarts, 'main-eventful', {
                    title: [
                        'Eventful: ',
                        'Only this el trigger events: **red circle** and **red rect** of **dataIndex: 1**',
                        '   Others not (green rect not)',
                        'Events (click, mousedown, mousemove, mouseup) are printed in console log.',
                        'red circle: params.info = 0, red rect: params.info = undefined'
                    ],
                    option: option
                });

                chart && echarts.util.each(['click', 'mousedown', 'mousemove', 'mouseup'], function (eventName) {
                    chart.on(eventName, {dataIndex: 1, element: 'innerGroup'}, function (params) {
                        console.log(params.type, params);
                        console.log('params.info: ', params.info);
                    });
                });
            });
        </script>






        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    xAxis: {
                        min: 90,
                        max: 120,
                        scale: true
                    },
                    yAxis: {
                        min: 50,
                        max: 500,
                        scale: true
                    },
                    dataZoom: [
                        {type: 'inside', filterMode: 'none'},
                        {type: 'slider', filterMode: 'none'},
                        {type: 'slider', filterMode: 'none', orient: 'vertical'},
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            return {
                                type: 'polygon',
                                position: api.coord([api.value(0), api.value(1)]),
                                shape: {
                                    points: [
                                        [0, 0],
                                        [50, -50],
                                        [90, -50],
                                        [140, 0],
                                        [90, 50]
                                    ]
                                },
                                style: {
                                    fill: 'green'
                                }
                            }
                        },
                        clip: true,
                        data: [[100, 300]]
                    }]
                };

                var chart = testHelper.create(echarts, 'main-clip-by-system', {
                    title: [
                        'The shape should be **clipped** by the grid (by series.clip).',
                    ],
                    option: option
                });

            });

        </script>






        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    xAxis: {
                        min: 90,
                        max: 120,
                        scale: true
                    },
                    yAxis: {
                        min: 50,
                        max: 500,
                        scale: true
                    },
                    dataZoom: [
                        {type: 'inside', filterMode: 'none'},
                        {type: 'slider', filterMode: 'none'},
                        {type: 'slider', filterMode: 'none', orient: 'vertical'},
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            return {
                                type: 'group',
                                children: [{
                                    type: 'polygon',
                                    position: api.coord([api.value(0), api.value(1)]),
                                    shape: {
                                        points: [
                                            [0, 0],
                                            [50, -50],
                                            [90, -50],
                                            [140, 0],
                                            [90, 50]
                                        ]
                                    },
                                    style: {
                                        fill: 'blue'
                                    }
                                }],
                                clipPath: {
                                    type: 'rect',
                                    shape: {
                                        x: params.coordSys.x,
                                        y: params.coordSys.y,
                                        width: params.coordSys.width,
                                        height: params.coordSys.height
                                    }
                                }
                            }
                        },
                        data: [[100, 300]]
                    }]
                };

                var chart = testHelper.create(echarts, 'main-clip-by-self', {
                    title: [
                        'The shape should be **clipped** by the grid (by custom clipPath).',
                    ],
                    option: option
                });

            });

        </script>




        <script>

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

                // deprecated: this case would be wrong.

                var data = [];
                var data0 = [];
                for (var i = 0; i < 100; i++) {
                    data.push(i);
                    data0.push([i, 10]);
                }

                var option = {
                    tooltip: {
                    },
                    dataZoom: [{
                        type: 'slider',
                        yAxisIndex: 0,
                        zoomLock: true,
                        width: 10,
                        right: 10,
                        top: 70,
                        bottom: 20,
                        start: 94,
                        end: 100,
                        handleSize: 0,
                        showDetail: false,
                    }, {
                        type: 'inside',
                        yAxisIndex: 0,
                        start: 94,
                        end: 100,
                        zoomOnMouseWheel: false,
                        moveOnMouseMove: true,
                        moveOnMouseWheel: true
                    }],
                    grid: {
                        show: true,
                        top: 70,
                        bottom: 20,
                        left: 100,
                        right: 20,
                        backgroundColor: '#fff',
                        borderWidth: 0
                    },
                    xAxis: {
                        type: 'time',
                        position: 'top',
                        splitLine: {
                            lineStyle: {
                                color: ['#E9EDFF']
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#929ABA'
                            }
                        },
                        axisLabel: {
                            color: '#929ABA',
                            inside: false,
                            align: 'center'
                        }
                    },
                    yAxis: {
                    },
                    series: [{
                        type: 'scatter',
                        data: data0,
                        encode: {x: 1, y: 0}
                    }, {
                        type: 'custom',
                        renderItem: renderAxisLabelItem,
                        encode: {
                            x: -1, // Then this series will not controlled by x.
                            y: 0
                        },
                        data: data
                    }]
                };

                function renderAxisLabelItem(params, api) {
                    // Get the height corresponds to length 1 on y axis.
                    var x0 = 0;
                    var x1 = 30;
                    var x3 = 90;
                    var blockHeight = api.size([0, 1])[1] - 26;

                    return {
                        type: 'group',
                        position: [
                            10,
                            api.coord([0, api.value(0)])[1]
                            // blockHeight
                        ],
                        children: [{
                            type: 'path',
                            shape: {
                                d: 'M0,0 L0,-20 L30,-20 C40,-20 40,-1 50,-1 L90,-1 L90,0 Z',
                                x: 0,
                                y: -blockHeight,
                                width: 90,
                                height: blockHeight,
                                layout: 'cover'
                            },
                            style: {
                                fill: '#03b292'
                            }
                        }, {
                            type: 'text',
                            style: {
                                x: (x0 + x1) / 2,
                                y: -blockHeight / 2,
                                text: api.value(1),
                                textFill: '#fff',
                                textAlign: 'center',
                                textVerticalAlign: 'middle'
                            }
                        }]
                    };
                }

                var chart = testHelper.create(echarts, 'main-SVG-Path', {
                    title: [
                        'Test SVG path data auto fit to rect: ',
                        'the y axis label (made by custom series) should be center',
                    ],
                    option: option
                });

            });

        </script>




        <script>
            require(['echarts'], function (echarts) {
                var chart = testHelper.create(echarts, 'main-tooltip-trigger-axis', {
                    title: [
                        'Test tooltip trigger: axis',
                        'It should bahave as if tooltipDisabled is not set',
                    ],
                    option: {
                        legend: {
                            show: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            type: 'custom',
                            name: 'Custom series',
                            data: [[100, 23], [25, 41], [52, 12]],
                            renderItem: function (params, api) {
                                const coord = api.coord([api.value(0), api.value(1)]);
                                const size = 50;
                                return {
                                    type: 'rect',
                                    tooltipDisabled: true,
                                    shape: {
                                        x: coord[0] - size / 2,
                                        y: coord[1] - size / 2,
                                        width: size,
                                        height: size
                                    },
                                    style: api.style()
                                }
                            }
                        }, {
                            type: 'custom',
                            name: 'Custom series with group',
                            data: [[80, 20]],
                            renderItem: function (params, api) {
                                const coord = api.coord([api.value(0), api.value(1)]);
                                const size = 50;
                                return {
                                    type: 'group',
                                    children: [{
                                        type: 'rect',
                                        shape: {
                                            x: coord[0] - size / 2,
                                            y: coord[1] - size / 2,
                                            width: size,
                                            height: size
                                        },
                                        style: api.style()
                                    }, {
                                        type: 'group',
                                        tooltipDisabled: true,
                                        children: [{
                                            type: 'rect',
                                            shape: {
                                                x: coord[0] - size / 2 - 20,
                                                y: coord[1] + 20,
                                                width: size + 40,
                                                height: 40
                                            },
                                            style: {
                                                fill: '#888'
                                            }
                                        }]
                                    }]
                                };
                            }
                        }, {
                            type: 'scatter',
                            name: 'Scatter series',
                            data: [[83, 43], [19, 32], [74, 41]],
                            symbolSize: 50,
                        }]
                    }
                });
            });
        </script>






        <script>
            require(['echarts'], function (echarts) {
                var chart = testHelper.create(echarts, 'main-tooltip-trigger-item', {
                    title: [
                        'Test tooltip trigger: item',
                        'Hovering on blue/gray rects should not trigger tooltip but should have emphasis style.',
                        'Hovering on the green rect should trigger tooltip.'
                    ],
                    option: {
                        legend: {
                            show: true
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            type: 'custom',
                            name: 'Custom series',
                            data: [[100, 23], [25, 41], [52, 12]],
                            renderItem: function (params, api) {
                                const coord = api.coord([api.value(0), api.value(1)]);
                                const size = 50;
                                return {
                                    type: 'rect',
                                    tooltipDisabled: true,
                                    shape: {
                                        x: coord[0] - size / 2,
                                        y: coord[1] - size / 2,
                                        width: size,
                                        height: size
                                    },
                                    style: api.style()
                                }
                            }
                        }, {
                            type: 'custom',
                            name: 'Custom series with group',
                            data: [[80, 20]],
                            renderItem: function (params, api) {
                                const coord = api.coord([api.value(0), api.value(1)]);
                                const size = 50;
                                return {
                                    type: 'group',
                                    children: [{
                                        type: 'rect',
                                        shape: {
                                            x: coord[0] - size / 2,
                                            y: coord[1] - size / 2,
                                            width: size,
                                            height: size
                                        },
                                        style: api.style()
                                    }, {
                                        type: 'group',
                                        tooltipDisabled: true,
                                        children: [{
                                            type: 'rect',
                                            shape: {
                                                x: coord[0] - size / 2 - 20,
                                                y: coord[1] + 20,
                                                width: size + 40,
                                                height: 40
                                            },
                                            style: {
                                                fill: '#888'
                                            }
                                        }]
                                    }]
                                };
                            }
                        }, {
                            type: 'scatter',
                            name: 'Scatter series',
                            data: [[83, 43], [19, 32], [74, 41]],
                            symbolSize: 50,
                        }]
                    }
                });
            });
        </script>

    </body>
</html>