v7: 折线连线+搜索显示完整路径

This commit is contained in:
2026-08-06 16:31:50 +08:00
parent 791d66c8b6
commit dd78f3f832
+47 -8
View File
@@ -138,7 +138,8 @@ var baseOption = {
label:{ position:'bottom', fontSize:11, color:'#333', formatter:'{b}', distance:4 }, label:{ position:'bottom', fontSize:11, color:'#333', formatter:'{b}', distance:4 },
leaves:{ label:{ position:'bottom', fontSize:11, color:'#333' } }, leaves:{ label:{ position:'bottom', fontSize:11, color:'#333' } },
emphasis:{ focus:'descendant' }, emphasis:{ focus:'descendant' },
lineStyle:{ color:'#999', width:1.2, curveness:0.15 }, edgeShape:'polyline',
lineStyle:{ color:'#999', width:1.2, curveness:0 },
itemStyle:{ color:function(p){ return (p.data.children&&p.data.children.length)?'#1e6fd9':'#aab'; } } itemStyle:{ color:function(p){ return (p.data.children&&p.data.children.length)?'#1e6fd9':'#aab'; } }
}] }]
}; };
@@ -198,31 +199,69 @@ function expandPath(path) {
var names = path.slice(0, -1).map(function(n){ return n.name; }); var names = path.slice(0, -1).map(function(n){ return n.name; });
if (names.length) chart.dispatchAction({ type:'treeExpandAndCollapse', seriesIndex:0, name: names }); if (names.length) chart.dispatchAction({ type:'treeExpandAndCollapse', seriesIndex:0, name: names });
} }
// 剪枝:只保留命中公司的完整路径(祖先链 + 该公司子树)
function prunePath(targetName) {
function build(n) {
var node = { name: n.name };
if (n.org2) node.org2 = n.org2;
if (n.name === targetName) {
// 命中:保留其直属子公司(供展开查看)
if (n.children && n.children.length) {
node.children = n.children.map(function(c){ return { name: c.name, org2: c.org2 || '' }; });
}
node.matched = true;
return node;
}
if (n.children && n.children.length) {
for (var i=0;i<n.children.length;i++) {
var sub = build(n.children[i]);
if (sub) {
node.children = [sub];
return node;
}
}
}
return null;
}
var pruned = build(rootNode);
return pruned ? [pruned] : null;
}
searchInput.addEventListener('input', function() { searchInput.addEventListener('input', function() {
var q = searchInput.value.trim().toLowerCase(); var q = searchInput.value.trim().toLowerCase();
clearBtn.style.display = q ? 'block' : 'none'; clearBtn.style.display = q ? 'block' : 'none';
if (!q) { chart.setOption({ series:[{ data: [rootNode], label:{formatter:'{b}', rich:{}} }] }); return; } if (!q) {
chart.setOption({ series:[{ data: [rootNode], label:{formatter:'{b}', rich:{}} }] });
return;
}
var matches = allNames.filter(function(n){ return n.toLowerCase().indexOf(q) !== -1; }); var matches = allNames.filter(function(n){ return n.toLowerCase().indexOf(q) !== -1; });
if (matches.length === 0) { showTip('未找到包含「'+q+'」的公司'); return; } if (matches.length === 0) { showTip('未找到包含「'+q+'」的公司'); return; }
if (matches.length > 50) { showTip('找到 '+matches.length+' 家,仅展示前 50,请更精确'); matches = matches.slice(0,50); } if (matches.length > 50) { showTip('找到 '+matches.length+' 家,仅展示前 50,请更精确'); matches = matches.slice(0,50); }
var first = matches[0]; var first = matches[0];
var path = findPath(first, rootNode, []); var pruned = prunePath(first);
if (path) expandPath(path); if (pruned) {
showTip('找到 ' + matches.length + ' 家:' + matches.slice(0,5).join('、') + (matches.length>5?'…':''));
chart.setOption({ chart.setOption({
series: [{ series: [{
data: [rootNode], data: pruned,
initialTreeDepth: 99,
label: { label: {
formatter: function(p){ formatter: function(p){
if (p.data && p.data.name.toLowerCase().indexOf(q) !== -1) return '{matched|'+p.data.name+'}'; if (p.data && p.data.name.toLowerCase().indexOf(q) !== -1) return '{matched|'+p.data.name+'}';
return p.data ? p.data.name : ''; return p.data ? p.data.name : '';
}, },
rich: { matched:{ color:'#e6a700', fontWeight:'bold' } } rich: { matched:{ color:'#e6a700', fontWeight:'bold', fontSize:13 } }
} }
}] }]
}); });
showTip('定位到「'+first+'」 共 ' + matches.length + ' 家匹配,显示完整路径');
} else {
showTip('找到 ' + matches.length + ' 家:' + matches.slice(0,5).join('、') + (matches.length>5?'…':''));
}
}); });
clearBtn.onclick = function(){ searchInput.value=''; clearBtn.style.display='none'; chart.setOption({ series:[{ data: [rootNode], label:{formatter:'{b}', rich:{}} }] }); }; clearBtn.onclick = function(){
searchInput.value=''; clearBtn.style.display='none';
chart.setOption({ series:[{ data: [rootNode], initialTreeDepth:1, label:{formatter:'{b}', rich:{}} }] });
};
chart.on('click', function(p){ chart.on('click', function(p){
if (p.data && p.data.children && p.data.children.length) { if (p.data && p.data.children && p.data.children.length) {