echarts实现一个页面同时显示多个图表

前言：

因工作需要，老大要求给我一个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" />


<script src="../../dist/echarts.js"></script>

<script type="text/javascript" src="oneForAll.js"></script>
<style type="text/css">body{height: 100%}
/*通过百分比设置图表的div大小*/
.chart{height: 70%}
</style>

<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>

<div class="chart" id="yqyMain" ></div>
<script>
//固定写法
var chart = echarts.init(document.getElementById('yqyMain'));
/*接受自定义Option.js中的函数返回的：option*/
var yqyOption=oneForAll();
chart.setOption(yqyOption);
</script>

[html] view plain copy


<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>

<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代码：

[html] view plain copy

<code class="language-html">文件名：oneForAll.js</code>

//饼图数据
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

注意需要最前面添加分号 ;

[html] view plain copy

<code class="language-html">yqyTable.js</code>

;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:'备注'}
]]
});
});