//直接复制粘贴到官网实例中,可以调试成自己想要的效果
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 categories = [
{
id: 0,
name: '公司',
itemStyle: { normal: { color: '#c23531' } },
symbolSize: [42, 42]
},
{
id: 1,
name: '主要成员',
itemStyle: { normal: { color: '#61a0a8' } },
symbolSize: [42, 42]
},
{
id: 2,
name: '自然人',
itemStyle: { normal: { color: '#749f83' } },
symbolSize: [42, 42]
},
{
id: 3,
name: '实业公司',
itemStyle: { normal: { color: '#d48265' } },
symbolSize: [42, 42]
}
];
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
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,不然拖拽鼠标和节点有偏移
label: {
normal: {
position: 'bottom',
rich: {
bg: {
backgroundColor: '#f5f5f5'
}
}
}
},
force: {
edgeLength: [10, winWidth /2]
}
}
]
};
// graph.nodes[0].x = 1; //parseInt(Math.random() * screen.width); //这里是最重要的如果数据中有返回节点x,y位置这里就不用设置,如果没有这里一定要设置node.x和node.y,不然无法定位节点 也实现不了拖拽了;
// graph.nodes[0].y = 2; //parseInt(Math.random() * screen.height);
//graph.nodes[0].category = graph.nodes[0].attributes.modularity_class;
//graph.nodes[0].label = {
// normal: {
// show: true
// }
//}
// graph.nodes[2].x = 100;//Math.floor(Math.random() * winWidth) + 1; //parseInt(Math.random() * screen.width); //这里是最重要的如果数据中有返回节点x,y位置这里就不用设置,如果没有这里一定要设置node.x和node.y,不然无法定位节点 也实现不了拖拽了;
// graph.nodes[2].y = 100; //parseInt(Math.random() * screen.height);
//graph.nodes[2].category = graph.nodes[2].attributes.modularity_class;
//graph.nodes[2].label = {
// normal: {
// show: true
// }
//}
myChart.setOption(option);
//若直接引用到aspx页面,想要加上
// <script src="Scripts/echarts.min.js"></script>//此处引用您项目具体位置
// <div id="guanxitu" style="width: 80%; height: 80%;"></div>
//var myChart = echarts.init(document.getElementById('guanxitu'));