ๅŠจๆ€ๅ…ณ็ณปๅ›พ๏ผˆhtml๏ผŒ็›ดๆŽฅๅฏไปฅๅ•็‹ฌhtml่ฟ่กŒ๏ผ‰๏ผŒๆ–นไพฟ้›†ๆˆ้กน็›ฎ

ๅœจ่ฟ™้‡Œๆ’ๅ…ฅๅ›พ็‰‡ๆ่ฟฐ
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–
๐Ÿ–๐Ÿ–
๐Ÿ–๐Ÿ–๐Ÿ–
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ไฝœ่€… ๏ผš ไธ่‰ฏไฝฟ
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๆฝœๅŠ›ๅˆ›ไฝœๆ–ฐๆ˜Ÿ ๅŽไธบไบ‘ไบซไธ“ๅฎถ
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๅšๅฎข่ฎฐๅฝ•ๅญฆไน ็š„ๆ€่ทฏ๏ผŒ้กน็›ฎๅ’Œ้”™่ฏฏ,ๅฏปๆ‰พๅฟ—ๅŒ้“ๅˆ็š„ๆœ‹ๅ‹
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๅฆ‚ๆžœ่ง‰ๅพ—ๆœ‰ๅธฎๅŠฉ่ฎฐๅพ—ไธ€้”ฎไธ‰่ฟž โ”—|๏ฝ€Oโ€ฒ|โ”› ๅ—ท~~
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–
๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ– ๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–๐Ÿ–




ๆœ€่ฟ‘ๅšไธ€ไธช้กน็›ฎ้œ€่ฆ็”จๅˆฐๅฏ่ง†ๅŒ–๏ผˆๆ•ฐๆฎไผ ๅˆฐๅ‰็ซฏไบง็”Ÿๅฏ่ง†ๅŒ–็•Œ้ข๏ผ‰๏ผŒไฝ†ๆ˜ฏ็ฝ‘ไธŠ็š„่ฆไธๅฐฑๆ˜ฏๆฎ‹็ ๏ผŒ่ฆไธๅฐฑๆ˜ฏ่ฆไป˜่ดน็š„๏ผŒไธบๆˆ‘ๅธฆๆฅๅพˆๅคšๅ›ฐๆ‰ฐ๏ผŒไธบไบ†ๆ‘†่„ฑ่ฟ™ๆ ท็š„ๅ›ฐๆ‰ฐ๏ผŒๆˆ‘ๅฐ†ๆˆ‘็”จๅˆฐ็š„ไธ€ไบ›ๅฏ่ง†ไนŽๅˆ†ไบซ็ป™ๅคงๅฎถ๏ผŒๅธŒๆœ›็คพๅŒบ่ถŠๅš่ถŠๅฅฝใ€‚

ๅœจ่ฟ™้‡Œๆ’ๅ…ฅๅ›พ็‰‡ๆ่ฟฐ

ๅ…ˆไธŠๅ›พ๏ผš
ๅœจ่ฟ™้‡Œๆ’ๅ…ฅๅ›พ็‰‡ๆ่ฟฐ

่ฟ™ไบ›ๅ›พ้ƒฝๆ˜ฏๅฏไปฅๆ‹–ๅŠจ็š„๏ผŒๆฏไธชๅ…จ้ƒฝๆ˜ฏๅฏไปฅๆ‹–ๅŠจ็š„๏ผŒๆ‹–ๅŠจไธ€ไธชๅ…ถไป–ๅธƒๅฑ€ไนŸๅ‘็”Ÿ็›ธๅบ”็š„ๆ”นๅ˜ใ€‚ๅ› ไธบๅšไธปๆš‚ๆ—ถๆŠ€่ƒฝๆœ‰้™๏ผŒๅผ„ไธๅ‡บ้™ๆ€ๅ›พ็‰‡๏ผŒๅคงๅฎถๅ‡‘ๅˆ็€็œ‹ๅง๐Ÿ˜‚๐Ÿ˜‚ใ€‚ไธ‹้ข็›ดๆŽฅไธŠไปฃ็ ๏ผŒไธ้—ฒ่Šใ€‚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>

