0
|
XGTLv4见习互助发布于2024-7-2 10:29
|
|
-
帆软用户wRkdpb01Sj(提问者)
- var data = [
['id', 'parentid', 'name'],
['552', '107', '产品企划部\n 换行'],
['551', '107', '市场营销部\n 换行'],
['231', '551', '测试子节点 \n 换行'],
['107', '', '公司 \n 总经理']
];
function buildTree(data) {
const idMapping = data.reduce((acc, el, i) => {
acc[el[0]] = { name: el[2], children: [] };
return acc;
}, {});
let root;
data.forEach(el => {
if (el[1] === '') {
root = idMapping[el[0]];
} else {
const parent = idMapping[el[1]];
if (parent) {
parent.children.push(idMapping[el[0]]);
}
}
});
return root;
}
// 构建递归树
var tree = buildTree(data);
console.log("tree",tree)
option = {
series: [
{
type: 'tree',
id: 0,
name: 'tree1',
data: [tree],
top: '0%',
left: '0%',
bottom: '20%',
right: '0%',
avoidLabelOverlap: true, //防止标签重叠
roam: true, //移动+缩放 'scale' 或 'zoom':只能够缩放。 'move' 或 'pan':只能够平移。
scaleLimit: {
//缩放比例
min: 0.1, //最小的缩放值
max: 1 //最大的缩放值
},
layout: 'orthogonal', //树图布局,orthogonal水平垂直方向,radial径向布局 是指以根节点为圆心,每一层节点为环,一层层向外
orient: 'TB', //树形方向 TB为上下结构 LR为左右结构
// nodePadding: 100,//结点间距 (发现没用)
layerPadding: 30,//连接线长度 (发现没用)
//symbol: 'emptyCircle', //图形形状 rect方形 roundRect圆角 emptyCircle圆形 circle实心圆
// symbolSize: 14, //状态大小
edgeShape: 'polyline', //线条类型 curve曲线
initialTreeDepth: 1, //初始展开的层级
expandAndCollapse: true, //子树折叠和展开的交互,默认打开
label: {
rich: {
},
//width:200,
//节点文本样式
show: true, // 是否显示标签
//distance: 8, // 文本距离图形元素的距离
position: 'bottom', // 标签位置
verticalAlign: 'middle', // 文字垂直对齐方式,默认自动,top,middle,bottom
align: 'center', // 文字水平对齐方式,默认自动,left,right,center
// fontSize: 16, // 字体大小
color: '#666', // 字体颜色
backgroundColor: '#fff', // 文字块背景色。
borderColor: '#111', // 文字块边框颜色
borderWidth: 1, // 文字块边框宽度
borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
borderRadius: 5, // 文字块的圆角
padding: [0,0,8,0], // 文字块内边距
},
labelLayout: {
dy: 10,
verticalAlign: 'top'
},
lineStyle: {
// 树图边的样式
color: '#666',
//color: 'rgba(0,0,0,.35)', // 树图边的颜色
width: 1, // 树图边的宽度
curveness: 1, // 树图边的曲度
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
shadowBlur: 10 // 图形阴影的模糊大小
},
blur: {
// 淡出状态的相关配置,开启emphasis.focus后有效
itemStyle: {}, // 节点的样式
lineStyle: {}, // 树图边的样式
label: {} // 淡出标签的文本样式
},
leaves: {
// 叶子节点的特殊配置
label: {
rich:{
first:{ color: '#fff',
}
},
// 叶子节点的文本标签样式
distance: 0,
borderColor:"#9b9b9b",
backgroundColor: '#fff',
color: '#333',
position: 'bottom',
verticalAlign: 'middle'
},
itemStyle: {}, // 叶子节点的样式
emphasis: {}, // 叶子节点高亮状态的配置
blur: {}, // 叶子节点淡出状态的配置
select: {} // 叶子节点选中状态的配置
},
animationDuration: 550, // 初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果
animationDurationUpdate: 750 // 数据更新动画的时长。
}
]
};
// 事件会在窗口或框架被调整大小时发生
// 当一个页面需要展示多个图表的时候,其中一些图表会无法自适应,解决方法如下
window.onresize = function () {
// 重绘Echarts
myChart.resize();
};
-
帆软用户wRkdpb01Sj(提问者)
- 上面代码粘贴到下面的网址,自己研究呗。https://echarts.apache.org/examples/zh/editor.html
|
|