<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: '树形图' -->},series : [{name:'树图',type:'tree',orient: 'vertical', // vertical(竖向显示) horizontal（横向显示）rootLocation: {x: 'center', y: '60%'}, // 根节点位置 {x: 'center',y: 10}nodePadding: 20,symbol: 'circle',symbolSize: 40,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,type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed' }},emphasis: {label: {show: true}}},data: [{name: '根节点\n第一行第二行',value: 6,symbolSize: [90, 70],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>