test/graphicOption.html - master - githubmirror/echarts

test/graphicOption.html
954 строки45 KB
pissang
test(visual): start vst without simpleRequire. optimize cases
08 май 2021, 11:45
08 май 2021, 11:459ce0d35
<!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">
        <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/draggable.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            body {
            }
            .block {
                overflow: hidden;
                height: 200px;
                margin-bottom: 20px;
                background: #eee;
            }
            .chart {
                height: 100%;
                width: 400px;
                float: left;
                margin-left: 20px;
            }
            textarea {
                margin: 0;
                padding: 0;
                float: right;
                width: 140px;
                height: 100%;
            }
            h3 {
                font-size: 16px;
                text-align: center;
            }
        </style>

        <script>
            function getMain(id) {
                var options = [];
                $('#' + id + ' textarea').each(function (idx, textarea) {
                    options.push((new Function('return (' + $(textarea).val() + ')'))());
                });

                return {
                    dom: $('#' + id + ' .chart')[0],
                    option: options[0],
                    options: options,
                    buttons: $('#' + id + ' button')
                };
            }

            var imageURI = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUF … [Строка слишком длинная. Вы можете скачать файл]
        </script>








        <h3>Test group setOption(getOption) mapping.</h3>
        <h3>Test left/right/top/bottom in group.</h3>
        <h3>Test resize.</h3>
        <div class="block" id="main4" style="height: 300px">
            <div class="chart"></div>
            <textarea>
{
    backgroundColor: '#bba',
    graphic: [{
        id: 'img',
        type: 'image',
        right: 20,
        top: 'center',
        style: {
            image: 'asset/echarts-logo.png',
            width: 50,
            height: 50,
            opacity: 0.5
        }
    }, {
        id: 'uriimg',
        type: 'image',
        origin: [20, 20],
        left: 10,
        top: 10,
        style: {
            image: imageURI,
            width: 80,
            height: 80,
            opacity: 0.5
        }
    }, {
        type: 'text',
        bottom: 0,
        right: 0,
        rotation: Math.PI / 4,
        style: {
            font: '24px Microsoft YaHei',
            text: '全屏右下角'
        },
        z: 100
    }, {
        type: 'text',
        bottom: 0,
        left: 'center',
        style: {
            font: '18px sans-serif',
            text: '全屏最下中间\n这是多行文字\n这是第三行'
        },
        z: 100
    }, {
        type: 'group',
        id: 'ggggg',
        right: 0,
        top: 0,
        bounding: 'raw',
        children: [{
            type: 'rect',
            left: 'center',
            top: 'middle',
            shape: {
                width: 80,
                height: 60
            },
            style: {
                fill: 'green'
            },
            z: 99
        }, {
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
                font: '14px Microsoft YaHei',
                text: '居中定位\n文字居中\n应超出屏幕'
            },
            z: 100
        }]
    }, {
        type: 'group',
        id: 'gr',
        width: 230,
        height: 110,
        position: [70, 90],
        children: [{
            type: 'rect',
            shape: {
                width: 230,
                height: 80
            },
            style: {
                stroke: 'red',
                fill: 'transparent',
                lineWidth: 2
            },
            z: 100
        }, {
            type: 'rect',
            shape: {
                width: 60,
                height: 110
            },
            style: {
                stroke: 'red',
                fill: 'transparent',
                lineWidth: 2
            },
            z: 100
        }, {
            id: 'grouptext',
            type: 'text',
            bottom: 0,
            right: 0,
            rotation: 0.5,
            style: {
                font: '14px Microsoft YaHei',
                text: 'group最右下角'
            },
            z: 100
        }]
    }, {
        type: 'group',
        id: 'bl',
        width: '100%',
        height: '100%',
        children: [{
            type: 'rect',
            right: 0,
            bottom: 0,
            shape: {
                width: 200,
                height: 100
            },
            style: {
                stroke: 'blue',
                fill: 'blue',
                lineWidth: 2
            }
        }, {
            type: 'rect',
            position: [10, 20],
            shape: {
                width: 50,
                height: 150
            },
            style: {
                stroke: 'blue',
                fill: 'blue',
                lineWidth: 2
            }
        }, {
            type: 'group',
            width: '50%',
            height: '50%',
            children: [{
                type: 'rect',
                shape: {
                    width: 100,
                    height: 100
                },
                style: {
                    stroke: 'blue',
                    fill: 'blue',
                    lineWidth: 2
                },
                right: 0,
                bottom: 0
            }]
        }]
    }, {
        type: 'rect',
        right: 0,
        bottom: 0,
        shape: {
            width: 200,
            height: 100
        },
        style: {
            stroke: 'orange',
            fill: 'transparent',
            lineWidth: 2
        }
    }, {
        type: 'rect',
        position: [10, 20],
        shape: {
            width: 50,
            height: 150
        },
        style: {
            stroke: 'orange',
            fill: 'transparent',
            lineWidth: 2
        }
    }, {
        type: 'rect',
        shape: {
            width: 100,
            height: 100
        },
        style: {
            stroke: 'orange',
            fill: 'transparent',
            lineWidth: 2
        },
        right: '50%',
        bottom: '50%'
    }, {
        type: 'text',
        position: [220, 20],
        style: {
            text: '蓝色矩形应与橙色矩形同一位置'
        }
    }]
}
            </textarea>
            <textarea>
{
    graphic: [{
        id: 'img',
        left: 'center',
        top: 'middle'
    }]
}
            </textarea>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('main4');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    draggable.init(main.dom, chart, {throttle: 70});

                    chart.setOption(main.option);

                    setTimeout(function () {
                        chart.setOption(chart.getOption());

                        setTimeout(function () {
                            chart.setOption(main.options[1]);
                        }, 1200);

                    }, 1200);

                    var rotation = 0;
                    setInterval(function () {
                        rotation += Math.PI / 360;
                        chart.setOption({
                            graphic: [{
                                id: 'img',
                                rotation: rotation
                            }, {
                                id: 'uriimg',
                                rotation: rotation
                            }]
                        });
                    }, 17);
                });
            </script>
        </div>











        <h3>bounding</h3>
        <div class="block" id="main5" style="height: 400px">
            <div class="chart"></div>
            <textarea>
{
    backgroundColor: 'rgba(0,0,255,0.08)',
    legend: {
        data:['高度(km)与气温(°C)变化关系']
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
    },
    yAxis: {
        type: 'category',
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
    },
    graphic: [{
        type: 'image',
        id: 'img',
        z: -10,
        right: 0,
        top: 0,
        bounding: 'raw',
        origin: [75, 75],
        style: {
            fill: '#000',
            image: 'asset/echarts-logo.png',
            width: 150,
            height: 150,
            opacity: 0.4
        }
    }, {
        type: 'group',
        id: 'rectgroup1',
        bottom: 0,
        right: 0,
        bounding: 'raw',
        children: [{
            type: 'rect',
            left: 'center',
            top: 'center',
            shape: {
                width: 20,
                height: 80
            },
            style: {
                stroke: 'green',
                fill: 'transparent'
            }
        }, {
            type: 'rect',
            left: 'center',
            top: 'center',
            shape: {
                width: 80,
                height: 20
            },
            style: {
                stroke: 'green',
                fill: 'transparent'
            }
        }]
    }, {
        type: 'rect',
        id: 'rect2',
        bottom: 0,
        right: 'center',
        shape: {
            width: 50,
            height: 80
        },
        style: {
            stroke: 'green',
            fill: 'transparent'
        }
    }, {
        type: 'group',
        id: 'textGroup1',
        left: '10%',
        top: 'center',
        scale: [1, .5],
        children: [
            {
                type: 'rect',
                z: 100,
                left: 'center',
                top: 'center',
                shape: {
                    width: 170,
                    height: 70
                },
                style: {
                    fill: '#fff',
                    stroke: '#999',
                    lineWidth: 2,
                    shadowBlur: 8,
                    shadowOffsetX: 3,
                    shadowOffsetY: 3,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            },
            {
                type: 'text',
                z: 100,
                top: 'middle',
                left: 'center',
                style: {
                    text: [
                        '横轴表示温度，单位是°C',
                        '纵轴表示高度，单位是km',
                        '右上角有一个图片做的水印'
                    ].join('\n'),
                    font: '12px Microsoft YaHei'
                }
            }
        ]
    }],
    series: [
        {
            name: '高度(km)与气温(°C)变化关系',
            type: 'line',
            data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }
    ]
}
        </textarea>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('main5');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    draggable.init(main.dom, chart, {throttle: 70});
                    chart.setOption(main.option);

                    var rotation = 0;
                    setInterval(function () {
                        rotation += Math.PI / 60;
                        chart.setOption({
                            graphic: [{
                                id: 'img',
                                bounding: 'raw',
                                origin: [75, 75],
                                rotation: rotation
                            }, {
                                id: 'rectgroup1',
                                rotation: rotation
                            }, {
                                id: 'rect2',
                                rotation: rotation
                            }, {
                                id: 'textGroup1',
                                rotation: rotation
                            }]
                        });
                    }, 17);
                });
            </script>
        </div>














        <h3>replace</h3>
        <div class="block" id="main0">
            <div class="chart"></div>
            <textarea>
{
    graphic: {
        type: 'circle',
        shape: {
            cx: 50,
            cy: 50,
            r: 20,
        },
        style: {
            fill: 'green',
            stroke: 'pink',
            lineWidth: 3
        }
    }
}
            </textarea>
            <textarea>
{
    graphic: {
        type: 'rect',
        $action: 'replace',
        shape: {
            x: 50,
            y: 50,
            width: 20,
            height: 60
        },
        style: {
            fill: 'green',
            stroke: 'pink',
            lineWidth: 3
        }
    }
}
            </textarea>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('main0');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    chart.setOption(main.option);
                    setTimeout(function () {
                        chart.setOption(chart.getOption());

                        setTimeout(function () {
                            chart.setOption(main.options[1]);
                        }, 1200);

                    }, 800);
                });
            </script>
        </div>













        <div class="block" id="mainz">
            <div class="chart"></div>
            只有第一个 graphic 会生效。
            <textarea>
{
    graphic: [{
        elements: [{
            type: 'circle',
            shape: {
                cx: 50,
                cy: 50,
                r: 20,
            }
        }, {
            type: 'circle',
            shape: {
                cx: 150,
                cy: 150,
                r: 20,
            }
        }]
    }, {
        elements: [{
            type: 'circle',
            shape: {
                cx: 100,
                cy: 100,
                r: 20,
            }
        }]
    }]
}
            </textarea>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('mainz');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    chart.setOption(main.option);
                });
            </script>
        </div>














        <div class="block" id="main1">
            <div class="chart"></div>
            <textarea>
{
    graphic: [{
        type: 'rect',
        shape: {
            x: 50,
            y: 50,
            width: 20,
            height: 80
        },
        style: {
            fill: 'green',
            stroke: 'pink',
            lineWidth: 3
        }
    }, {
        type: 'ring',
        shape: {
            cx: 150,
            cy: 150,
            r: 20,
            r0: 5
        },
        style: {
            fill: 'green',
            stroke: 'pink',
            lineWidth: 3
        }
    }]
}
            </textarea>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('main1');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    chart.setOption(main.option);
                    setTimeout(function () {
                        chart.setOption(chart.getOption());
                    }, 800);
                });
            </script>
        </div>
















        <div class="block" id="main2">
            <div class="chart"></div>
            <textarea>
{
    graphic: [{
        type: 'text',
        style: {
            text: 'asdf哈呵',
            font: '40px sans-serif',
            x: 100,
            y: 40
        }
    }, {
        id: 'rrr',
        type: 'ring',
        shape: {
            cx: 50,
            cy: 150,
            r: 20,
            r0: 5
        }
    }, {
        id: 'xxx',
        type: 'rect',
        shape: {
            x: 250,
            y: 50,
            width: 20,
            height: 80
        }
    }]
}
            </textarea>
            <button>delete by $action</button>
            <button>delete by setOption({...}, true)</button>
            <button>delete by clear</button>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('main2');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    chart.setOption(main.option);

                    $(main.buttons[0]).on('click', function () {
                        chart.setOption({
                            graphic: {
                                id: 'rrr',
                                $action: 'remove'
                            }
                        });
                    });
                    $(main.buttons[1]).on('click', function () {
                        chart.setOption({
                            graphic: {
                                type: 'rect',
                                shape: {
                                    y: 100,
                                    x: 250,
                                    width: 40,
                                    height: 140
                                },
                                style: {
                                    fill: 'blue'
                                }
                            }
                        }, true);
                    });
                    $(main.buttons[2]).on('click', function () {
                        chart.clear();
                    });
                });
            </script>
        </div>














        <div class="block" id="main3">
            <div class="chart"></div>
            <textarea>
{
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    series: [{
        type: 'line',
        data:[220, 182, 191, 234, 290, 330, 310]
    }],
    graphic: [{
        type: 'text',
        style: {
            text: 'asdf哈呵',
            font: '40px sans-serif',
            x: 100,
            y: 40
        }
    }, {
        id: 'rrr',
        type: 'ring',
        shape: {
            cx: 50,
            cy: 150,
            r: 20,
            r0: 5
        }
    }, {
        type: 'rect',
        shape: {
            x: 250,
            y: 50,
            width: 20,
            height: 80
        }
    }, {
        type: 'group',
        children: [{
            id: 'ing',
            type: 'rect',
            shape: {
                x: 30,
                y: 30,
                width: 10,
                height: 20
            },
            style: {
                fill: 'yellow'
            }
        }]
    }]
}
            </textarea>
            <textarea>
{
    graphic: [{
        style: {
            font: '60px sans-serif',
            x: 200
        },
        z: 222
    }, {
        shape: {
            cx: 150
        },
        style: {
            fill: 'green'
        },
        z: 222
    }, {
        shape: {
            x: 350
        },
        z: 222
    }, {
        id: 'ing',
        style: {
            fill: 'pink'
        },
        z: 222
    }]
}
            </textarea>
            <script>
                require([
                    'echarts'
                ], function (echarts) {
                    var main = getMain('main3');
                    if (!main.dom) {
                        return;
                    }
                    var chart = echarts.init(main.dom);
                    chart.setOption(main.option);
                    setTimeout(function () {
                        chart.setOption(main.options[1]);
                    }, 1200);
                });
            </script>
        </div>
























    </body>
</html>