<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Editable Organization Chart</title>
<!-- Import ECharts library -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<script>
// Sample data for the organization chart
var data = {
name: "CEO",
children: [
{
name: "Manager 1",
children: [{ name: "Employee 1" }, { name: "Employee 2" }]
},
{
name: "Manager 2",
children: [{ name: "Employee 1" }, { name: "Employee 3" }]
}
]
};
// Create the options object for ECharts
var options = {
series: [
{
type: "tree",
data: [data],
top: "10%",
left: "20%",
bottom: "10%",
right: "20%",
symbol: "emptyCircle",
symbolSize: 7,
initialTreeDepth: 2,
label: {
position: "bottom",
verticalAlign: "middle",
align: "center"
},
leaves: {
label: {
position: "top",
verticalAlign: "middle",
align: "center"
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750,
layout: "orthogonal" // Set the layout to orthogonal
}
],
lineStyle: {
curveness: 0.5, // Adjust the curveness of the lines
type: "solid" // Set the line type to dotted for broken lines
}
};
// Create the organization chart using ECharts
var chart = echarts.init(document.getElementById("chart"));
chart.setOption(options);
// Add event listener for node click
chart.on("click", function (params) {
if (params.data.name !== "CEO") {
var newName = prompt("Enter a new name for " + params.data.name);
if (newName) {
params.data.name = newName;
chart.setOption(options);
}
}
});
</script>
</body>
</html>
