<html>
<head>
<meta charset="UTF-8">
<title>用户关系图</title>
<style>
</style>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="padding:20px;width:100%;height:100%;">
<div id="main" style="width: 1104px;height:464px;">
</div>
</div>
<script type="text/javascript">
//定义echarts容器
var myChart = echarts.init(document.getElementById('main'), 'macarons');
option = {
title : {
text: '用户关系图',
<!-- subtext: '树形图' -->
},
//鼠标滚动缩放
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series : [
{
// name:'用户关系图',
type:'tree',
orient: 'vertical', // vertical(竖向显示) horizontal（横向显示）
rootLocation: {x: 100, y: '80%'}, // 根节点位置 {x: 'center',y: 10}
nodePadding: 20,
symbol: 'circle',
symbolSize: 40,
left: '2%',
right: '2%',
top: '15%',
bottom: '20%',
expandAndCollapse: true,
roam:true,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 15,
fontWeight: 'bolder',
borderColor: '#06c',
padding: [5, 0, 20, 0], // 上、右、下、左的行间距
},
formatter: function (params) {
let name = params.name;
let children = params.data.children;
let childrenCount = children ? children.length : 0;
return name + '(' + childrenCount + ')';
}
},
//连接线样式
lineStyle: {
color: 'red',
width: 2,
curveness:0.6,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
label: {
show: true
}
}
},
data: [
{
name: '根节点\n第一行第二行',
value: 6,
symbolSize: [20, 20],
symbol: "image://http://wjs.yujian.com//up//p//tg//2025//11//43_1761980685bdw_s.jpg",
itemStyle: {
normal: {
label: {
show: false,
textStyle: {
color: 'red',
fontSize: 333,
fontWeight: 'bolder',
borderColor: '#06c',
}
}
}
},
children: [
{
name: '小米',
value: 4,
symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
itemStyle: {
normal: {
label: {
show: false
}
}
},
symbolSize: [60, 60],
children: [
{
name: '小米1',
symbol: 'circle',
symbolSize: 20,
value: 4,
itemStyle: {
normal: {
color: '#fa6900',
label: {
show: true,
position: 'right'
},
},
emphasis: {
label: {
show: false
},
borderWidth: 0
}
},
children: [
{
name: '小米1',
symbol: 'circle',
symbolSize: 20,
value: 4,
itemStyle: {
normal: {
color: '#fa6900',
label: {
show: true,
position: 'right'
},
},
emphasis: {
label: {
show: false
},
borderWidth: 0
}
}
},
{
name: '小米2',
value: 4,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: "{b}"
},
color: '#fa6900',
borderWidth: 2,
borderColor: '#cc66ff'
},
emphasis: {
borderWidth: 0
}
}
},
{
name: '小米3',
value: 2,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
position: 'right'
},
color: '#fa6900',
brushType: 'stroke',
borderWidth: 1,
borderColor: '#999966',
},
emphasis: {
borderWidth: 0
}
}
}
]
},
{
name: '小米2',
value: 4,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: "{b}"
},
color: '#fa6900',
borderWidth: 2,
borderColor: '#cc66ff'
},
emphasis: {
borderWidth: 0
}
}
},
{
name: '小米3',
value: 2,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
position: 'right'
},
color: '#fa6900',
brushType: 'stroke',
borderWidth: 1,
borderColor: '#999966',
},
emphasis: {
borderWidth: 0
}
}
}
]
},
{
name: '苹果',
symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',
symbolSize: [60, 60],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 4
},
{
name: '华为',
symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',
symbolSize: [60, 60],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 2
},
{
name: '联想',
symbol: 'image://http://www.lenovo.com.cn/HomeUpload/Home001/6d94ee9a20140714.jpg',
symbolSize: [100, 40],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 2
}
]
}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
浙公网安备 33010602011771号