在同一页面中显示多个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图表的更多相关文章
- [置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
- HTML页面中显示HTML标签<xmp>
最近做东西遇到一个HTML页面中显示HTML标签的需求,比如要显示</span> 解决方法如下 HTML页面中显示HTML标签代码,可以使用<xmp>html标签内容</ ...
- php中调用这个功能可以在web页面中显示hello world这个经典单词
php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...
- IT兄弟连 JavaWeb教程 使用Servlet实现在页面中显示随机数
在com.xdl.servlet包下定义RandomServlet类并HttpServlet类,在该类中生成随机数并发送给客户端.RandomServlet类详细代码如下: package com.x ...
- 将url传参的中文字符在页面中显示正常
//将url传参的中文字符在页面中显示正常var url=decodeURI(url);
- IE浏览器直接在页面中显示7z文件而不是下载问题解决
IE浏览器中输入7z文件的完整下载URL后,不是保存文件,而是直接在页面中显示(当然是乱码) 这是因为浏览器对不同的资源文件处理的方式不同,例如图片文件,一般会直接打开,所以我们可以不用7z,使用zi ...
- 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)
应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...
- 修改页面中显示出需要修改的数据(包括select选择框复显示)
页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...
- MVC使用TempData将返回的string传到另一个控制器页面中显示!
我需要把数据库中查询出的数据,传递到另一个控制器的页面去显示. https://blog.csdn.net/ma_jiang/article/details/8164212 看了上面这篇文章,反应过来 ...
随机推荐
- python3给图片添加水印
#!/usr/local/bin/python3 #coding=gbk import os, io, sys, re, time, json, random from PIL import Imag ...
- ASP.NET Core 项目配置 ( Startup ) - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core 项目配置 ( Startup ) - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 项目配置 ( Startup ) 前面几章节 ...
- 从Header中获得信息
/// <summary> /// 获得header信息 /// </summary> /// <param name="response">& ...
- js 层的显示和隐藏
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 【msdn wpf forum翻译】如何在wpf程序(程序激活时)中捕获所有的键盘输入,而不管哪个元素获得焦点?
原文:[msdn wpf forum翻译]如何在wpf程序(程序激活时)中捕获所有的键盘输入,而不管哪个元素获得焦点? 原文链接:http://social.msdn.microsoft.com/Fo ...
- 用友u8各版本在输出的时候报错提示:外部数据库驱动程序(1)中的意外错误
从10月12日起很多U8用户反馈,在各版本U8中输出报表时软件报错,报错内容“外部数据库驱动程序(1)中的意外错误”,经初步分析有以下解决方案:1.卸载微软的补丁:(1)如果是PC操作系统(一般是客户 ...
- iOS学习总结之ARC和非ARC的单例模式实现
iOS单例模式的实现 首先我们要明白下面三个问题: 什么是单例模式 单例模式的优点 如何实现单例模式 1.什么是单例模式 单例模式(Singleton):单例模式确保对于一个给定的类只有一个实例存在, ...
- WPF应用App.Config文件的保存路径
App.Config文件有更改后,自动会保存到以下路径: C:\Users\你的系统用户名\AppData\Local\你的应用名\
- 如何替换Windows的Shell(即explorer.exe)
原文:如何替换Windows的Shell(即explorer.exe) 下载一个可以查看用户的SID的软件,如SysInternals套装中的PsGetsid.exe(地址:http://www.it ...
- 百度网盘web端项目总结
项目背景 网盘作为一个在线备份存储,共享文件的工具类产品,给人们的工作和生活带来了很大的帮助和便利.百度网盘是目前国内使用量最大的网盘产品,至今发展已有4年,总用户数超4亿,为了让用户有着更好的使用体 ...