整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表，废话不说直接上代码。
- 在同一个echart对象中绘制多个图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<title>echart</title>
<style>
.chart {
width: 1500px;
}
</style>
</head>
<body>
<div id="app">
<div id="main" class="chart"></div>
</div>
<script type="text/javascript">
init();
function init() {
//每行最多显示4个图表，并自动计算高度
var num = getRound(3, 50);
var rowNumber = Math.ceil(Math.sqrt(num));
if (rowNumber > 4) {
rowNumber = 4;
}
//根据列数计算行数
var colummNumber = Math.ceil(num / rowNumber);
//上下图表间隔
var topNum = 30;
//固定单个图表高度
var heightNum = 250;
//计算所需要的高度
document.getElementById("main").style.height = colummNumber * (heightNum + topNum) + "px";
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
var grids = [];
var xAxis = [];
var yAxis = [];
var series = [];
var titles = [];
var xdata = ["第1次", "第2次", "第3次", "第4次", "第5次", "第6次"];
//通过配置xAxi和yAxis的gridIndex series的xAxisIndex和yAxisIndex 来配套格子
for (var i = 0; i < num; i++) {
xAxis.push({
type: "category",
data: xdata,
gridIndex: i
});
yAxis.push({
type: "value",
gridIndex: i,
inverse: true,
splitLine: {
show: false
}
});
series.push({
name: "名次",
type: "line",
data: getData(6),
xAxisIndex: i,
yAxisIndex: i,
label: {
show: true
}
});
grids.push({
show: true
});
titles.push({
textAlign: "center",
text: "mark" + i,
textStyle: {
fontSize: 16,
fontWeight: "normal"
}
});
}
//通过计算配置各个grid title的位置
grids.forEach((grid, idx) => {
grid.left = ((idx % rowNumber) / rowNumber) * 100 + 3 + "%";
grid.top = (Math.floor(idx / rowNumber) * (heightNum + topNum)) + top;
grid.width = (1 / rowNumber) * 100 - 6 + "%";
grid.height = heightNum - 6;
titles[idx].left = parseFloat(grid.left) + parseFloat(grid.width) / 2 + "%";
titles[idx].top = parseFloat(grid.top);
});
// 指定图表的配置项和数据
var option = {
title: titles,
xAxis: xAxis,
yAxis: yAxis,
series: series,
grid: grids
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function getRound(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
//获取min-max范围内的随机整数
function getData(num) {
var list = [];
for (var i = 0; i < num; i++) {
list.push(getRound(1, 100));
}
return list;
}
</script>
</body>
</html>- 创建多个echart对象并分别绘制图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<title>echart</title>
<style>
.chart {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<h2>图表测试</h2>
<div id="app">
</div>
<script type="text/javascript">
init();
function init() {
//每行最多显示4个图表，并自动计算高度
var num = getRound(3, 10);
var app = document.getElementById("app");
var xdata = ["第1次", "第2次", "第3次", "第4次", "第5次", "第6次"];
//通过配置xAxi和yAxis的gridIndex series的xAxisIndex和yAxisIndex 来配套格子
for (var i = 0; i < num; i++) {
//创建用于存放图表的div节点
var el = document.createElement('div');
el.id = "main" + i;
el.className = "chart";
app.appendChild(el);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main" + i));
// 指定图表的配置项和数据
var option = {
title: {
text: 'mark' + i,
left: 'center'
},
xAxis: {
type: "category",
data: xdata
},
yAxis: {
type: "value",
splitLine: {
show: false
}
},
series: {
name: "名次",
type: "line",
data: getData(6),
label: {
show: true
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
//获取min-max范围内的随机整数
function getRound(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
function getData(num) {
var list = [];
for (var i = 0; i < num; i++) {
list.push(getRound(1, 100));
}
return list;
}
</script>
</body>
</html>