ECharts绘制网络关系图（弦图）可调节节点大小以及线条粗细
Posted spl.与我常在(live)
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于ECharts绘制网络关系图（弦图）可调节节点大小以及线条粗细的主要内容，如果未能解决你的问题，请参考以下文章