基于echarts树图画组织结构图
注:新版本echarts已有折线树图绘制功能(Tree with Polyline),本法适合v4.2.1之前版本
1、下载echarts插件
官网地址:https://echarts.baidu.com/
下载地址:https://echarts.baidu.com/download.html
2、页面引入插件并初始化
<!DOCTYPE html>
<html>
<head>
...
<style type="text/css">
/*宽高根据实际需要调节*/
#main { height:180%; width: 100%;}
</style>
</head>
<body>
<div id="main"></div>
<!-- 注:此处引入的是未压缩文件 -->
<script src="../../js/plugins/echarts-4.2.1/dist/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var data = {
"name": "xxxx",
"children": [
...
]
};
var option = {
...
series:[
{
type: 'tree', // 设置树图
name: 'xxxx',
data: [data],
layout: 'orthogona', // 正交布局(水平布局)
symbol: 'rect', // 矩形标记
symbolSize: [88, 30], // 标记大小
initialTreeDepth: 2, // 树图层级
label: {
normal: {
position: 'right',
verticalAlign: 'middle',
fontSize: 12,
offset: [-86, 0], // 文本偏移量
color:'#00173d',
align: 'left'
}
},
lineStyle: {
curveness: 0.5, // 树图边的曲度
}
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
3、树图初始效果
4、修改echarts.js源码使树图显示成组织架构图
/*
* 修改updateNode函数
* 把生成连接各节点的贝塞尔曲线BezierCurve,改成多边形折线Polyline
* 修改getEdgeShape方法,生成多边形折线的各个点坐标
* 注:echarts使用了zrender
*/
function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope){
...
if (node.parentNode && node.parentNode !== virtualRoot){
var edge = symbolEl.__edge;
// 贝塞尔曲线
// if (!edge) {
// edge = symbolEl.__edge = new BezierCurve({
// shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
// style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
// });
// }
//
// updateProps(edge, {
// shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
// style: {opacity: 1}
// }, seriesModel);
// 多边形折线
if (!edge) {
edge = symbolEl.__edge = new Polyline({
shape: {
points: getEdgeShape(seriesScope, sourceLayout, targetLayout)
},
style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
});
}
updateProps(edge, {
shape: {
points: getEdgeShape(seriesScope, sourceLayout, targetLayout)
},
style: {opacity: 1}
}, seriesModel);
group.add(edge);
}
...
}
/*
* 修改水平方向(orient === 'LR' || orient === 'RL)的坐标生成方式(可根据需要自己调整)
* 利用curvature调节折线位置坐标,curvature范围:0~1
* 返回多边形折线Polyline需要的二位数组坐标
*/
function getEdgeShape(seriesScope, sourceLayout, targetLayout) {
var cpx1;
var cpy1;
var cpx2;
var cpy2;
var orient = seriesScope.orient;
var x1;
var x2;
var y1;
var y2;
if (seriesScope.layout === 'radial') {
...
}
else {
x1 = sourceLayout.x;
y1 = sourceLayout.y;
x2 = targetLayout.x;
y2 = targetLayout.y;
if (orient === 'LR' || orient === 'RL') { // 折线节点坐标
// cpx1 = x1 + (x2 - x1) * seriesScope.curvature;
// cpy1 = y1;
// cpx2 = x2 + (x1 - x2) * seriesScope.curvature;
// cpy2 = y2;
cpx1 = x1 + (x2 - x1) * seriesScope.curvature;
cpy1 = y1;
cpx2 = x1 + (x2 - x1) * seriesScope.curvature;
cpy2 = y2;
}
if (orient === 'TB' || orient === 'BT') {
...
}
}
return [[x1,y1],[cpx1,cpy1],[cpx2,cpy2],[x2,y2]]; // 二维数组
// return {
// x1: x1,
// y1: y1,
// x2: x2,
// y2: y2,
// cpx1: cpx1,
// cpy1: cpy1,
// cpx2: cpx2,
// cpy2: cpy2
// };
}
效果图