在同一页面中显示多个echart图表
Posted cplemom
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在同一页面中显示多个echart图表相关的知识，希望对你有一定的参考价值。
整理了一下大概有两种做法来实现在同一个页面中显示多个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>以上是关于在同一页面中显示多个echart图表的主要内容，如果未能解决你的问题，请参考以下文章