1. JSPlumb
1). 效果圖
2). 需要引入的JS文件：
① jquery-1.11.3.js，添加到和html文件同級目錄下的JSFiles文件中，保證<script src="./JSFiles/jquery-1.11.3.js"></script>能夠正常引用；
② jquery-ui.js，添加位置同上；
③ jquery.jsplumb.js，添加位置同上。
3). HTML中的要點
① 在樣式#diagramContainer中設置繪圖面板長和寬；
② 在樣式.rectangle-narrow-size中設置較窄的矩形框的長寬及直角，如“預定住宿”是一個這種類型的矩形框，在樣式.rectangle-midwide-size中設置較寬的矩形框的長寬及直角，如“收到會議通知”是一個這種類型的矩形框，在樣式.rectangle- start-end -size中設置圓角的開始及結束矩形框；
③ connector: ['Flowchart']中指定了圖形的格式爲流程圖格式；
④ 在矩形框的上右下左四條邊可以添加用於連接的端點，端點的顏色、半徑在connectorStyle中設置；
⑤ 通過jsPlumb.addEndpoint在已有矩形框的邊上添加端點；
⑥ 通過jsPlumb.connect在兩個端點之間添加連線（帶箭頭）
4). HTML的主要內容
<!DOCTYPE html>
<!-- saved from url=(0057)https://wdd.js.org/jsplumb-chinese-tutorial/demos/17.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#diagramContainer {
padding: 20px;
width: 100%;
height: 1100px;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.item {
height: 80px;
width: 80px;
border: 1px solid blue;
float: left;
}
.rectangle-narrow-size {
position: absolute;
text-align: center;
line-height: 45px;
height: 45px;
width: 100px;
border: 2px solid #000;
}
.rectangle-midwide-size {
position: absolute;
text-align: center;
line-height: 45px;
height: 45px;
width: 150px;
border: 2px solid #000;
}
.rectangle-start-end-size {
position: absolute;
text-align: center;
line-height: 45px;
height: 45px;
width: 100px;
border: 2px solid #000;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="diagramContainer">
<div id="Start" class="rectangle-start-end-size" style="left: 500px; top: 100px;">開始</div>
<div id="MeetingInvitation" class="rectangle-midwide-size" style="left: 475px; top: 200px;">收到會議通知</div>
<div id="MeetingInvitationFile" class="rectangle-midwide-size" style="left: 800px; top: 200px;">會議邀請函</div>
<div id="MeetingApply" class="rectangle-midwide-size" style="left: 475px; top: 300px;">申請參加會議</div>
<div id="MeetingApplyFile" class="rectangle-narrow-size" style="left: 750px; top: 300px;">審批單</div>
<div id="MeetingRegister" class="rectangle-midwide-size" style="left: 475px; top: 400px;">報名參加會議</div>
<div id="MeetingRegisterBill" class="rectangle-narrow-size" style="left: 680px; top: 400px;">報名費發票</div>
<div id="HotelReservation" class="rectangle-narrow-size" style="left: 500px; top: 500px;">預定住宿</div>
<div id="BuyTickets" class="rectangle-midwide-size" style="left: 475px; top: 600px;">購買車票/機票</div>
<div id="Tickets" class="rectangle-narrow-size" style="left: 200px; top: 600px;">車票/機票</div>
<div id="MeetingAttendation" class="rectangle-narrow-size" style="left: 500px; top: 700px;">參加會議</div>
<div id="CheckOutHotel" class="rectangle-narrow-size" style="left: 500px; top: 800px;">辦理退房手續</div>
<div id="HotelBill" class="rectangle-midwide-size" style="left: 300px; top: 800px;">住宿發票及流水單</div>
<div id="Reimbursement" class="rectangle-narrow-size" style="left: 500px; top: 900px;">報銷</div>
<div id="End" class="rectangle-start-end-size" style="left: 500px; top: 1000px;">結束</div>
<script src="./JSFiles/jquery-1.11.3.js"></script>
<script src="./JSFiles/jquery-ui.js"></script>
<script src="./JSFiles/jquery.jsplumb.js"></script>
<script>
/* global jsPlumb */
var config = {}
config.connectorPaintStyle = {
lineWidth: 1,
strokeStyle: 'black',
joinstyle: 'round',
fill: 'pink',
outlineColor: '',
outlineWidth: ''
}
// 鼠標懸浮在連接線上的樣式
config.connectorHoverStyle = {
lineWidth: 2,
strokeStyle: 'red',
outlineWidth: 10,
outlineColor: ''
}
config.baseStyle = {
endpoint: ['Dot', {
radius: 8,
fill: '#ff5722'
}], // 端點的形狀
connectorStyle: config.connectorPaintStyle, // 連接線的顏色，大小樣式
connectorHoverStyle: config.connectorHoverStyle,
paintStyle: {
fillStyle: 'black',
radius: 3
// lineWidth: 0
}, // 端點的顏色樣式
hoverPaintStyle: {
fillStyle: 'red',
strokeStyle: 'red'
},
isSource: true, // 是否可以拖動（作爲連線起點）
connector: ['Flowchart', {
gap: 0,
cornerRadius: 5,
alwaysRespectStubs: true
}], // 連接線的樣式種類有[Bezier],[Flowchart],[StateMachine ],[Straight ]
isTarget: true, // 是否可以放置（連線終點）
maxConnections: -1, // 設置連接點最多可以連接幾條線
connectorOverlays: [
['Arrow', {
width: 10,
length: 10,
location: 1
}],
['Label', {
label: '',
cssClass: '',
labelStyle: {
color: 'red'
},
events: {
click: function (labelOverlay, originalEvent) {
console.log('click on label overlay for :' + labelOverlay.component)
console.log(labelOverlay)
console.log(originalEvent)
}
}
}]
]
}
jsPlumb.ready(function () {
jsPlumb.setContainer('diagramContainer')
//Start——> MeetingInvitation
jsPlumb.addEndpoint('Start', {uuid: 'Start_Bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingInvitation', {uuid: 'MeetingInvitation_Top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['Start_Bottom', 'MeetingInvitation_Top']});
//MeetingInvitation——> MeetingInvitationFile
jsPlumb.addEndpoint('MeetingInvitation', {uuid: 'MeetingInvitation_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingInvitationFile', {uuid: 'MeetingInvitationFile_Left', anchor: 'Left'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingInvitation_right', 'MeetingInvitationFile_Left']});
//MeetingInvitation——> MeetingApply
jsPlumb.addEndpoint('MeetingInvitation', {uuid: 'MeetingInvitation_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingApply', {uuid: 'MeetingApply_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingInvitation_bottom', 'MeetingApply_top']});
//MeetingApply> MeetingApplyFile
jsPlumb.addEndpoint('MeetingApply', {uuid: 'MeetingApply_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingApplyFile', {uuid: 'MeetingApplyFile_left', anchor: 'Left'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingApply_right', 'MeetingApplyFile_left']});
//MeetingApply> MeetingRegister
jsPlumb.addEndpoint('MeetingApply', {uuid: 'MeetingApply_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingRegister', {uuid: 'MeetingRegister_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingApply_bottom', 'MeetingRegister_top']});
//MeetingRegister> HotelReservation
jsPlumb.addEndpoint('MeetingRegister', {uuid: 'MeetingRegister_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('HotelReservation', {uuid: 'HotelReservation_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingRegister_bottom', 'HotelReservation_top']});
//HotelReservation> BuyTickets
jsPlumb.addEndpoint('HotelReservation', {uuid: 'HotelReservation_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('BuyTickets', {uuid: 'BuyTickets_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['HotelReservation_bottom', 'BuyTickets_top']});
//BuyTickets> MeetingAttendation
jsPlumb.addEndpoint('BuyTickets', {uuid: 'BuyTickets_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingAttendation', {uuid: 'MeetingAttendation_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['BuyTickets_bottom', 'MeetingAttendation_top']});
//MeetingAttendation> CheckOutHotel
jsPlumb.addEndpoint('MeetingAttendation', {uuid: 'MeetingAttendation_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('CheckOutHotel', {uuid: 'CheckOutHotel_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingAttendation_bottom', 'CheckOutHotel_top']});
//CheckOutHotel> Reimbursement
jsPlumb.addEndpoint('CheckOutHotel', {uuid: 'CheckOutHotel_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['CheckOutHotel_bottom', 'Reimbursement_top']});
//Reimbursement> End
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('End', {uuid: 'End_top', anchor: 'Top'}, config.baseStyle)
jsPlumb.connect({uuids: ['Reimbursement_bottom', 'End_top']});
//MeetingRegister> MeetingRegisterBill
jsPlumb.addEndpoint('MeetingRegister', {uuid: 'MeetingRegister_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.addEndpoint('MeetingRegisterBill', {uuid: 'MeetingRegisterBill_left', anchor: 'Left'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingRegister_right', 'MeetingRegisterBill_left']});
//BuyTickets> Tickets
jsPlumb.addEndpoint('BuyTickets', {uuid: 'BuyTickets_left', anchor: 'Left'}, config.baseStyle)
jsPlumb.addEndpoint('Tickets', {uuid: 'Tickets_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.connect({uuids: ['BuyTickets_left', 'Tickets_right']});
//CheckOutHotel> HotelBill
jsPlumb.addEndpoint('CheckOutHotel', {uuid: 'CheckOutHotel_left', anchor: 'Left'}, config.baseStyle)
jsPlumb.addEndpoint('HotelBill', {uuid: 'HotelBill_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.connect({uuids: ['CheckOutHotel_left', 'HotelBill_right']});
//MeetingInvitationFile> Reimbursement
jsPlumb.addEndpoint('MeetingInvitationFile', {uuid: 'MeetingInvitationFile_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingInvitationFile_bottom', 'Reimbursement_right']});
//MeetingApplyFile> Reimbursement
jsPlumb.addEndpoint('MeetingApplyFile', {uuid: 'MeetingApplyFile_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingApplyFile_bottom', 'Reimbursement_right']});
//MeetingRegisterBill> Reimbursement
jsPlumb.addEndpoint('MeetingRegisterBill', {uuid: 'MeetingRegisterBill_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_right', anchor: 'Right'}, config.baseStyle)
jsPlumb.connect({uuids: ['MeetingRegisterBill_bottom', 'Reimbursement_right']});
//Tickets> Reimbursement
jsPlumb.addEndpoint('Tickets', {uuid: 'Tickets_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_left', anchor: 'Left'}, config.baseStyle)
jsPlumb.connect({uuids: ['Tickets_bottom', 'Reimbursement_left']});
//HotelBill> Reimbursement
jsPlumb.addEndpoint('HotelBill', {uuid: 'HotelBill_bottom', anchor: 'Bottom'}, config.baseStyle)
jsPlumb.addEndpoint('Reimbursement', {uuid: 'Reimbursement_left', anchor: 'Left'}, config.baseStyle)
jsPlumb.connect({uuids: ['HotelBill_bottom', 'Reimbursement_left']});
// jsPlumb.addEndpoint('MeetingInvitation', {
// anchors: ['Top']
// }, config.baseStyle)
})
</script>
</body></html>
2. ECharts
1). 效果圖
2). 需要引入的JS文件：echarts.min.js，添加到html文件同級目錄下，保證<script src="echarts.min.js"></script>能夠正常引用即可。
3). HTML中的要點
① 在<div id="main" style="width:100%;height:1000px;"></div>中設置繪圖面板長和寬
② 在series的data中添加節點，在links中添加節點之間的連接（箭頭）
③ 連接的曲直由lineStyle中的curveness屬性來控制，粗細由width來控制
④ 節點（圓）的半徑由series中的symbolSize屬性來控制
4). HTML的主要內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:100%;height:1000px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 模擬數據
function getVirtulData(year) {
year = year || '2017';
var date = +echarts.number.parseDate(year + '-01-01');
var end = +echarts.number.parseDate(year + '-12-31');
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time <= end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
option = {
title: {
text: '參加會議'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 90,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 0
},
data: [{
name: '開始',
x: 200,
y: 10
}, {
name: '收到會議通知',
x: 500,
y: 10
}, {
name: '會議邀請函',
x: 900,
y: 10
}, {
name: '申請參加會議',
x: 500,
y: 130
}, {
name: '審批單',
x: 780,
y: 130
}, {
name: '報名參加會議',
x: 500,
y: 250
}, {
name: '報名費發票',
x: 650,
y: 250
}, {
name: '預定住宿',
x: 500,
y: 370
}, {
name: '購買車票/機票',
x: 500,
y: 490
}, {
name: '車票/機票',
x: 100,
y: 490
}, {
name: '參加會議',
x: 500,
y: 610
}, {
name: '辦理退房手續',
x: 500,
y: 730
}, {
name: '住宿發票及流水',
x: 380,
y: 730
}, {
name: '報銷',
x: 500,
y: 850
}, {
name: '結束',
x: 800,
y: 850
}],
// links: [],
links: [{
source: 100,
target: 101,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
}, {
source: '節點2',
target: '節點1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
}, {
source: '開始',
target: '收到會議通知'
}, {
source: '收到會議通知',
target: '會議邀請函'
}, {
source: '收到會議通知',
target: '申請參加會議'
}, {
source: '申請參加會議',
target: '審批單'
}, {
source: '審批單',
target: '報銷',
lineStyle: {
curveness: 0.2
}
}, {
source: '申請參加會議',
target: '報名參加會議'
}, {
source: '會議邀請函',
target: '報銷',
lineStyle: {
curveness: 0.17
}
}, {
source: '報名參加會議',
target: '預定住宿'
}, {
source: '報名參加會議',
target: '報名費發票'
}, {
source: '報名費發票',
target: '報銷',
lineStyle: {
curveness: 0.2
}
}, {
source: '預定住宿',
target: '購買車票/機票'
}, {
source: '購買車票/機票',
target: '車票/機票'
}, {
source: '購買車票/機票',
target: '參加會議'
}, {
source: '車票/機票',
target: '報銷',
lineStyle: {
curveness: -0.3
}
}, {
source: '參加會議',
target: '辦理退房手續'
}, {
source: '辦理退房手續',
target: '住宿發票及流水'
}, {
source: '辦理退房手續',
target: '報銷'
}, {
source: '住宿發票及流水',
target: '報銷'
}, {
source: '報銷',
target: '結束'
}],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>