test/chord.html - master - githubmirror/echarts

test/chord.html
719 строк24 KB
Ovilia
fix(chord): padAngle takes rest space of minAngle
25 мар 2025, 10:47
25 мар 2025, 10:4787599b5
<!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='main-clockwise'></div>
    <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>
    <div id='main8'></div>
    <div id='main9'></div>
    <div id='main10'></div>



    <script>

        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            const option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        startAngle: 90,
                        endAngle: -270,
                        clockwise: false,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main-clockwise', {
                option: option,
                title: [
                    'Clockwise: false',
                    'Click to set clockwise: true (default)',
                    'Pay attention to the gradient style should be updated.'
                ],
                buttons: [{
                    text: 'Clockwise: true',
                    onclick: function () {
                        option.series[0].clockwise = true;
                        chart.setOption(option);
                    }
                }, {
                    text: 'Clockwise: false',
                    onclick: function () {
                        option.series[0].clockwise = false;
                        chart.setOption(option);
                    }
                }]
            });
        });

    </script>



    <script>

        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            const option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 15,
                        startAngle: 90,
                        endAngle: -270,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ],
                        label: {
                            formatter: '{b}: {c}'
                        }
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main0', {
                option: option,
                title: [
                    '**Zero value with minAngle**',
                    'D, E, F are all 0, minAngle: 15',
                    'D, E, F sector should be 15 degree.'
                ]
            });
        });

    </script>

    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        startAngle: 90,
                        endAngle: -270,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main1', {
                option: option,
                title: [
                    '**Zero value without minAngle**',
                    'D, E, F are all 0, minAngle: undefined (0 as default)',
                    'D, E, F sector and padding should not be displayed.'
                ]
            });
        });

    </script>



    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 55,
                        startAngle: 90,
                        endAngle: -270,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'B', target: 'A', value: 40 },
                            { source: 'B', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main2', {
                option: option,
                title: [
                    'C can only be borrowed 1 degree from, so this case cannot borrow evenly from A, B, C',
                    'D, E, F are all 0, minAngle: 55',
                    'This is the test case for **surplusAsMuchAsPossible** in the code.'
                ]
            });
        });

    </script>



    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 65,
                        startAngle: 90,
                        endAngle: -270,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main3', {
                option: option,
                title: [
                    '**minAngle and padAngle being too large**',
                    '(minAngle + padAngle) * count is larger than 360',
                    'minAngle: 65, padAngle: 3',
                    'Each sector should be 57 degree, with 3 degree as padAngle'
                ]
            });
        });
    </script>



    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 15,
                        padAngle: 90,
                        startAngle: 90,
                        endAngle: -270,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main4', {
                option: option,
                title: [
                    '**padAngle being too large**',
                    'padAngle * count is larger than 360, should be ignored',
                    'minAngle: 15, padAngle: 90',
                    'padAngle should be 360 / 6 - 15 = 45'
                ]
            });
        });
    </script>




    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 15,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A', value: 70 },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main5', {
                option: option,
                title: [
                    'When `data.value` is defined and is larger than the total of its children\'s value',
                    'A value: 70. A->B: 40, A->C: 20',
                    'A should have the size of 70, which is larger than the total of its children\'s value'
                ]
            });
        });
    </script>



    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 15,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        data: [
                            { name: 'A', value: 30 },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 40 },
                            { source: 'A', target: 'C', value: 20 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main6', {
                option: option,
                title: [
                    'When `data.value` is defined and is smaller than the total of its children\'s value',
                    'A value: 30. A->B: 40, A->C: 20',
                    'A should have the size of 60, which is the total of its children\'s value'
                ]
            });
        });
    </script>



    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        data: [
                            { name: 'A' },
                            { name: 'B' },
                            { name: 'C' },
                            { name: 'D' },
                            { name: 'E' },
                            { name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B' },
                            { source: 'A', target: 'C' },
                        ],
                        lineStyle: { color: 'gradient' },
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main7', {
                option: option,
                title: [
                    'When all links have no value, the same value should be used for all links'
                ]
            });
        });
    </script>


    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            const option = {
                tooltip: {},
                legend: {},
                series: [
                    {
                        type: 'chord',
                        name: 'Gene',
                        minAngle: 45,
                        startAngle: 90,
                        endAngle: -270,
                        label: { show: true },
                        lineStyle: { color: 'gradient' },
                        data: [
                            { itemStyle: null, name: 'A' },
                            { itemStyle: null, name: 'B' },
                            { itemStyle: null, name: 'C' },
                            { itemStyle: null, name: 'D' },
                            { itemStyle: null, name: 'E' },
                            { itemStyle: null, name: 'F' }
                        ],
                        links: [
                            { source: 'A', target: 'B', value: 11 },
                            { source: 'A', target: 'C', value: 30 },
                            { source: 'B', target: 'C', value: 5 },
                            { source: 'B', target: 'D', value: 15 },
                            { source: 'B', target: 'E', value: 3 },
                            { source: 'C', target: 'D', value: 5 },
                            { source: 'C', target: 'E', value: 20 },
                            { source: 'D', target: 'E', value: 10 },
                            { source: 'E', target: 'A', value: 5 },
                            { source: 'E', target: 'B', value: 10 },
                            { source: 'E', target: 'C', value: 5 },
                            { source: 'E', target: 'D', value: 5 }
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main8', {
                option: option,
                title: [
                    'Update data'
                ],
                buttons: [{
                    text: 'Update',
                    onclick: function () {
                        const cnt = option.series[0].links.length;
                        for (let i = 0; i < cnt; i++) {
                            option.series[0].links[i].value = Math.floor(Math.random() * 50);
                        }
                        chart.setOption(option);
                    }
                }, {
                    text: 'Color: source',
                    onclick: function () {
                        option.series[0].lineStyle.color = 'source';
                        chart.setOption(option);
                    }
                }, {
                    text: 'Color: target',
                    onclick: function () {
                        option.series[0].lineStyle.color = 'target';
                        chart.setOption(option);
                    }
                }, {
                    text: 'Color: gradient',
                    onclick: function () {
                        option.series[0].lineStyle.color = 'gradient';
                        chart.setOption(option);
                    }
                }]
            });
        });
    </script>



    <script>

        var option;
        var cnt = 0;

        require([
            'echarts'/*, 'map/js/china' */
        ], function (echarts) {
            option = {
                tooltip: {},
                title: [{
                    text: 'emphasis.focus: none',
                    left: '20%',
                    textAlign: 'center'
                }, {
                    text: 'emphasis.focus: self',
                    left: '50%',
                    textAlign: 'center'
                }, {
                    text: 'emphasis.focus: adjacency (default)',
                    left: '80%',
                    textAlign: 'center'
                }],
                series: [
                    {
                        type: 'chord',
                        name: '1',
                        minAngle: 15,
                        lineStyle: { color: 'target' },
                        emphasis: {
                            focus: 'none'
                        },
                        center: ['20%', '50%'],
                        radius: [100, 110],
                        data: [
                            { name: 'A1' },
                            { name: 'B1' },
                            { name: 'C1' },
                            { name: 'D1' },
                            { name: 'E1' },
                            { name: 'F1' }
                        ],
                        links: [
                            { source: 'A1', target: 'B1', value: 40 },
                            { source: 'A1', target: 'C1', value: 20 },
                            { source: 'A1', target: 'D1', value: 10 },
                            { source: 'A1', target: 'E1', value: 2 },
                            { source: 'C1', target: 'E1', value: 10 },
                            { source: 'C1', target: 'D1', value: 5 },
                            { source: 'D1', target: 'E1', value: 5 },
                            { source: 'E1', target: 'A1', value: 5 },
                        ]
                    }, {
                        type: 'chord',
                        name: '2',
                        minAngle: 15,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        emphasis: {
                            focus: 'self'
                        },
                        center: ['50%', '50%'],
                        radius: [100, 110],
                        data: [
                            { name: 'A2' },
                            { name: 'B2' },
                            { name: 'C2' },
                            { name: 'D2' },
                            { name: 'E2' },
                            { name: 'F2' }
                        ],
                        links: [
                            { source: 'A2', target: 'B2', value: 40 },
                            { source: 'A2', target: 'C2', value: 20 },
                            { source: 'A2', target: 'D2', value: 10 },
                            { source: 'A2', target: 'E2', value: 2 },
                            { source: 'C2', target: 'E2', value: 10 },
                            { source: 'C2', target: 'D2', value: 5 },
                            { source: 'D2', target: 'E2', value: 5 },
                            { source: 'E2', target: 'A2', value: 5 },
                        ]
                    },  {
                        type: 'chord',
                        name: '3',
                        minAngle: 15,
                        label: { show: true },
                        lineStyle: { color: 'target' },
                        emphasis: {
                            focus: 'adjacency'
                        },
                        blur: {
                            lineStyle: {
                                opacity: 0.02
                            }
                        },
                        center: ['80%', '50%'],
                        radius: [100, 110],
                        data: [
                            { name: 'A3' },
                            { name: 'B3' },
                            { name: 'C3' },
                            { name: 'D3' },
                            { name: 'E3' },
                            { name: 'F3' }
                        ],
                        links: [
                            { source: 'A3', target: 'B3', value: 40 },
                            { source: 'A3', target: 'C3', value: 20 },
                            { source: 'A3', target: 'D3', value: 10 },
                            { source: 'A3', target: 'E3', value: 2 },
                            { source: 'C3', target: 'E3', value: 10 },
                            { source: 'C3', target: 'D3', value: 5 },
                            { source: 'D3', target: 'E3', value: 5 },
                            { source: 'E3', target: 'A3', value: 5 },
                        ]
                    }
                ]
            };

            var chart = testHelper.create(echarts, 'main10', {
                option: option,
                title: [
                    'emphasis.focus: target',
                ]
            });
        });
    </script>
</body>

</html>