echarts关系图:节点点击事件（超级简单：直接复制粘贴aspx使用）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="guanxitu8.aspx.cs" Inherits="Lesson.guanxitu8" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/echarts.min.js"></script>//改一下路径
<style type="text/css">
/*-------------------主體框架樣式--------------------------------*/
html, body, form {
margin: 0;
padding: 0;
overflow: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="guanxitu" style="width: 80%; height: 80%;"></div>

var myChart = echarts.init(document.getElementById('guanxitu'));
var graph = { //这是数据项目中一般都是获取到的
nodes: [
{ "id": "0", "name": "昆山XX设计有限公司", "attributes": { "modularity_class": 0 } },
{ "id": "1", "name": "上海XX设计有限公司", "attributes": { "modularity_class": 0 } },

{ "id": "2", "name": "赵某某", "attributes": { "modularity_class": 1 } },

{ "id": "3", "name": "主要人员", "attributes": { "modularity_class": 2 } },

{ "id": "4", "name": "苏州XX实业有限公司", "attributes": { "modularity_class": 3 } }
],
links: [
{ "id": "0", "source": "0", "target": "2" },
{ "id": "1", "source": "1", "target": "2" },
{ "id": "2", "source": "2", "target": "3" },
{ "id": "3", "source": "2", "target": "1" },
{ "id": "4", "source": "3", "target": "0" },
]
};

var option = { //这里是option配置
legend: [{ //图例组件
data: categories.map(function (a) {
return a.name;
}),
top: 0,
left: (winWidth - 1200) / 2, //这里是图例组件定位使用的，自定义
itemGap: 26,
textStyle: {
padding: [0, 12]//文字块的内边距。padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
},
backgroundColor: '#f5f5f5'
}],
animationDurationUpdate: 1500,//数据更新动画的时长。
animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果。
series: [
{
type: 'graph',
layout: 'force', //因为节点的位置已经有了就不用在这里使用布局了
//circular: { rotateLabel: true },
//animation: false,
data: graph.nodes,
links: graph.links,
//categories: categories, //节点分类的类目
roam: true, //添加缩放和移动
draggable: true,//这里设置为false，不然拖拽鼠标和节点有偏移
itemStyle: {//配置节点的颜色已及尺寸
normal: {
// （1）直接写一个颜色，这样的结果是所有节点都是同一个颜色
//color: '#fff',
// （2）像在全局定义中一样，使用数组声明多个颜色
// 但是这样的结果是所有颜色都变成黑色（大概是不允许这样用吧）
//color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
// （3）类似柱状图定义多个颜色，利用函数返回不同的颜色值
// 结果同上，全变成黑色了
color: function (params) {
var colorList = ['red', 'orange', 'green', 'blue', 'gray'];
return colorList[params.dataIndex]
},

}
},
symbolSize: function (value,params) {//改变节点大小
var SizeList = [10, 15, 20, 25, 30];
return SizeList[params.dataIndex]
},

label: {
normal: {
show: true,
position: 'bottom',
rich: {
bg: {
backgroundColor: '#f5f5f5'
}
}
}
},
force: {

edgeLength: [10, winWidth / 2]
}
}
]
};
myChart.setOption(option);

//点击事件
myChart.on('click', function (params) {
if (params.dataType == 'node') {
if (params.name == "昆山XX设计有限公司") {
window.location = "https://www.baidu.com/";//"square.aspx";
}
}
});

</script>
</form>
</body>
</html>

echarts关系图:节点点击事件（超级简单：直接复制粘贴aspx使用）

相关推荐