test/graph-circular.html

<!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>
        <div id="main5"></div>
        <div id="main6"></div>
        <div id="main7"></div>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        data: [
                            {
                                itemStyle: null,
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 40
                            },
                            {
                                itemStyle: null,
                                name: 'ADORA2A',
                                value: 0,
                                symbolSize: 20
                            },
                            {
                                itemStyle: null,
                                name: 'ARRB2',
                                value: 30,
                                symbolSize: 20,
                            },
                            {
                                itemStyle: null,
                                name: 'CALM1',
                                value: 20,
                                symbolSize: 40
                            },
                            {
                                itemStyle: null,
                                name: 'CALM2',
                                value: 0,
                                symbolSize: 20
                            },
                            {
                                itemStyle: null,
                                name: 'FLNA',
                                value: 0,
                                symbolSize: 20
                            },
                            {
                                itemStyle: null,
                                name: 'NSF',
                                value: 0,
                                symbolSize: 20
                            }
                        ],
                        links: [
                            {
                                source: 'DRD2',
                                target: 'ADORA2A'
                            },
                            {
                                source: 'DRD2',
                                target: 'ARRB2'
                            },
                            {
                                source: 'DRD2',
                                target: 'CALM1'
                            },
                            {
                                source: 'DRD2',
                                target: 'CALM2'
                            },
                            {
                                source: 'DRD2',
                                target: 'FLNA'
                            },
                            {
                                source: 'DRD2',
                                target: 'NSF'
                            },
                            {
                                source: 'CALM1',
                                target: 'ADORA2A'
                            },
                            {
                                source: 'CALM1',
                                target: 'ARRB2'
                            },
                            {
                                source: 'CALM1',
                                target: 'CALM2'
                            },
                            {
                                source: 'CALM1',
                                target: 'FLNA'
                            },
                            {
                                source: 'CALM1',
                                target: 'NSF'
                            },
                        ]
                    }]
                };

                var chart = testHelper.create(echarts, 'main0', {
                    option: option,
                    title: 'has 0 value nodes'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        left: 50,
                        width: 100,
                        top: 50,
                        height: 100,
                        roam: true,
                        data: [
                            {
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ADORA2A',
                                value: 0,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ARRB2',
                                value: 30,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'CALM1',
                                value: 20,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            }
                        ],
                        links: [
                            {
                                source: 'DRD2',
                                target: 'ADORA2A'
                            },
                            {
                                source: 'DRD2',
                                target: 'ARRB2'
                            }
                        ]
                    }]
                };

                var chart = testHelper.create(echarts, 'main1', {
                    option: option,
                    title: 'all the same'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        left: 50,
                        width: 100,
                        top: 50,
                        height: 100,
                        data: [
                            {
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ADORA2A',
                                value: 0,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ARRB2',
                                value: 30,
                                symbolSize: 50 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'CALM1',
                                value: 20,
                                symbolSize: 100 * Math.pow(2, 0.5)
                            }
                        ],
                        links: [
                            {
                                source: 'DRD2',
                                target: 'ADORA2A'
                            },
                            {
                                source: 'DRD2',
                                target: 'ARRB2'
                            }
                        ]
                    }]
                };

                var chart = testHelper.create(echarts, 'main2', {
                    option: option,
                    title: 'one symbol contains the center of the circular layout.'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        left: 50,
                        width: 100,
                        top: 50,
                        height: 100,
                        data: [
                            {
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 70 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ADORA2A',
                                value: 0,
                                symbolSize: 70 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ARRB2',
                                value: 30,
                                symbolSize: 70 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'CALM1',
                                value: 20,
                                symbolSize: 70 * Math.pow(2, 0.5)
                            }
                        ],
                        links: [
                            {
                                source: 'DRD2',
                                target: 'ADORA2A'
                            },
                            {
                                source: 'DRD2',
                                target: 'ARRB2'
                            }
                        ]
                    }]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    option: option,
                    title: 'overlapped'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        left: 50,
                        width: 100,
                        top: 50,
                        height: 100,
                        data: [
                            {
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 30 * Math.pow(2, 0.5)
                            }
                        ],
                    }]
                };

                var chart = testHelper.create(echarts, 'main4', {
                    option: option,
                    title: 'one node'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        left: 50,
                        width: 100,
                        top: 50,
                        height: 100,
                        data: [
                            {
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 30 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ADORA2A',
                                value: 0,
                                symbolSize: 70 * Math.pow(2, 0.5)
                            }
                        ],
                    }]
                };

                var chart = testHelper.create(echarts, 'main5', {
                    option: option,
                    title: 'two nodes'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                option = {
                    tooltip: {},
                    legend: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        left: 50,
                        width: 100,
                        top: 50,
                        height: 100,
                        data: [
                            {
                                name: 'DRD2',
                                value: 40,
                                symbolSize: 70 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ADORA2A',
                                value: 0,
                                symbolSize: 10 * Math.pow(2, 0.5)
                            },
                            {
                                name: 'ARRB2',
                                value: 30,
                                symbolSize: 10 * Math.pow(2, 0.5)
                            }
                        ],
                    }]
                };

                var chart = testHelper.create(echarts, 'main6', {
                    option: option,
                    title: 'three nodes'
                    // recordCanvas: true
                });
            });

        </script>


        <script>

            var option;

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

                var nodes = [];
                for (var i = 0; i < 50; i++) {
                    nodes.push({
                        name: 'node_' + i,
                        value: 40,
                        symbolSize: 7 + (i > 7 && i < 15 ? 40 : 0)
                    });
                }

                option = {
                    tooltip: {},
                    series: [{
                        type: 'graph',
                        name: 'Gene',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        zoom: 0.5,
                        label: {
                            show: true
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        emphasis: {
                            label: {
                                color: 'blue'
                            },
                            lineStyle: {
                                width: 10
                            }
                        },
                        roam: true,
                        data: nodes
                    }]
                };

                var chart = testHelper.create(echarts, 'main7', {
                    option: option,
                    height: 400,
                    title: [
                        'scaled (symbol should not be overlapped)',
                        'also check circular layout in **test/graph.html**',
                        'where also has symbols scaled.'
                    ]
                });
            });

        </script>


    </body>
</html>