<body>
<div id="garps" class="container" style="width: 800px;height: 600px">
<script src="https://assets.pyecharts.org/assets/main.js"></script>
    <script>
        var chart_b859ef36a1b245b2b1eb24efe9b62146 = echarts.init(
            document.getElementById('garps'), 'white', {renderer: 'canvas'});
        option = {
    backgroundColor: '#1a4377',
    grid: {
        left: '10%',
        top: 60,
        right: '10%',
        bottom: 60,
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [{
        type: 'graph',
        layout: 'force',
        force: {
            repulsion: 1000,
            edgeLength: 70,
            layoutAnimation: true,
        },
        symbolSize: 70,
        nodeScaleRatio: 1, //ๅ›พๆ ‡ๅคงๅฐๆ˜ฏๅฆ้š้ผ ๆ ‡ๆปšๅŠจ่€Œๅ˜
        roam: true, //็ผฉๆ”พ
        draggable: true, //่Š‚็‚นๆ˜ฏๅฆๅฏไปฅๆ‹–ๆ‹ฝ
        focusNodeAdjacency: false, //ๆ˜ฏๅฆๅœจ้ผ ๆ ‡็งปๅˆฐ่Š‚็‚นไธŠ็š„ๆ—ถๅ€™็ชๅ‡บๆ˜พ็คบ่Š‚็‚นไปฅๅŠ่Š‚็‚น็š„่พนๅ’Œ้‚ปๆŽฅ่Š‚็‚น
        edgeSymbol: ['circle', 'arrow'], //็บฟ2ๅคดๆ ‡่ฎฐ
        label: {
            normal: {
                show: true,
                position: 'inside',
                color: 'gold'
            }
        },
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
                formatter: "{c}"
            }
        },
        categories: [{
            name: 'ไบฒไบบ',
        }, {
            name: '็งŸๆˆท',
            symbol: 'rect'
        }],
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#e0f55a' // 0% ๅค„็š„้ขœ่‰ฒ
                    }, {
                        offset: 1,
                        color: '#639564' // 100% ๅค„็š„้ขœ่‰ฒ
                    }],
                    globalCoord: false // ็ผบ็œไธบ false
                }
            }
        },
        symbolKeepAspect: false,
        data: [{
                name: 'ๆŽๅฏŒ่ดต',
            },
            {
                name: '็Ž‹ๆก‚่Šฑ',
            },
            {
                name: 'ๆŽๆ€ๆ€',
            },
            {
                name: '่‡ชไฝๆˆฟๅฑ‹',

            },
            {
                name: '่ฝฆๅญ',

            },
            {
                name: '็งŸๆˆฟ',

            },
            {
                name: '้ป„ๆถ›',
            },
            {
                name: 'ไบŽๆตท',

            },
            {
                name: 'ๅผ ๆŸ',
            },
            {
                name: 'ไป˜ๆขฆๆฐ',
            }
        ],
        links: [{
                source: 0,
                target: 1,
                value: 'ๅคซๅฆป'
            },
            {
                source: 0,
                target: 2,
                value: '็ˆถๅฅณ'
            },
            {
                source: 0,
                target: 3,
                value: '่‡ชไฝ'
            },
            {
                source: 0,
                target: 4,
                value: '่ฝฆไธป'
            },
            {
                source: 0,
                target: 5,
                value: '็งŸๆˆท'
            },
            {
                source: 5,
                target: 6,
                value: '็งŸ่ต'

            },
            {
                source: 5,
                target: 7,
                value: '็งŸ่ต'
            },
            {
                source: 5,
                target: 8,
                value: '็งŸ่ต'
            },
            {
                source: 5,
                target: 9,
                value: '็งŸ่ต'
            }
        ],
    }]
}
chart_b859ef36a1b245b2b1eb24efe9b62146.setOption(option);
    </script>
</div>
</body>
</html>

ไนŸๅฏไปฅๆ˜ฏ่ฟ™ๆ ท
ๅœจ่ฟ™้‡Œๆ’ๅ…ฅๅ›พ็‰‡ๆ่ฟฐ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>

