test/graphic-cases.html - master - githubmirror/echarts

test/graphic-cases.html
378 строк14 KB
plainheart
fix(graphic):
11 май 2022, 05:33
11 май 2022, 05:33ffc7429
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

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

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


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



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


        <script>

        const imageURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIUARQAHY8+4wAAApBJREFUeNrt3cFqAjEUhlEjvv8rXzciiiBGk/He5JxdN2U649dY+KmnEwAAAAAv2uMXEeGOwERntwAEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOCgpkuKq2it/r8Li2hbvGKqP6s/PycnHHv9YvSWEgQHCA4EBwgOBAeCAwQHggMEByXM+QRUE6D3suwuPafDn5MTDg50KXnVPSdxa54y/oYDwQGCA8EBggPBAYIDwYHggBE+X5rY3Y3Tey97Nn2eU+rnlGfaZa6Ft5SA4EBwgOBAcCA4QHAgOEBwIDjgZu60y1xrDPtIJxwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4GADcz9y2McIgxMOBAeCAwQHggMEB4IDwQGCA8EBggPBATdP6+KIGPRdW7i1LCFi6ALfCQfeUoLgAMGB4ADBgeBAcIDgQHCA4CCdOVvK7quwveQgg7eRTjjwlhIQHAgOBAcIDgQHCA4EB4IDBAfl5dhSdl+17SX3F22rdLlOOBAcCA4QHAgOEBwIDgQHCA4EBwgO0qm5pez6Ce0uSym2jXTCgeAAwYHgQHCA4EBwgOBAcCA4QHBQ3vpbyu47Yns51OLbSCccCA4QHAgOBAcIDgQHCA4EB4ID5jDt+vkObjgFM9dywoHgAMGB4EBwgOBAcIDgQHAgOEBwsA5bysPveMLtpW2kEw4EBwgOBAcIDgQHggMEB4IDBAeCg33ZUqZ/Ql9sL20jnXCA4EBwIDhAcCA4QHAgOBAcIDgQHNOZai3DlhKccCA4QHAgOEBwIDgQHCA4AAAAAGA1VyxaWIohrgXFAAAAAElFTkSuQmCC';

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


            option = {
                graphic: [{
                    type: 'circle',
                    x: 100,
                    y: 50,
                    shape: {
                        cx: 0,
                        cy: 0,
                        r: 50
                    },
                    style: {
                        fill: 'orange'
                    },
                    textContent: {
                        style: {
                            text: 'x: 100, y: 50\nposition: bottom',
                            fill: 'blue'
                        }
                    },
                    textConfig: {
                        position: 'bottom'
                    }
                }, {
                    type: 'rect',
                    x: 200,
                    y: 0,
                    scaleX: 10,
                    scaleY: 20,
                    shape: {
                        x: 0,
                        y: 0,
                        width: 5,
                        height: 5
                    },
                    style: {
                        fill: 'red'
                    },
                    textContent: {
                        style: {
                            text: 'x: 200, y: 0\nscaleX: 10, scaleY: 20\nposition: inside'
                        }
                    },
                    textConfig: {
                        position: 'inside'
                    }
                }, {
                    type: 'image',
                    x: 300,
                    y: 0,
                    style: {
                        width: 50,
                        height: 100,
                        image: imageURI,
                        storke: 'blue',
                        lineWidth: 5
                    }
                }]
            };

            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'New API:',
                    '**textContent** should be displayed.',
                    'Check transform according to textContent.'
                ],
                option: option
            });

        });
        </script>







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

            option = {
                graphic: [{
                    type: 'circle',
                    x: 100,
                    y: 50,
                    shape: {
                        cx: 0,
                        cy: 0,
                        r: 50
                    },
                    style: {
                        fill: 'orange',
                        text: 'x: 100, y: 50\nposition: bottom',
                        textFill: 'blue',
                        textPosition: 'bottom'
                    },
                }, {
                    type: 'rect',
                    x: 200,
                    y: 0,
                    scaleX: 10,
                    scaleY: 20,
                    shape: {
                        x: 0,
                        y: 0,
                        width: 5,
                        height: 5
                    },
                    style: {
                        fill: 'red',
                        text: 'x: 200, y: 0\nscaleX: 10, scaleY: 20\nposition: inside',
                        textPosition: 'inside'
                    }
                }, {
                    type: 'image',
                    x: 300,
                    y: 0,
                    style: {
                        width: 50,
                        height: 100,
                        image: imageURI
                    }
                }]
            };

            var chart = testHelper.create(echarts, 'main1', {
                title: [
                    'Legacy API:',
                    'Should the same as new API'
                ],
                option: option
            });

        });
        </script>

        <script>
            require(['echarts'/*, 'map/js/china' */], function (echarts) {
                var option;
                option = {
                    graphic: {
                        elements: [{
                            type: 'text',
                            x: 100,
                            y: 100,
                            style: {
                                text: 'Apache ECharts',
                                fill: 'none',
                                fontSize: 50,
                                fontWeight: 'bold',
                                stroke: '#000',
                                lineWidth: 1
                            }
                        }]
                    }
                };

                var chart = testHelper.create(echarts, 'main2', {
                    title: [
                        'Stroke Only Text'
                    ],
                    option: option
                });

            });
        </script>

        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    graphic:{
                        elements: [{
                            type: 'group',
                            left: '10%',
                            top: 'center',
                            draggable: true,
                            children: [{
                                type: 'rect',
                                z: 100,
                                left: 'center',
                                top: 'middle',
                                shape: {
                                    width: 240,
                                    height: 90
                                },
                                style: {
                                    fill: 'gray',
                                    stroke: '#555',
                                    lineWidth: 1,
                                    shadowBlur: 8,
                                    shadowOffsetX: 3,
                                    shadowOffsetY: 3,
                                    shadowColor: 'rgba(0,0,0,0.2)'
                                },
                                cursor: 'move',
                            }, {
                                type: 'text',
                                z: 100,
                                left: 'center',
                                top: 'middle',
                                style: {
                                    fill: '#000',
                                    width: 220,
                                    overflow: 'break',
                                    text: 'the value of cursor prop is "default", it looks well on version 5.1.1. Replace echarts version with 5.3.0, the mouse will still be a pointer',
                                    font: '14px Microsoft YaHei'
                                },
                                cursor: 'help',
                            }]
                        }]
                    }
                };
                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Cursor should be **move** when hovering on the rect',
                        'Cursor should be **help** when hovering on the text',
                        'See https://github.com/apache/echarts/issues/16511'
                    ],
                    option: option
                });
                var logBox = document.createElement('p');
                logBox.style.cssText = 'position:absolute;bottom:5px;left:5px';
                chart.getDom().appendChild(logBox);
                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutationRecord) {
                        const cursor = mutationRecord.target.style.cursor;
                        console.log('cursor', cursor);
                        logBox.innerText = 'cursor: ' + cursor;
                    });
                });
                observer.observe(chart.getDom().firstChild, {
                    attributes: true,
                    attributeFilter: ['style']
                });
             });
        </script>

        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    graphic:{
                        elements: [{
                            type: 'group',
                            x: 200,
                            y: 200,
                            draggable: true,
                            children: [{
                                type: 'rect',
                                left: 'center',
                                top: 'middle',
                                shape: {
                                    width: 240,
                                    height: 90
                                },
                                style: {
                                    fill: 'gray'
                                },
                                cursor: 'move',
                                z: 100,
                                onclick: function (e) {
                                    console.log(e.type);
                                }
                            }]
                        }]
                    }
                };
                var chart = testHelper.create(echarts, 'main4', {
                    title: [
                        '1. Click the **Update(empty)** button, the graphic element should be **still draggable** and output log when it is clicked',
                        '2. Click the **Update** button, the graphic element should **NOT** be **draggable** and no response when it is clicked',
                        '3. See also the example on https://echarts.apache.org/examples/editor.html?c=line-draggable',
                    ],
                    buttons: [{
                        text: 'Update(empty)',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    // no option
                                }
                            });
                        }
                    }, {
                        text: 'Update',
                        onclick() {
                            chart.setOption({
                                graphic: {
                                    elements: [{
                                        // draggable: undefined,
                                        // draggable: null,
                                        draggable: false,
                                        children: [{
                                            cursor: undefined,
                                            onclick: 'asdfghj',
                                            // onclick: null
                                            style: {
                                                fill: 'red'
                                            },
                                        }]
                                    }]
                                }
                            });
                        }
                    }],
                    option: option
                });
                var logBox = document.createElement('p');
                logBox.style.cssText = 'position:absolute;bottom:5px;left:5px';
                chart.getDom().appendChild(logBox);
                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutationRecord) {
                        const cursor = mutationRecord.target.style.cursor;
                        console.log('cursor', cursor);
                        logBox.innerText = 'cursor: ' + cursor;
                    });
                });
                observer.observe(chart.getDom().firstChild, {
                    attributes: true,
                    attributeFilter: ['style']
                });
            });
        </script>
    </body>
</html>