test/graph-multiple-edges.html - master - githubmirror/echarts

test/graph-multiple-edges.html
356 строк23 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7

<!--
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>
    <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
</head>
<body>
<style>
    html, body, .main {
        width: 100%;
        height: 600px;
        margin: 0;
    }
</style>
<div id="main0" class="main"></div>
<div id="main1" class="main"></div>
<div id="main2" class="main"></div>
<div id="main3" class="main"></div>
<div id="main4" class="main"></div>

<div id="main5" class="main"></div>
<div id="main6" class="main"></div>
<div id="main7" class="main"></div>
<div id="main8" class="main"></div>
<div id="main9" class="main"></div>

<div id="main10" class="main"></div>
<div id="main11" class="main"></div>
<div id="main12" class="main"></div>

<script>
    var getLayout= function(i) {
        if(i % 3 === 0) return 'none';
        if(i % 3 == 1) return 'circular';
        if(i % 3 == 2) return 'force';
    }
    require([
        'echarts'
    ], function (echarts) {
        for(var i = 0; i < 5; i++) {
            var container = document.getElementById('main' + i);
            var times = 8;
            var datas = {
                '1': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}],
                '9': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}],
                '17': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}],
                '25': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}],
                '33': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}]
                }

            var option = {
                title: {
                    text: 'Graph, edges numbers：' + (i * times + 1) + ' layout：' + getLayout(i)
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: getLayout(i),
                        symbolSize: 50,
                        label: {
                            show: true
                        },
                        roam: true,
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 12
                        },
                        data: [{
                            name: 'node1',
                            x: 300,
                            y: 300
                        }, {
                            name: 'node2',
                            x: 800,
                            y: 300
                        }, {
                            name: 'node3',
                            x: 550,
                            y: 100
                        }],
                        links: datas[(i * times + 1) + ''],
                        autoCurveness:  datas[(i * times + 1) + ''].length,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                        }
                    }
                ]
            }

            var chart = echarts.init(container, '', {renderer: 'svg'});
            chart.setOption(option)
        }
    })
</script>
<script>
    require([
        'echarts'
    ], function (echarts) {
        for(var i = 0; i < 5; i++) {
            var container = document.getElementById('main' + (i + 5));
            var times = 8;
            var datas = {
                '2': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}],
                '10': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}],
                '18': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}],
                '26': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}],
                '34': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}]
            }

            var option = {
                title: {
                    text: 'Graph, edges numbers：' + (i * times + 2) + ' layout：' + getLayout(i)
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: getLayout(i),
                        symbolSize: 50,
                        label: {
                            show: true
                        },
                        roam: true,
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 12
                        },
                        data: [{
                            name: 'node1',
                            x: 300,
                            y: 300
                        }, {
                            name: 'node2',
                            x: 800,
                            y: 300
                        }, {
                            name: 'node3',
                            x: 550,
                            y: 100
                        }],
                        links: datas[(i * times + 2) + ''],
                        autoCurveness: datas[(i * times + 2) + ''].length,
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                        }
                    }
                ]
            }

            var chart = echarts.init(container, '', {renderer: 'svg'});
            chart.setOption(option)
        }
    })
</script>

<script>
    require([
        'echarts'
    ], function (echarts) {
        var container = document.getElementById('main10');
        var data = [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}];

        var option = {
            title: {
                text: 'autoCurveness array test'
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 50,
                    roam: true,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        fontSize: 12
                    },
                    data: [{
                        name: 'node1',
                        x: 300,
                        y: 300
                    }, {
                        name: 'node2',
                        x: 800,
                        y: 300
                    }, {
                        name: 'node3',
                        x: 550,
                        y: 100
                    }],
                    links: data,
                    autoCurveness: [0.2, -0.2, 0.4, -0.4, 0.6, -0.6, 0.8, -0.8, 1, -1, 0.1, -0.1, 0.3, -0.3, 0.5, -0.5, 0.7, -0.7, 0.9, -0.9],
                    lineStyle: {
                        opacity: 0.9,
                        width: 2,
                    }
                }
            ]
        }

        var chart = echarts.init(container, '', {renderer: 'svg'});
        chart.setOption(option)
    })
</script>

<script>
    require([
        'echarts'
    ], function (echarts) {
        var container = document.getElementById('main11');
        var data = [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}];

        var option = {
            title: {
                text: 'no set autoCurveness '
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 50,
                    roam: true,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        fontSize: 12
                    },
                    data: [{
                        name: 'node1',
                        x: 300,
                        y: 300
                    }, {
                        name: 'node2',
                        x: 800,
                        y: 300
                    }, {
                        name: 'node3',
                        x: 550,
                        y: 100
                    }],
                    links: data,
                    lineStyle: {
                        opacity: 0.9,
                        width: 2,
                    }
                }
            ]
        }

        var chart = echarts.init(container, '', {renderer: 'svg'});
        chart.setOption(option)
    })
</script>

<script>
    require([
        'echarts'
    ], function (echarts) {
        var container = document.getElementById('main12');
        var data = [
            {source: 'node1', target: 'node3', label: {show: true}},
            {source: 'node1', target: 'node3', label: {show: true}},
            {source: 'node3', target: 'node1', label: {show: true}},
        ]

        var option = {
            title: {
                text: 'autoCurveness 3 test case'
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 50,
                    roam: true,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        fontSize: 12
                    },
                    data: [{
                        name: 'node1',
                        x: 300,
                        y: 300
                    }, {
                        name: 'node2',
                        x: 800,
                        y: 300
                    }, {
                        name: 'node3',
                        x: 550,
                        y: 100
                    }],
                    links: data,
                    autoCurveness: 3,
                    lineStyle: {
                        opacity: 0.9,
                        width: 2,
                    }
                }
            ]
        }

        var chart = echarts.init(container, '', {renderer: 'svg'});
        chart.setOption(option)
    })
</script>
</body>
</html>