近期因業務需求，給我司產品做了一個Echarts----力導向圖&關系圖 demo
其中分為兩種關系圖：
01.不同等級節點樣式不同
02.不同公司的顏色樣式不同
效果圖獻上：
code如下：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
var webkitDep = {
"type": "force",
"categories": [ //關系網類別，可以寫多組
{
"name": "甲公司", //關系網名稱
"keyword": {},
"base": "網格關系"
},
{
"name": "乙公司", //關系網名稱
"keyword": {},
"base": "網格關系"
},
],
"nodes": [ //展示的節點
{
"name": "甲公司", //節點名稱
"value": 10,
"symbolSize": 40,
"category": 0 //與關系網類別索引對應，此處只有一個關系網所以這里寫0
},
{
"name": "甲公司A股東",
"value": 8,
"symbolSize": 25,
"category": 0,
itemStyle: {
color: '#3398db'
}
},
{
"name": "甲公司B股東",
"value": 10,
"symbolSize": 25,
"category": 0,
itemStyle: {
color: '#3398db'
}
},
{
"name": "子公司1",
"value": 10,
"symbolSize": 15,
"category": 0,
itemStyle: {
color: 'green'
}
},
{
"name": "子公司2",
"value": 110,
"symbolSize": 15,
"category": 0,
itemStyle: {
color: 'green'
}
},
{
"name": "子公司3",
"value": 100,
"symbolSize": 15,
"category": 0,
itemStyle: {
color: 'green'
}
},
{
"name": "子公司4",
"value": 1000,
"symbolSize": 15,
"category": 0,
itemStyle: {
color: 'green'
}
},
{
"name": "乙公司", //節點名稱
"value": 10,
"symbolSize": 40,
"color": "#fff",
"category": 1 //與關系網類別索引對應，此處只有一個關系網所以這里寫0
},
{
"name": "乙公司A股東",
"value": 8,
"symbolSize": 25,
"category": 1
},
{
"name": "乙公司B股東",
"value": 10,
"symbolSize": 25,
"category": 1
},
{
"name": "乙公司C股東",
"value": 8,
"symbolSize": 25,
"category": 1
},
{
"name": "子公司1",
"value": 10,
"symbolSize": 15,
"category": 1
},
{
"name": "子公司2",
"value": 110,
"symbolSize": 15,
"category": 1
},
{
"name": "子公司3",
"value": 100,
"symbolSize": 15,
"category": 1
}
],
"links": [ //節點之間連接
{
"source": 0, //起始節點，0表示第一個節點
"target": 1 //目標節點，1表示與索引為1的節點進行連接
},
{
"source": 0,
"target": 2
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 4
},
{
"source": 2,
"target": 5
},
{
"source": 2,
"target": 6
},
{
"source": 7, //起始節點，0表示第一個節點
"target": 8 //目標節點，1表示與索引為1的節點進行連接
},
{
"source": 7, //起始節點，0表示第一個節點
"target": 9 //目標節點，1表示與索引為1的節點進行連接
},
{
"source": 7, //起始節點，0表示第一個節點
"target": 10 //目標節點，1表示與索引為1的節點進行連接
},
{
"source": 8, //起始節點，0表示第一個節點
"target": 11 //目標節點，1表示與索引為1的節點進行連接
},
{
"source": 9, //起始節點，0表示第一個節點
"target": 12 //目標節點，1表示與索引為1的節點進行連接
},
{
"source": 10, //起始節點，0表示第一個節點
"target": 13 //目標節點，1表示與索引為1的節點進行連接
}
]
};
myChart.hideLoading();
option = {
legend: {
data: ['甲公司', '乙公司'] //此處的數據必須和關系網類別中name相對應
},
series: [{
type: 'graph',
layout: 'force',
animation: false,
label: {
normal: {
show: true,
position: 'right'
}
},
draggable: true,
data: webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: webkitDep.categories,
force: {
edgeLength: 80, //連線的長度
repulsion: 100 //子節點之間的間距
},
edges: webkitDep.links
}]
};
myChart.setOption(option);;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
完結撒花
感謝Thanks♪(･ω･)ﾉ 周末愉快！