ercharts一个页面能放几个_在同一页面中显示多个echart图表

整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表，废话不说直接上代码。

在同一个echart对象中绘制多个图表

echart

.chart {

width: 1500px;

}

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;

}

创建多个echart对象并分别绘制图表

echart

.chart {

width: 600px;

height: 400px;

}

图表测试

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;

}