代码拉取完成，页面将自动刷新
<!--
Echart 图实现节点可折叠，单击事件触发
作者：Mason
版本：V0.1
时间：2017年7月5日10:07:54
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test4</title>
</head>
<body>
<div id="main" style="width: 850px; height: 500px"></div>
<div id="ss"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(["echarts", "echarts/chart/force"], function(ec) {
var myChart = ec.init(document.getElementById('main'), 'macarons');
var option = {
tooltip: {
show: false
},
series: [{
type: 'force',
name: "Force tree",
itemStyle: {
normal: {
label: {
show: true
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(255,215,0,0.4)',
borderWidth: 1
}
}
},
categories: [{
name: '学校'
}, {
name: '校区'
}, {
name: '学院'
}, {
name: '班级'
}],
nodes: [{
id: 0,
category: 0,
name: '0',
label: '本人',
symbolSize: 40,
ignore: false,
flag: true
},
{
id: 1,
category: 1,
name: '1',
label: '手机号',
symbolSize: 20,
ignore: true,
flag: true
},
{
id: 2,
category: 2,
name: '2',
label: '恋人',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 3,
category: 2,
name: '3',
label: '朋友',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 4,
category: 1,
name: '4',
label: '地址',
symbolSize: 20,
ignore: true,
flag: true
},
{
id: 5,
category: 2,
name: '5',
label: '父亲',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 6,
category: 2,
name: '6',
label: '母亲',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 7,
category: 2,
name: '7',
label: '恋人',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 8,
category: 1,
name: '8',
label: '邮箱',
symbolSize: 20,
ignore: true,
flag: true
},
{
id: 9,
category: 2,
name: '9',
label: '同事',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 10,
category: 2,
name: '10',
label: '上司',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 11,
category: 2,
name: '11',
label: '小弟',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 12,
category: 2,
name: '12',
label: '大哥',
symbolSize: 40,
ignore: true,
flag: true
},
{
id: 13,
category: 3,
name: '13',
label: 'QQ',
number: 45,
techear: '张三',
symbolSize: 20,
ignore: true,
flag: true
},
{
id: 14,
category: 3,
name: '14',
label: '微信',
number: 52,
techear: '李四',
symbolSize: 20,
ignore: true,
flag: true
}
],
links: [{
source: 1,
target: 0,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2, // 根据数量动态调整
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 4,
target: 0,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 8,
target: 0,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
},
{
source: 2,
target: 1,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 3,
target: 1,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 5,
target: 4,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
},
{
source: 6,
target: 4,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 7,
target: 4,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 9,
target: 8,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
},
{
source: 10,
target: 8,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 11,
target: 8,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 12,
target: 8,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
},
{
source: 13,
target: 6,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}, {
source: 14,
target: 6,
itemStyle: {
normal: {
brushType: 'stroke',
lineWidth: 2,
shadowColor: '#333333',
text: "这里是权值",
textPosition: 'inside',
color: 'blue', // 文字颜色
textFont: 'normal 12px 宋体',
strokeColor: 'yellow'
}
}
}
]
}]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
function openOrFold(param) {
var option = myChart.getOption();
var nodesOption = option.series[0].nodes;
var linksOption = option.series[0].links;
var data = param.data;
var linksNodes = [];
var categoryLength = option.series[0].categories.length;
if(data.category == (categoryLength - 1)) {
alert(data.label);
}
if(data != null && data != undefined) {
if(data.flag) {
for(var m in linksOption) {
if(linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
}
if(linksNodes != null && linksNodes != undefined) {
for(var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = false; //当前节点设为显示
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = false;
myChart.setOption(option);
} else {
for(var m in linksOption) {
if(linksOption[m].target == data.id) {
linksNodes.push(linksOption[m].source);
}
if(linksNodes != null && linksNodes != undefined) {
for(var n in linksNodes) {
if(linksOption[m].target == linksNodes[n]) {
linksNodes.push(linksOption[m].source);
}
}
}
}
if(linksNodes != null && linksNodes != undefined) {
for(var p in linksNodes) {
nodesOption[linksNodes[p]].ignore = true; //当前节点设为折叠
nodesOption[linksNodes[p]].flag = true;
}
}
nodesOption[data.id].flag = true;
myChart.setOption(option);
}
}
}
myChart.on(ecConfig.EVENT.CLICK, openOrFold);
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手