- title 圖表標(biāo)題樣式
title: {
text: "ECharts簡單線形圖表及其配置展示實(shí)例", //正標(biāo)題
link: "http://www.stepday.com", //正標(biāo)題鏈接 點(diǎn)擊可在新窗口中打開
top: 'bottom',//上下位置
left: 'right'//左右位置
subtext: "From:http://www.stepday.com", //副標(biāo)題
sublink: "http://www.stepday.com", //副標(biāo)題鏈接
//正標(biāo)題樣式
textStyle: {
fontSize:24
},
//副標(biāo)題樣式
subtextStyle: {
fontSize:12,
color:"red"
}
},
- tooltip 提示框配置
tooltip: {
formatter: function (x) {
return x.data.name;//設(shè)置提示框的內(nèi)容和格式 節(jié)點(diǎn)和邊都顯示name屬性
}
},
- toolbox 工具箱配置
toolbox: {
show : true,//是否顯示工具箱
feature : {
magicType: ['line', 'bar'], // 圖表類型切換另锋，當(dāng)前僅支持直角系下的折線圖源梭、柱狀圖轉(zhuǎn)換钾麸，上圖icon左數(shù)6/7该抒，分別是切換折線圖，切換柱形圖
restore: true, // 還原麦萤，復(fù)位原始圖表错森，
saveAsImage: true // 保存為圖片俄讹，
}
},
- legend:圖例配置
legend: [{
x: 'left',//圖例位置
data:['調(diào)研機(jī)構(gòu)','接待公司']//關(guān)系圖中需要與series中的categories的name保持一致
}],
- 關(guān)系邊樣式lineStyle
lineStyle: {
normal: {
show : true,
color: 'target',//決定邊的顏色是與起點(diǎn)相同還是與終點(diǎn)相同
curveness: 0.3//邊的曲度，支持從 0 到 1 的值邑商，值越大曲度越大摄咆。
}
},
- 圖型上的文本標(biāo)簽樣式label
label: {//圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息
normal: {
show : true,//顯示
position: 'right',//相對于節(jié)點(diǎn)標(biāo)簽的位置人断，默認(rèn)在節(jié)點(diǎn)中間
//回調(diào)函數(shù)吭从，你期望節(jié)點(diǎn)標(biāo)簽上顯示什么
formatter: function(params){
return params.data.label;
},
}
},
- 力引導(dǎo)圖基本配置force
force : { //力引導(dǎo)圖基本配置
//initLayout: ,//力引導(dǎo)的初始化布局，默認(rèn)使用xy軸的標(biāo)點(diǎn)
repulsion : 100,//節(jié)點(diǎn)之間的斥力因子恶迈。支持?jǐn)?shù)組表達(dá)斥力范圍涩金，值越大斥力越大。
gravity : 0.03,//節(jié)點(diǎn)受到的向中心的引力因子暇仲。該值越大節(jié)點(diǎn)越往中心點(diǎn)靠攏步做。
edgeLength :80,//邊的兩個(gè)節(jié)點(diǎn)之間的距離，這個(gè)距離也會(huì)受 repulsion奈附。[10, 50] 全度。值越小則長度越長
layoutAnimation : true
//因?yàn)榱σ龑?dǎo)布局會(huì)在多次迭代后才會(huì)穩(wěn)定，這個(gè)參數(shù)決定是否顯示布局的迭代動(dòng)畫斥滤，在瀏覽器端節(jié)點(diǎn)數(shù)據(jù)較多（>100）的時(shí)候不建議關(guān)閉将鸵，布局過程會(huì)造成瀏覽器假死。
},
- 連接邊標(biāo)簽edgeLabel
edgeLabel: {//線條的邊緣標(biāo)簽
normal: {
show: true,
//通過回調(diào)函數(shù)設(shè)置連線上的標(biāo)簽
formatter: function (x) {
return x.data.name;
}
}
},
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
- 其他
- focusNodeAdjacency:true,//當(dāng)鼠標(biāo)移動(dòng)到節(jié)點(diǎn)上佑颇，突出顯示節(jié)點(diǎn)以及節(jié)點(diǎn)的邊和鄰接節(jié)點(diǎn)
- draggable: true,//指示節(jié)點(diǎn)是否可以拖動(dòng)
- symbolSize: 20,//節(jié)點(diǎn)大小
- edgeSymbol: ['circle', 'arrow'],//邊兩端的標(biāo)記類型
- edgeSymbolSize: [4, 8],//邊兩端的標(biāo)記大小
- roam : true,//是否開啟鼠標(biāo)縮放和平移漫游顶掉。默認(rèn)不開啟。如果只想要開啟縮放或者平移挑胸，可以設(shè)置成 'scale' 或者 'move'痒筒。設(shè)置成 true 為都開啟
- legendHoverLink : true,//是否啟用圖例 hover(懸停) 時(shí)的聯(lián)動(dòng)高亮。
- 設(shè)置節(jié)點(diǎn)和連接線的提示內(nèi)容的格式不同
node數(shù)據(jù)：
//每一個(gè){}里面為一個(gè)節(jié)點(diǎn)，category（該節(jié)點(diǎn)類別）凸克，name（關(guān)系連接的關(guān)鍵字议蟆，可以理解為鍵值中的鍵，可為string也可為數(shù)字）value(節(jié)點(diǎn)的值萎战，可以設(shè)置節(jié)點(diǎn)半徑與該值的關(guān)系)咐容，label（該字段是我用來顯示該節(jié)點(diǎn)標(biāo)簽的，可以改名）蚂维，除此之外大家也可以自己設(shè)置一些其他字段戳粒。
[{category:0,name: 1, value :5,label: '喬布斯'},
{category:1, name: 2,value : 2,label: '麗薩-喬布斯'},
]
link數(shù)據(jù)：
//每一個(gè){}里面為一個(gè)關(guān)系邊，source（起點(diǎn)虫啥，對應(yīng)上面的name）蔚约，target（終點(diǎn)，對應(yīng)上面的name）涂籽，value(起點(diǎn)到終點(diǎn)的距離苹祟，值越大，權(quán)重越大评雌，距離越短)树枫，label（顯示該關(guān)系邊標(biāo)簽，用來說明兩節(jié)點(diǎn)之間的關(guān)系）景东。
{source : 2, target : 1, value : 5, label: '女兒'}
使用回調(diào)函數(shù)設(shè)置節(jié)點(diǎn)和連接線的提示內(nèi)容：
formatter: function(params){//觸發(fā)之后返回的參數(shù)砂轻，這個(gè)函數(shù)是關(guān)鍵
if (params.data.category !=undefined) {//如果觸發(fā)節(jié)點(diǎn)
return '人物:'+params.data.label;//返回標(biāo)簽
}else {//如果觸發(fā)邊
return '關(guān)系:'+params.data.label;
}
}
-
設(shè)置節(jié)點(diǎn)形狀和大小
通過node 的symbol設(shè)置節(jié)點(diǎn)形狀， symbolSize 設(shè)置節(jié)點(diǎn)大小
node數(shù)據(jù)
{
id : 1,
category : 1,
name : '192.168.8.88',
symbol : 'rect',
value : 20,
symbolSize : 70
},
Echarts force圖形小節(jié)
ECharts 實(shí)現(xiàn)人民的名義關(guān)系圖譜
Echarts3 關(guān)系圖-力導(dǎo)向布局圖
可伸縮力導(dǎo)向圖
echarts3生成關(guān)系網(wǎng)絡(luò)關(guān)系力向圖
