一、修改前效果
节点很多（项目上的更多，而且还在持续增加），如果对节点进行操作，需要进行放大，但也会引来另一个问题，节点也随之放大
默认效果
放大后效果
二、演示代码
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="./data.js"></script>
<script type="text/javascript" src="./links.js"></script>
<script type="text/javascript">
console.log(data)
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
};
var option = {
title: {
text: 'Graph 简单示例'
},
tooltip: {
},
//数据更新动画的时长。
animationDurationUpdate: 1500,
//数据更新动画的缓动效果。
animationEasingUpdate: 'quinticInOut',
series: [{
id: 'a',
type: 'graph',
//图的布局。不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
layout: 'none',
//******设置节点的大小
symbolSize: 45,
//是否启用图例 hover 时的联动高亮。
legendHoverLink: true,
//当前视角的缩放比例。
//zoom: 1,
//******是否开启鼠标缩放和平移漫游
roam: true,
//*****鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
//结合取消鼠标缩放
//nodeScaleRatio: 0,
// 边两端的标记类型
// edgeSymbol: ['circle', 'arrow'],
// focusNodeAdjacency
//******是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
focusNodeAdjacency: true,
//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
edgeSymbolSize: 10,
//鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
cursor: 'pointer',
label: {
//是否显示标签。
show: true
},
//高亮状态的图形样式。
emphasis: {
scale: true,
},
//**宽高
// width: '3000px',
height: '800px',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: data,
// links: [],
links: links,
lineStyle: {
//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
opacity: 0.9,
// 线宽。
width: 2,
//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
curveness: 0
},
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
节点数据
/**
* 节点1 第1层
* 节点2 第2层
* 节点3 第3层
* 节点4 第4层
* 节点5 第5层
*/
var data = [
{
name: '节点1',
x: 550,
y: 100
},
{
name: '节点2',
x: 550,
y: 200
},
{
name: '节点3',
x: 550,
y: 300
},
{
name: '节点4',
x: 550,
y: 400
},
{
name: '节点5',
x: 550,
y: 500
},
{
name: '节点6',
x: 550,
y: 600
},
{
name: '节点7',
x: 550,
y: 700
},
/**
* 第二层
*/
{
name: '节点20',
x: 300,
y: 200
},
{
name: '节点21',
x: 350,
y: 200
},
{
name: '节点22',
x: 400,
y: 200
},
{
name: '节点23',
x: 450,
y: 200
},
{
name: '节点24',
x: 500,
y: 200
},
{
name: '节点25',
x: 600,
y: 200
},
{
name: '节点26',
x: 650,
y: 200
},
{
name: '节点27',
x: 700,
y: 200
},
{
name: '节点28',
x: 750,
y: 200
},
{
name: '节点29',
x: 800,
y: 200
},
/**
* 第三层
*/
{
name: '节点30',
x: 250,
y: 300
},
{
name: '节点31',
x: 290,
y: 300
},
{
name: '节点32',
x: 330,
y: 300
},
{
name: '节点33',
x: 370,
y: 300
},
{
name: '节点34',
x: 400,
y: 300
},
{
name: '节点35',
x: 420,
y: 300
},
{
name: '节点36',
x: 450,
y: 300
},
{
name: '节点37',
x: 500,
y: 300
},
{
name: '节点38',
x: 520,
y: 300
},
{
name: '节点39',
x: 640,
y: 300
},
{
name: '节点310',
x: 680,
y: 300
},
{
name: '节点312',
x: 700,
y: 300
},
{
name: '节点313',
x: 720,
y: 300
},
{
name: '节点314',
x: 750,
y: 300
},
{
name: '节点315',
x: 800,
y: 300
},
{
name: '节点316',
x: 810,
y: 300
},
{
name: '节点317',
x: 840,
y: 300
},
{
name: '节点318',
x: 850,
y: 300
},
{
name: '节点319',
x: 900,
y: 300
},
/**
* 第四层
*/
{
name: '节点41',
x: 0,
y: 400
},
{
name: '节点42',
x: 20,
y: 400
},
{
name: '节点43',
x: 50,
y: 400
},
{
name: '节点44',
x: 80,
y: 400
},
{
name: '节点45',
x: 100,
y: 400
},
{
name: '节点46',
x: 150,
y: 400
},
{
name: '节点47',
x: 160,
y: 400
},
{
name: '节点48',
x: 195,
y: 400
},
{
name: '节点49',
x: 220,
y: 400
},
{
name: '节点410',
x: 250,
y: 400
},
{
name: '节点411',
x: 280,
y: 400
},
{
name: '节点412',
x: 320,
y: 400
},
{
name: '节点413',
x: 350,
y: 400
},
{
name: '节点414',
x: 400,
y: 400
},
{
name: '节点415',
x: 430,
y: 400
},
{
name: '节点416',
x: 450,
y: 400
},
{
name: '节点417',
x: 490,
y: 400
},
{
name: '节点418',
x: 590,
y: 400
},
{
name: '节点419',
x: 650,
y: 400
},
{
name: '节点420',
x: 750,
y: 400
},
{
name: '节点421',
x: 800,
y: 400
},
{
name: '节点422',
x: 820,
y: 400
},
{
name: '节点423',
x: 850,
y: 400
},
{
name: '节点424',
x: 880,
y: 400
},
{
name: '节点425',
x: 910,
y: 400
},
{
name: '节点426',
x: 950,
y: 400
},
{
name: '节点427',
x: 985,
y: 400
},
{
name: '节点428',
x: 990,
y: 400
},
{
name: '节点429',
x: 1000,
y: 400
},
{
name: '节点430',
x: 1020,
y: 400
},
{
name: '节点431',
x: 1090,
y: 400
},
{
name: '节点432',
x: 1120,
y: 400
},
{
name: '节点433',
x: 1180,
y: 400
},
{
name: '节点434',
x: 1220,
y: 400
},
{
name: '节点435',
x: 1260,
y: 400
},
/**
* 第五层
*/
{
name: '节点51',
x: -50,
y: 500
},
{
name: '节点52',
x: -15,
y: 500
},
{
name: '节点53',
x: 20,
y: 500
},
{
name: '节点54',
x: 70,
y: 500
},
{
name: '节点55',
x: 100,
y: 500
},
{
name: '节点56',
x: 140,
y: 500
},
{
name: '节点57',
x: 160,
y: 500
},
{
name: '节点58',
x: 175,
y: 500
},
{
name: '节点59',
x: 240,
y: 500
},
{
name: '节点510',
x: 255,
y: 500
},
{
name: '节点511',
x: 290,
y: 500
},
{
name: '节点512',
x: 340,
y: 500
},
{
name: '节点513',
x: 365,
y: 500
},
{
name: '节点514',
x: 410,
y: 500
},
{
name: '节点515',
x: 430,
y: 500
},
{
name: '节点516',
x: 460,
y: 500
},
{
name: '节点517',
x: 470,
y: 500
},
{
name: '节点518',
x: 590,
y: 500
},
{
name: '节点519',
x: 640,
y: 500
},
{
name: '节点520',
x: 700,
y: 500
},
{
name: '节点521',
x: 740,
y: 500
},
{
name: '节点522',
x: 780,
y: 500
},
{
name: '节点523',
x: 820,
y: 500
},
{
name: '节点524',
x: 850,
y: 500
},
{
name: '节点525',
x: 910,
y: 500
},
{
name: '节点526',
x: 950,
y: 500
},
{
name: '节点527',
x: 975,
y: 500
},
{
name: '节点528',
x: 990,
y: 500
},
{
name: '节点529',
x: 1050,
y: 500
},
{
name: '节点530',
x: 1070,
y: 500
},
{
name: '节点531',
x: 1090,
y: 500
},
{
name: '节点532',
x: 1130,
y: 500
},
{
name: '节点533',
x: 1170,
y: 500
},
{
name: '节点534',
x: 1240,
y: 500
},
{
name: '节点535',
x: 1300,
y: 500
},
/**
* 第六层
*/
{
name: '节点60',
x: 220,
y: 600
},
{
name: '节点61',
x: 260,
y: 600
},
{
name: '节点62',
x: 310,
y: 600
},
{
name: '节点63',
x: 360,
y: 600
},
{
name: '节点64',
x: 410,
y: 600
},
{
name: '节点65',
x: 450,
y: 600
},
{
name: '节点66',
x: 480,
y: 600
},
{
name: '节点67',
x: 510,
y: 600
},
{
name: '节点68',
x: 530,
y: 600
},
{
name: '节点69',
x: 600,
y: 600
},
{
name: '节点610',
x: 640,
y: 600
},
{
name: '节点612',
x: 690,
y: 600
},
{
name: '节点613',
x: 720,
y: 600
},
{
name: '节点614',
x: 760,
y: 600
},
{
name: '节点615',
x: 810,
y: 600
},
{
name: '节点616',
x: 850,
y: 600
},
{
name: '节点617',
x: 880,
y: 600
},
{
name: '节点618',
x: 920,
y: 600
},
{
name: '节点619',
x: 950,
y: 600
}
]
连线数据
var links = [
{
source: 0,
target: 1,
},
/**
* 1 2 3 4 5 6 7 关联
*/
{
source: '节点1',
target: '节点2'
},
{
source: '节点2',
target: '节点3'
},
{
source: '节点3',
target: '节点4'
},
{
source: '节点4',
target: '节点5'
},
{
source: '节点5',
target: '节点6'
},
{
source: '节点6',
target: '节点7'
},
/**
* 第二层关联
*/
{
source: '节点1',
target: '节点20'
},
{
source: '节点1',
target: '节点21'
},
{
source: '节点1',
target: '节点22'
},
{
source: '节点1',
target: '节点23'
},
{
source: '节点1',
target: '节点24'
},
{
source: '节点1',
target: '节点25'
},
{
source: '节点1',
target: '节点26'
},
{
source: '节点1',
target: '节点27'
},
{
source: '节点1',
target: '节点28'
},
{
source: '节点1',
target: '节点29'
},
/**
* 第三层关联
*/
{
source: '节点20',
target: '节点30'
},
{
source: '节点21',
target: '节点31'
},
{
source: '节点22',
target: '节点32'
},
{
source: '节点23',
target: '节点33'
},
{
source: '节点24',
target: '节点34'
},
{
source: '节点25',
target: '节点35'
},
{
source: '节点26',
target: '节点36'
},
{
source: '节点27',
target: '节点37'
},
{
source: '节点28',
target: '节点38'
},
{
source: '节点29',
target: '节点39'
},
{
source: '节点20',
target: '节点32'
},
{
source: '节点20',
target: '节点33'
},
{
source: '节点23',
target: '节点32'
},
{
source: '节点23',
target: '节点33'
},
{
source: '节点23',
target: '节点35'
},
{
source: '节点23',
target: '节点36'
},
{
source: '节点25',
target: '节点32'
},
{
source: '节点25',
target: '节点33'
},
{
source: '节点25',
target: '节点36'
},
{
source: '节点25',
target: '节点37'
},
{
source: '节点25',
target: '节点39'
},
{
source: '节点25',
target: '节点313'
},
{
source: '节点25',
target: '节点316'
},
{
source: '节点25',
target: '节点317'
},
{
source: '节点28',
target: '节点38'
},
{
source: '节点28',
target: '节点39'
},
{
source: '节点28',
target: '节点312'
},
{
source: '节点28',
target: '节点38'
},
{
source: '节点28',
target: '节点39'
},
{
source: '节点28',
target: '节点312'
},
{
source: '节点28',
target: '节点313'
},
{
source: '节点28',
target: '节点316'
},
{
source: '节点28',
target: '节点318'
},
{
source: '节点28',
target: '节点319'
},
{
source: '节点29',
target: '节点318'
},
{
source: '节点29',
target: '节点316'
},
{
source: '节点29',
target: '节点319'
},
/**
* 第四层关联
*/
{
source: '节点31',
target: '节点41'
},
{
source: '节点31',
target: '节点42'
},
{
source: '节点31',
target: '节点48'
},
{
source: '节点32',
target: '节点42'
},
{
source: '节点32',
target: '节点49'
},
{
source: '节点32',
target: '节点412'
},
{
source: '节点32',
target: '节点415'
},
{
source: '节点33',
target: '节点43'
},
{
source: '节点33',
target: '节点48'
},
{
source: '节点33',
target: '节点49'
},
{
source: '节点34',
target: '节点414'
},
{
source: '节点35',
target: '节点45'
},
{
source: '节点36',
target: '节点49'
},
{
source: '节点37',
target: '节点412'
},
{
source: '节点38',
target: '节点413'
},
{
source: '节点39',
target: '节点415'
},
{
source: '节点310',
target: '节点416'
},
{
source: '节点310',
target: '节点420'
},
{
source: '节点310',
target: '节点423'
},
{
source: '节点311',
target: '节点418'
},
{
source: '节点311',
target: '节点423'
},
{
source: '节点311',
target: '节点425'
},
{
source: '节点312',
target: '节点413'
},
{
source: '节点312',
target: '节点415'
},
{
source: '节点312',
target: '节点415'
},
{
source: '节点313',
target: '节点418'
},
{
source: '节点313',
target: '节点423'
},
{
source: '节点313',
target: '节点433'
},
{
source: '节点313',
target: '节点434'
},
{
source: '节点313',
target: '节点435'
},
{
source: '节点314',
target: '节点414'
},
{
source: '节点314',
target: '节点417'
},
{
source: '节点314',
target: '节点425'
},
{
source: '节点314',
target: '节点432'
},
{
source: '节点314',
target: '节点433'
},
{
source: '节点315',
target: '节点411'
},
{
source: '节点315',
target: '节点413'
},
{
source: '节点315',
target: '节点422'
},
{
source: '节点315',
target: '节点433'
},
{
source: '节点315',
target: '节点435'
},
{
source: '节点316',
target: '节点409'
},
{
source: '节点316',
target: '节点413'
},
{
source: '节点316',
target: '节点417'
},
{
source: '节点316',
target: '节点418'
},
{
source: '节点316',
target: '节点425'
},
{
source: '节点317',
target: '节点429'
},
{
source: '节点317',
target: '节点433'
},
{
source: '节点317',
target: '节点434'
},
{
source: '节点317',
target: '节点435'
},
{
source: '节点318',
target: '节点426'
},
{
source: '节点318',
target: '节点416'
},
{
source: '节点318',
target: '节点423'
},
{
source: '节点318',
target: '节点434'
},
{
source: '节点319',
target: '节点415'
},
{
source: '节点319',
target: '节点418'
},
{
source: '节点319',
target: '节点422'
},
{
source: '节点319',
target: '节点435'
},
/**
* 第五层关联
*/
{
source: '节点41',
target: '节点51'
},
{
source: '节点41',
target: '节点52'
},
{
source: '节点41',
target: '节点58'
},
{
source: '节点42',
target: '节点52'
},
{
source: '节点42',
target: '节点59'
},
{
source: '节点42',
target: '节点512'
},
{
source: '节点42',
target: '节点515'
},
{
source: '节点42',
target: '节点518'
},
{
source: '节点43',
target: '节点58'
},
{
source: '节点43',
target: '节点59'
},
{
source: '节点44',
target: '节点514'
},
{
source: '节点45',
target: '节点55'
},
{
source: '节点46',
target: '节点59'
},
{
source: '节点47',
target: '节点512'
},
{
source: '节点48',
target: '节点513'
},
{
source: '节点49',
target: '节点515'
},
{
source: '节点410',
target: '节点516'
},
{
source: '节点410',
target: '节点510'
},
{
source: '节点410',
target: '节点523'
},
{
source: '节点411',
target: '节点511'
},
{
source: '节点411',
target: '节点518'
},
{
source: '节点413',
target: '节点510'
},
{
source: '节点413',
target: '节点517'
},
{
source: '节点414',
target: '节点514'
},
{
source: '节点414',
target: '节点517'
},
{
source: '节点415',
target: '节点511'
},
{
source: '节点415',
target: '节点513'
},
{
source: '节点416',
target: '节点519'
},
{
source: '节点417',
target: '节点518'
},
{
source: '节点418',
target: '节点518'
},
{
source: '节点419',
target: '节点519'
},
{
source: '节点420',
target: '节点516'
},
{
source: '节点420',
target: '节点518'
},
{
source: '节点420',
target: '节点520'
},
{
source: '节点420',
target: '节点524'
},
{
source: '节点420',
target: '节点525'
},
{
source: '节点421',
target: '节点521'
},
{
source: '节点422',
target: '节点522'
},
{
source: '节点423',
target: '节点523'
},
{
source: '节点424',
target: '节点524'
},
{
source: '节点425',
target: '节点525'
},
{
source: '节点426',
target: '节点526'
},
{
source: '节点427',
target: '节点527'
},
{
source: '节点428',
target: '节点528'
},
{
source: '节点429',
target: '节点529'
},
{
source: '节点430',
target: '节点530'
},
{
source: '节点431',
target: '节点531'
},
{
source: '节点432',
target: '节点532'
},
{
source: '节点433',
target: '节点533'
},
{
source: '节点434',
target: '节点534'
},
{
source: '节点435',
target: '节点535'
},
/**
* 第六层关联
*/
{
source: '节点51',
target: '节点61'
},
{
source: '节点51',
target: '节点62'
},
{
source: '节点52',
target: '节点62'
},
{
source: '节点52',
target: '节点65'
},
{
source: '节点52',
target: '节点64'
},
{
source: '节点53',
target: '节点61'
},
{
source: '节点53',
target: '节点63'
},
{
source: '节点54',
target: '节点64'
},
{
source: '节点54',
target: '节点66'
},
{
source: '节点55',
target: '节点62'
},
{
source: '节点55',
target: '节点63'
},
{
source: '节点56',
target: '节点62'
},
{
source: '节点57',
target: '节点63'
},
{
source: '节点58',
target: '节点65'
},
{
source: '节点59',
target: '节点62'
},
{
source: '节点510',
target: '节点67'
},
{
source: '节点510',
target: '节点61'
},
{
source: '节点510',
target: '节点63'
},
{
source: '节点511',
target: '节点62'
},
{
source: '节点511',
target: '节点63'
},
{
source: '节点511',
target: '节点65'
},
{
source: '节点512',
target: '节点63'
},
{
source: '节点512',
target: '节点65'
},
{
source: '节点513',
target: '节点68'
},
{
source: '节点513',
target: '节点613'
},
{
source: '节点514',
target: '节点64'
},
{
source: '节点514',
target: '节点67'
},
{
source: '节点515',
target: '节点63'
},
{
source: '节点515',
target: '节点65'
},
{
source: '节点516',
target: '节点64'
},
{
source: '节点516',
target: '节点68'
},
{
source: '节点517',
target: '节点65'
},
{
source: '节点517',
target: '节点68'
},
{
source: '节点518',
target: '节点66'
},
{
source: '节点518',
target: '节点69'
},
{
source: '节点519',
target: '节点69'
},
{
source: '节点519',
target: '节点610'
},
{
source: '节点520',
target: '节点612'
},
{
source: '节点520',
target: '节点613'
},
{
source: '节点521',
target: '节点615'
},
{
source: '节点522',
target: '节点613'
},
{
source: '节点522',
target: '节点615'
},
{
source: '节点523',
target: '节点615'
},
{
source: '节点523',
target: '节点613'
},
{
source: '节点523',
target: '节点615'
},
{
source: '节点524',
target: '节点616'
},
{
source: '节点525',
target: '节点617'
},
{
source: '节点526',
target: '节点617'
},
{
source: '节点526',
target: '节点618'
},
{
source: '节点527',
target: '节点614'
},
{
source: '节点528',
target: '节点617'
},
{
source: '节点529',
target: '节点618'
},
{
source: '节点530',
target: '节点617'
},
{
source: '节点531',
target: '节点617'
},
{
source: '节点532',
target: '节点618'
},
{
source: '节点533',
target: '节点617'
},
{
source: '节点533',
target: '节点619'
},
{
source: '节点534',
target: '节点617'
},
{
source: '节点535',
target: '节点619'
},
/**
* 第七层关联
*/
{
source: '节点61',
target: '节点7'
},
{
source: '节点62',
target: '节点7'
},
{
source: '节点63',
target: '节点7'
},
{
source: '节点64',
target: '节点7'
},
{
source: '节点65',
target: '节点7'
},
{
source: '节点66',
target: '节点7'
},
{
source: '节点67',
target: '节点7'
},
{
source: '节点68',
target: '节点7'
},
{
source: '节点69',
target: '节点7'
},
{
source: '节点610',
target: '节点7'
},
{
source: '节点611',
target: '节点7'
},
{
source: '节点612',
target: '节点7'
},
{
source: '节点613',
target: '节点7'
},
{
source: '节点614',
target: '节点7'
},
{
source: '节点615',
target: '节点7'
},
{
source: '节点616',
target: '节点7'
},
{
source: '节点617',
target: '节点7'
},
{
source: '节点618',
target: '节点7'
},
{
source: '节点619',
target: '节点7'
}
]
三、解决方式
添加nodeScaleRatio: 0属性
意思是鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
四、修改后效果
默认效果
放大后效果
