ๅจๆๅ ณ็ณปๅพ๏ผ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ๅ ๏ผๆฒกๆๅฟ ่ฆไธๅฎ่ฆๆๅฎไธ่ฝฝๅฐ่ชๅทฑ็็ต่ใ
่งๅพๆ็จ็ๅฏไปฅ็ปไธชไธ่ฟ๏ผๅ ณๆณจไธๆณข๏ผ๏ผ๏ผๅธฆไฝ ไบ่งฃๆดๅค็ๅ็ซฏๅฐ็ฅ่ฏ