echart关系图(graph)添加波点涟漪效果

最新推荐文章于 2024-06-25 11:58:10 发布

如梦江南

最新推荐文章于 2024-06-25 11:58:10 发布

阅读量2k

点赞数

分类专栏： echarts图表文章标签： echarts

本文链接：https://blog.csdn.net/csy_119/article/details/103380920

版权

echarts图表专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个是直接用echarts 的官网的实例改的，可以直接放到上面去看效果。

涟漪效果需要指定坐标系。（cartesian2d ---》二维直角坐标系、polar ---》极坐标系、geo---》地理坐标系）

而在关系图中，关系图的默认应该是直角坐标系（但是在官方实例中一般不会给出来）。布局是null。所以要涟漪效果出现。就必须给定一个坐标系才行。其他的在api中都可以找到，我用的版本是4

option = {
xAxis : [{
type : 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
interval: 0,
textStyle: {
color: 'white',
fontSize: 14,
},
rotate: 45
},
axisLine: {
show: false // 显示与关闭坐标轴
}
}, ],
yAxis : [{
type : 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
textStyle: {
color: 'white',
fontSize: 14
}
},
axisLine: {
show: false // 显示与关闭坐标轴
},
}],

animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: [{
name: '节点1',
x: 300,
y: 300
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 5,
curveness: 0.2
}
}
}, {
source: '节点2',
target: '节点1',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
},
{

type: 'effectScatter',
data: [
{ value:[48 , 150], // 这个value对应的是这个涟漪对应的位置[x,y]
label: { formatter: function(p){ return '节点1'; } }, symbolSize: 50 },
{ value:[752 , 150 , '111'], // 【x,y, 值数据】
label: { formatter: function(p){ return '节点2'; } }, symbolSize: 50 },
{ value:[400 , 298],
label: { formatter: function(p){ return '节点3'; } }, symbolSize: 50 },
{ value:[400 , 2],
label: { formatter: function(p){ return '节点4'; } }, symbolSize: 50 },
],
symbolSize: 50,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: true
}
},
itemStyle: {
normal: {
color: 'purple',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 4 , // 关系图的zlevel最小是3，所以要大于3
}
]
};