整理了一下大概有兩種做法來實現在同一個頁面中顯示多個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>