配置项如下
// Asia
var hazards = [
{name:'Earthquake',value:34131,x:500,y:100},
{name:'Flood',value:11383,x:300,y:250},
{name:'Storm',value:5617,x:700,y:250},
{name:'Landslide',value:5180,x:100,y:400},
{name:'Drought',value:1140,x:900,y:400},
{name:'Extreme temperature',value:958,x:850,y:600},
{name:'Tsunami',value:950,x:150,y:600},
// {name:'Epidemic',value:841},
{name:'Volcanic',value:281,x:400,y:800},
{name:'Wildfire',value:222,x:600,y:800},
// {name:'Insect infestation',value:19},
// {name:'Impact',value:1},
];
var chains = [
{source:'Earthquake',target:'Tsunami',value:429},
{source:'Landslide',target:'Flood',value:457},
{source:'Storm',target:'Flood',value:302},
{source:'Earthquake',target:'Flood',value:167},
{source:'Earthquake',target:'Landslide',value:84},
{source:'Landslide',target:'Storm',value:130},
{source:'Earthquake',target:'Epidemic',value:8},
{source:'Epidemic',target:'Flood',value:16},
{source:'Drought',target:'Storm',value:5},
{source:'Drought',target:'Flood',value:4},
{source:'Earthquake',target:'Volcanic',value:5},
{source:'Volcanic',target:'Tsunami',value:7},
{source:'Earthquake',target:'Storm',value:4},
{source:'Extreme temperature',target:'Landslide',value:2},
{source:'Extreme temperature',target:'Flood',value:2},
{source:'Landslide',target:'Drought',value:2},
{source:'Landslide',target:'Tsunami',value:2},
];
// 设置图中每个节点的大小及其他属性
hazards.forEach(function (node) {
node.symbolSize = node.value / 500;
node.label = {
normal: {
show: node.name,
},
};
});
// 设置连接线的宽度及其他属性
chains.forEach(function (chains) {
chains.lineStyle = {
normal: {
width: chains.value / 18,
opacity: 0.8,
},
};
});
option = {
// animationDurationUpdate: 1500,
// animationEasingUpdate: 'quinticInOut',
series: [
{
name: 'hazards Interaction',
type: 'graph', //设置图形类别 关系图
// layout: 'circular',
// layout:'none',
circular: {
// 设置环形布局是否旋转标签
rotateLabel: true,
},
data: hazards,
links: chains,
roam: true,
label: {
normal: {
fontSize:20,
position: 'right',
formatter: '{b}',
},
},
itemStyle: {
normal: {
color: '#0f3475',
},
},
lineStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1551c2',
},
{
offset: 1,
color: '#7be0ff',
},
],
globalCoord: false,
},
curveness: 0.3,
opacity: 0.2,
},
},
},
],
};