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" />
-
<!-- 复制演示:都修改成自己的路径 -->
-
<!-- 引入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>
[html] view plain copy
-
<!-- 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代码:
[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:'备注'}
-
]]
-
});
-
});