ECharts绘制网络关系图（弦图）可调节节点大小以及线条粗细
ECharts绘制网络关系图（弦图）可调节节点大小以及线条粗细
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:1000px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.showLoading();
myChart.hideLoading();
var option = {
title: {
// text:'弦图',
left: '25%'
},
toolbox: {
show: true,
feature: {
saveAsImage: {
pixelRatio: 3 // 数值越高下载图片内存越大越清晰，建议范围（3-10）
}
}
},
series: [{
type: 'graph',
layout: 'circular',
roam: true,
focusNodeAdjacency: true,
circular: {
rotateLabel: true
},
label: {
normal: {
position: 'inside',
fontWeight: 'bold',
formatter: '{b}',
fontSize: 13,
normal: {
textStyle: {
fontFamily: '宋体'
}
}
}
},
edgeSymbol: ['circle'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 17,
fontWeight: 'bold',
fontFamily: '宋体'
}
}
},
itemStyle: {
normal: {
label: {
rotate: true,
show: true,
textStyle: {
color: '#333',
fontWeight: '400'
}
},
},
emphasis: {
label: {
show: true,
textStyle: null
}
}
},
// 节点数据格式
data: [
{
name: '节点1',
symbolSize: 30, // 设置节点大小
itemStyle: {
normal: {
color: '#F07C82'
}
}
}, {
name: '节点2',
symbolSize: 34,
itemStyle: {
normal: {
color: '#F07C82'
}
}
},
// ......
],
// 线条数据格式
links: [
{
source: "节点1",
target: "节点2",
name: "",
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
return params.data.name;
}
},
symbolSize: [5, 20],
label: {
normal: {
formatter: function (params, ticket, callback) {
params.name = params.data.name;
return params.name;
},
show: true
}
},
lineStyle: {
normal: {
width: 0.6666666666666666,
curveness: 0.2,
color: "#F07C82"
}
}
},
// ......
]
}]
};
myChart.setOption(option);
</script>
</html>
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码