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链接（在线修改）：hartsjs/editor.html?c=xHJUB4SZmz&v=1
官⽅例⼦：hartsjs/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.ElementById('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系
//折线图数据
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","系统节
//获取节点数据
function get_nodes(relatData) {//官⽅的⽅法改造了⼀下=⾃定义⽣成：关系图中节点位置
var nodes = [];
var tmp_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].al.curveness = -0.1;
}
}
}
// console.log(links);
return links;
}
//------------------------------------------------------关系图获取数据:end-----------------------------------------------------------------
//------------------------------------------------------关系图获取数据: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.笛卡尔坐标系设置
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议