前言：
因工作需要，老大要求給我一個JSON數據，用echarts，寫一個option實現多個圖表（折線圖，餅圖，關係圖）展示，也就是說只要一個div（dom對象），實現多個不同形狀的圖表展示，（ps：前期沒弄清老大意思，寫了三個div來顯示-,尷尬--_---）。這裏我用了LayUI（表格）+eCharts來，通過引入自定義的js，實現頁面效果顯示
自己在網上找了下，沒有找到對應的文章，直接來說怎麼實現，所以特意寫了此文章，共同學習。
總結技巧：
1.先用最少的代碼顯示出一個圖（eg:餅圖只要一個series就可以顯示出來）；
2.【關鍵點】自己能控制每個圖在自己指定的地方的顯示（eg:餅圖通過配置center來確定中心位置，radius確定餅圖的大小，控制餅圖顯示在：右上角，中間，左下角）。option = {//簡單的 折線圖+餅圖 展示
grid: [
{x: '7%', y: '7%', width: '38%', height: '38%'},//折線圖位置控制
],
xAxis: [
{gridIndex: 0,type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},
],
yAxis: [
{gridIndex: 0 },
],
series: [
{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [1,2,3,4,5],
},
{
type: 'pie',
radius : '45%',
center: ['80%', '30%'],//餅圖位置控制
data: [1,2,3,4,5],
},
]
}; 3.確定了每個圖位置，整體佈局好了，再來添加每個圖需要的功能點
4.關係圖每個節點的位置確定:通過笛卡爾積座標系+節點的value[x,y]實現（我這用的是之字形顯示節點）。
eCharts鏈接（在線修改）：http://gallery.echartsjs.com/editor.html?c=xHJUB4SZmz&v=1
官方例子：http://www.echartsjs.com/gallery/editor.html?c=scatter-anscombe-quartet
官例調試技巧點：通過修改刪除：series (xAxisIndex), yAxis(gridIndex) ,grid(x,x2,y,y2)，查看效果瞭解參數（可先看配置項手冊）
效果圖：
前臺html頁面代碼：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 複製演示：都修改成自己的路徑 -->
<!-- 引入echarts的js庫 -->
<script src="../../dist/echarts.js"></script>
<!-- 引入自定義的js(同文件夾下) -->
<script type="text/javascript" src="oneForAll.js"></script>
<style type="text/css">body{height: 100%}
/*通過百分比設置圖表的div大小*/
.chart{height: 70%}
</style>
<!-- 引入layui庫 -->
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
<script src="layui/yqyTable.js" charset="utf-8"></script>
</head>
<body>
<!-- echarts圖表數據對象 -->
<div class="chart" id="yqyMain" ></div>
<script>
//固定寫法
var chart = echarts.init(document.getElementById('yqyMain'));
/*接受自定義Option.js中的函數返回的：option*/
var yqyOption=oneForAll();
chart.setOption(yqyOption);
</script>
<!-- layui選項卡界面：如不需要整合表格=可忽略 -->
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">基本信息</li>
<li>服務信息</li>
<li>關係信息</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<!-- 表格數據 -->
<table id="sysVolTable"></table>
<!-- 序號自增:翻頁有小問題，點擊下一頁又從1開始計數，待改進 -->
<script type="text/html" id="indexTp1">
{{d.LAY_TABLE_INDEX+1}}
</script>
</div>
<div class="layui-tab-item ">服務緯度</div>
<div class="layui-tab-item ">關係數</div>
</div>
</div>
<!-- 選項卡：功能性設置 -->
<script>
layui.use('element',function(){
var element=layui.element;
});
</script>
</body>
</html>js代碼：
文件名：oneForAll.js
//餅圖數據
pieData=[[{"name":"A系統","value":2},{"name":"B系統","value":4},{"name":"C系統","value":3},{"name":"D系統","value":3},{"name":"E系統","value":7},{"name":"F系統","value":3},{"name":"G系統","value":3},{"name":"H系統","value":3}],["A系統","B系統","C系統","D系統","E系統","F系統","G系統","H系統"]];
//折線圖數據
yqyData=[[0,1,2,3,4,5,6,7,8,9,10,11,12],[600,1150,400,850,600,650,100,1150,100,700,600,800,500]]
//---------------------------------------------關係圖數據獲取:start，有點多，可先忽略查看----------------------------------------------------------
//用java代碼：自動生成關係圖數據（因爲前期，沒有理解需求——_——:全是自己用java自動生成的json數據）
relatData=[{"node":"系統節點1","endpoint":["系統節點3"],"service":["java.local.name_1","java.local.name_11"]},{"node":"系統節點2","endpoint":["系統節點3","系統節點1"],"service":["java.local.name_2","java.local.name_22"]},{"node":"系統節點3","endpoint":["系統節點4","系統節點2"],"service":["java.local.name_3","java.local.name_33"]},{"node":"系統節點4","endpoint":["系統節點3"],"service":["java.local.name_4","java.local.name_44"]},{"node":"系統節點5","endpoint":["系統節點2"],"service":["java.local.name_5","java.local.name_55"]},{"node":"系統節點6","endpoint":["系統節點3"],"service":["java.local.name_6","java.local.name_66"]},{"node":"系統節點7","endpoint":["系統節點2"],"service":["java.local.name_7","java.local.name_77"]},{"node":"系統節點8","endpoint":["系統節點2"],"service":["java.local.name_8","java.local.name_88"]}];
//獲取節點數據
function get_nodes(relatData) {//官方的方法改造了一下=自定義生成：關係圖中節點位置
var nodes = [];
var tmp_nodes = [];
var x1=1200;
var y1=100;
for(var nodes_i in relatData) {
//x,y數據歸位
x1=5;
y1=5;
//三個節點爲一排，之字形增加
x1=x1+10*(nodes_i%3);//保持0，1，2
y1=y1+10*Math.floor(nodes_i/3);//向下取整
console.log("x1="+x1+" y1="+y1);
console.log("x1="+(nodes_i%3)+" y1="+(Math.floor(nodes_i/3)));
tmp_nodes.push(relatData[nodes_i].node);
nodes.push(
{
'name':relatData[nodes_i].node,
'value':[x1,y1]//4.通過x,y來確定關係圖的節點位置
}
);
}
return nodes;
}
//獲取節點數據關係
function get_links(relatData) {
var links = [];
for(var nodes_i in relatData) {
var node = relatData[nodes_i].node;
var endpoint = relatData[nodes_i].endpoint;
var service = relatData[nodes_i].service;
// console.log(service);
for(var service_i in endpoint) {
links.push({
'source':node,
'target':endpoint[service_i],
'label': {
'normal': {
'show': false,
'textStyle':{
'fontSize':5
},
'formatter': service
}
},
'lineStyle': {
'normal': {
'curveness': 0.1
}
}
})
}
}
for (var i = 0, len1 = links.length; i < len1; i++) {
for(var j = i, len2 = len1 - 1; j < len2; j++) {
if (links[i].source==links[j].target) {
links[j].lineStyle.normal.curveness = -0.1;
}
}
}
// console.log(links);
return links;
}
//------------------------------------------------------關係圖獲取數據:end-----------------------------------------------------------------
//按老大要求：多個圖表數據整合成一個option
//【關鍵點】：1.用最少的代碼顯示出一個圖（eg:餅圖只要一個series就可以顯示出來）
//2.確定每個圖表的位置，佔的區域（eg:餅圖通過配置center來確定中心位置，radius確定餅圖的大小）。
function oneForAll(){
//我選折線圖作爲基礎option
var yqyOption = {
xAxis: [
{data: yqyData[0],gridIndex:0},//折線圖x軸數據賦值，指定座標信息
{gridIndex:1,type:'value'}
],
yAxis: [
{
name:'交易量',
splitLine: {show: false},
gridIndex:0
},
{gridIndex:1,type:'value'}
],
grid:[//指定座標軸位置，大小
{x:'7%',y:'7%',width:'50%',height:'31%'},
{x:'60%',bottom:'1%',height:'90%',width:'35%',contianLabel:true}//關係圖位置
],
series: [{
type: 'line',
xAxisIndex:0,//指定折線圖數據顯示到：grid座標系：0
yAxisIndex:0,
showSymbol: false,
data: yqyData[1]//折線圖y軸數據賦值
}]
};
//======餅圖數據1=====
var pieSeries1={
name : '面積模式',
type : 'pie',
radius : [ 10, 80 ],
center : [ '18%', '75%' ],//位置確定：左下角
data :pieData[0]//餅圖數據賦值
};
//======餅圖數據2=====
var pieSeries2={
name : '面積模式',
type : 'pie',
radius : [ 10, 80 ],
center : [ '47%', '75%' ],
roseType : 'area',//zxj玫瑰餅圖
data :pieData[0]
};
//將餅圖series添加到主series中
yqyOption.series.push(pieSeries1);//完成了一個簡單的折線圖和餅圖的數據合併
yqyOption.series.push(pieSeries2);
//關係圖數據
var relatSeries =
{
type: 'graph',
// layout: 'circular',
layout: 'force',//1.力引導圖
coordinateSystem:'cartesian2d',//2.笛卡爾座標系設置
xAxisIndex:1,//3.選取的第二個座標系，爲關係圖數據位置，4.value值設置
yAxisIndex:1,
focusNodeAdjacency: true,
legendHoverLink: true,
hoverAnimation:true,
symbolSize: 30,
edgeSymbolSize: 10,
roam: true,
symbol: "roundRect",
label: {
normal: {
show: true,
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 15],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: get_nodes(relatData),//節點數據賦值
links: get_links(relatData),
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0,
type :'dashed'
}
}
};
//將關係圖添加到主series中
yqyOption.series.push(relatSeries);
return yqyOption;
}LayUI表格js
注意需要最前面添加分號 ;
yqyTable.js
;layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#sysVolTable',
page: {limit:1},//指定分頁
data: [{
"srcIp": "192.168.0.1",
"srcSys": "SRC",
"destIp": "192.168.0.8",
"destSys": "DEST",
"startTime": "2017-12-25 9:31",
"endTime": "2017-12-25 9:31",
"remark":"yqy測試數據"
},{
"srcIp": "192.168.0.1",
"srcSys": "SRC",
"destIp": "192.168.0.7",
"destSys": "DEST",
"startTime": "2017-12-27 18:31",
"endTime": "2017-12-27 18:31",
"remark":"yqy測試數據"
}],
cols: [[
{title:'序號',templet:'#indexTp1', width:'6%'},
{field:'srcIp', title:'IP', width:'17%',sort:true},
{field:'srcSys', title:'源系統', width:'10%'},
{field:'destIp', title:'目標IP', width:'17%'},
{field:'destSys', title:'目標系統', width:'10%'},
{field:'startTime', title:'開始時間', width:'11%'},
{field:'endTime', title:'結束時間', width:'11%'},
{field:'remark', title:'備註'}
]]
});
});