<body>
<div id="garps" class="container" style="width: 800px;height: 600px">
<script src="https://assets.pyecharts.org/assets/main.js"></script>
    <script>
        var chart_b859ef36a1b245b2b1eb24efe9b62146 = echarts.init(
            document.getElementById('garps'), 'white', {renderer: 'canvas'});
        option = {
    backgroundColor: '#1a4377',
    grid: {
        left: '10%',
        top: 60,
        right: '10%',
        bottom: 60,
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [{
        type: 'graph',
        layout: 'force',
        force: {
            repulsion: 1000,
            edgeLength: 70,
            layoutAnimation: true,
        },
        symbolSize: 70,
        nodeScaleRatio: 1, //ๅ›พๆ ‡ๅคงๅฐๆ˜ฏๅฆ้š้ผ ๆ ‡ๆปšๅŠจ่€Œๅ˜
        roam: true, //็ผฉๆ”พ
        draggable: true, //่Š‚็‚นๆ˜ฏๅฆๅฏไปฅๆ‹–ๆ‹ฝ
        focusNodeAdjacency: false, //ๆ˜ฏๅฆๅœจ้ผ ๆ ‡็งปๅˆฐ่Š‚็‚นไธŠ็š„ๆ—ถๅ€™็ชๅ‡บๆ˜พ็คบ่Š‚็‚นไปฅๅŠ่Š‚็‚น็š„่พนๅ’Œ้‚ปๆŽฅ่Š‚็‚น
        edgeSymbol: ['circle', 'arrow'], //็บฟ2ๅคดๆ ‡่ฎฐ
        label: {
            normal: {
                show: true,
                position: 'inside',
                color: 'gold'
            }
        },
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
                formatter: "{c}"
            }
        },
        categories: [{
            name: 'ไบฒไบบ',
        }, {
            name: '็งŸๆˆท',
            symbol: 'rect'
        }],
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#e0f55a' // 0% ๅค„็š„้ขœ่‰ฒ
                    }, {
                        offset: 1,
                        color: '#639564' // 100% ๅค„็š„้ขœ่‰ฒ
                    }],
                    globalCoord: false // ็ผบ็œไธบ false
                }
            }
        },
        symbolKeepAspect: false,
        data: [{
                name: 'ๆŽๅฏŒ่ดต',
            },
            {
                name: '็Ž‹ๆก‚่Šฑ',
            },
            {
                name: 'ๆŽๆ€ๆ€',
            },

            {
                name: '้ป„ๆถ›',
            },
            {
                name: 'ไบŽๆตท',

            },
            {
                name: 'ๅผ ๆŸ',
            },
            {
                name: 'ไป˜ๆขฆๆฐ',
            }
        ],
        links: [{
                source: 0,
                target: 1,
                value: 'ๅคซๅฆป'
            },
            {
                source: 0,
                target: 2,
                value: '็ˆถๅฅณ'
            },
            {
                source: 0,
                target: 3,
                value: '่‡ชไฝ'
            },
            {
                source: 0,
                target: 4,
                value: '่ฝฆไธป'
            },
            {
                source: 0,
                target: 5,
                value: '็งŸๆˆท'
            },
            {
                source: 0,
                target: 6,
                value: '็งŸ่ต'

            }
        ],
    }]
}
chart_b859ef36a1b245b2b1eb24efe9b62146.setOption(option);
    </script>
</div>
</body>
</html>

ๆ‹ฟๅŽปๅฐฑ่ƒฝ่ท‘๏ผŒไธไผš่ฆๅฏผjs็ญ‰ๅŒ…๏ผŒๅ› ไธบๆ˜ฏๅŠจๆ€็š„ๅœฐๅ€

<script src="https://assets.pyecharts.org/assets/main.js"></script>

ๅฝ“้œ€่ฆ่ฟ™ไธชjsๅŒ…็š„ๆ—ถๅ€™ไผš่‡ชๅŠจๅŽป่ฎฟ้—ฎๅฎ˜็ฝ‘็š„่ฟ™ไธชjsๅŒ…๏ผŒๆฒกๆœ‰ๅฟ…่ฆไธ€ๅฎš่ฆๆŠŠๅฎƒไธ‹่ฝฝๅˆฐ่‡ชๅทฑ็š„็”ต่„‘ใ€‚







่ง‰ๅพ—ๆœ‰็”จ็š„ๅฏไปฅ็ป™ไธชไธ‰่ฟž๏ผŒๅ…ณๆณจไธ€ๆณข๏ผ๏ผ๏ผๅธฆไฝ ไบ†่งฃๆ›ดๅคš็š„ๅ‰็ซฏๅฐ็Ÿฅ่ฏ†

ๆœฌๅ›พๆ–‡ๅ†…ๅฎนๆฅๆบไบŽ็ฝ‘ๅ‹็ฝ‘็ปœๆ”ถ้›†ๆ•ด็†ๆไพ›๏ผŒไฝœไธบๅญฆไน ๅ‚่€ƒไฝฟ็”จ๏ผŒ็‰ˆๆƒๅฑžไบŽๅŽŸไฝœ่€…ใ€‚
THE END
ๅˆ†ไบซ
ไบŒ็ปด็ 
< <ไธŠไธ€็ฏ‡

)">
ไธ‹ไธ€็ฏ‡>>