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

  1. 在同一个echart对象中绘制多个图表
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
  9.   <title>echart</title>
  10.   <style>
  11.     .chart {
  12.       width: 1500px;
  13.     }
  14.   </style>
  15. </head>
  17. <body>
  18.   <div id="app">
  19.     <div id="main" class="chart"></div>
  20.   </div>
  21.   <script type="text/javascript">
  23.     init();
  24.     function init() {
  26.       //每行最多显示4个图表，并自动计算高度
  27.       var num = getRound(3, 50);
  28.       var rowNumber = Math.ceil(Math.sqrt(num));
  29.       if (rowNumber > 4) {
  30.         rowNumber = 4;
  31.       }
  32.       //根据列数计算行数
  33.       var colummNumber = Math.ceil(num / rowNumber);
  35.       //上下图表间隔
  36.       var topNum = 30;
  37.       //固定单个图表高度
  38.       var heightNum = 250;
  39.       //计算所需要的高度
  40.       document.getElementById("main").style.height = colummNumber * (heightNum + topNum) + "px";
  42.       // 基于准备好的dom，初始化echarts实例
  43.       var myChart = echarts.init(document.getElementById("main"));
  44.       var grids = [];
  45.       var xAxis = [];
  46.       var yAxis = [];
  47.       var series = [];
  48.       var titles = [];
  50.       var xdata = ["第1次", "第2次", "第3次", "第4次", "第5次", "第6次"];
  52.       //通过配置xAxi和yAxis的gridIndex  series的xAxisIndex和yAxisIndex 来配套格子
  53.       for (var i = 0; i < num; i++) {
  54.         xAxis.push({
  55.           type: "category",
  56.           data: xdata,
  57.           gridIndex: i
  58.         });
  59.         yAxis.push({
  60.           type: "value",
  61.           gridIndex: i,
  62.           inverse: true,
  63.           splitLine: {
  64.             show: false
  65.           }
  66.         });
  67.         series.push({
  68.           name: "名次",
  69.           type: "line",
  70.           data: getData(6),
  71.           xAxisIndex: i,
  72.           yAxisIndex: i,
  74.           label: {
  75.             show: true
  76.           }
  77.         });
  79.         grids.push({
  80.           show: true
  81.         });
  83.         titles.push({
  84.           textAlign: "center",
  85.           text: "mark" + i,
  86.           textStyle: {
  87.             fontSize: 16,
  88.             fontWeight: "normal"
  89.           }
  90.         });
  91.       }
  93.       //通过计算配置各个grid  title的位置
  94.       grids.forEach((grid, idx) => {
  95.         grid.left = ((idx % rowNumber) / rowNumber) * 100 + 3 + "%";
  96.         grid.top = (Math.floor(idx / rowNumber) * (heightNum + topNum)) + top;
  98.         grid.width = (1 / rowNumber) * 100 - 6 + "%";
  99.         grid.height = heightNum - 6;
  101.         titles[idx].left = parseFloat(grid.left) + parseFloat(grid.width) / 2 + "%";
  102.         titles[idx].top = parseFloat(grid.top);
  103.       });
  105.       // 指定图表的配置项和数据
  106.       var option = {
  107.         title: titles,
  108.         xAxis: xAxis,
  109.         yAxis: yAxis,
  110.         series: series,
  111.         grid: grids
  112.       };
  114.       // 使用刚指定的配置项和数据显示图表。
  115.       myChart.setOption(option);
  116.     }
  118.     function getRound(min, max) {
  119.       return parseInt(Math.random() * (max - min + 1) + min);
  120.     }
  122.     //获取min-max范围内的随机整数
  123.     function getData(num) {
  124.       var list = [];
  125.       for (var i = 0; i < num; i++) {
  126.         list.push(getRound(1, 100));
  127.       }
  128.       return list;
  129.     }
  130.   </script>
  131. </body>
  133. </html>
  1. 创建多个echart对象并分别绘制图表
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
  9.   <title>echart</title>
  10.   <style>
  11.     .chart {
  12.       width: 600px;
  13.       height: 400px;
  14.     }
  15.   </style>
  16. </head>
  18. <body>
  19.   <h2>图表测试</h2>
  20.   <div id="app">
  21.   </div>
  22.   <script type="text/javascript">
  23.     init();
  25.     function init() {
  27.       //每行最多显示4个图表，并自动计算高度
  28.       var num = getRound(3, 10);
  29.       var app = document.getElementById("app");
  30.       var xdata = ["第1次", "第2次", "第3次", "第4次", "第5次", "第6次"];
  32.       //通过配置xAxi和yAxis的gridIndex  series的xAxisIndex和yAxisIndex 来配套格子
  33.       for (var i = 0; i < num; i++) {
  35.         //创建用于存放图表的div节点
  36.         var el = document.createElement('div');
  37.         el.id = "main" + i;
  38.         el.className = "chart";
  39.         app.appendChild(el);
  41.         // 基于准备好的dom，初始化echarts实例
  42.         var myChart = echarts.init(document.getElementById("main" + i));
  44.         // 指定图表的配置项和数据
  45.         var option = {
  46.           title: {
  47.             text: 'mark' + i,
  48.             left: 'center'
  49.           },
  50.           xAxis: {
  51.             type: "category",
  52.             data: xdata
  53.           },
  54.           yAxis: {
  55.             type: "value",
  56.             splitLine: {
  57.               show: false
  58.             }
  59.           },
  60.           series: {
  61.             name: "名次",
  62.             type: "line",
  63.             data: getData(6),
  64.             label: {
  65.               show: true
  66.             }
  67.           }
  68.         };
  70.         // 使用刚指定的配置项和数据显示图表。
  71.         myChart.setOption(option);
  73.       }
  74.     }
  76.     //获取min-max范围内的随机整数
  77.     function getRound(min, max) {
  78.       return parseInt(Math.random() * (max - min + 1) + min);
  79.     }
  81.     function getData(num) {
  82.       var list = [];
  83.       for (var i = 0; i < num; i++) {
  84.         list.push(getRound(1, 100));
  85.       }
  86.       return list;
  87.     }
  88.   </script>
  89. </body>
  91. </html>

在同一页面中显示多个echart图表的更多相关文章

  1. [置顶] 读取pdf并且在web页面中显示

    读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...

  2. HTML页面中显示HTML标签<xmp>

    最近做东西遇到一个HTML页面中显示HTML标签的需求,比如要显示</span> 解决方法如下 HTML页面中显示HTML标签代码,可以使用<xmp>html标签内容</ ...

  3. php中调用这个功能可以在web页面中显示hello world这个经典单词

    php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...

  4. IT兄弟连 JavaWeb教程 使用Servlet实现在页面中显示随机数

    在com.xdl.servlet包下定义RandomServlet类并HttpServlet类,在该类中生成随机数并发送给客户端.RandomServlet类详细代码如下: package com.x ...

  5. 将url传参的中文字符在页面中显示正常

    //将url传参的中文字符在页面中显示正常var url=decodeURI(url);

  6. IE浏览器直接在页面中显示7z文件而不是下载问题解决

    IE浏览器中输入7z文件的完整下载URL后,不是保存文件,而是直接在页面中显示(当然是乱码) 这是因为浏览器对不同的资源文件处理的方式不同,例如图片文件,一般会直接打开,所以我们可以不用7z,使用zi ...

  7. 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器）

    应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...

  8. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

  9. MVC使用TempData将返回的string传到另一个控制器页面中显示！

    我需要把数据库中查询出的数据,传递到另一个控制器的页面去显示. https://blog.csdn.net/ma_jiang/article/details/8164212 看了上面这篇文章,反应过来 ...

随机推荐

  1. 静态库、动态库，dll文件、lib文件，隐式链接、显式链接浅见

    静态链接.动态链接 静态库和动态库分别应用在静态链接方式和动态链接方式中,所谓静态链接方式是指在程序执行之前完成所有的链接工作,把静态库一起打包合入,生成一个可执行的目标文件(EXE文件).所谓动态链 ...

  2. Python抓取框架：Scrapy的架构

    最近在学Python,同时也在学如何使用python抓取数据,于是就被我发现了这个非常受欢迎的Python抓取框架Scrapy,下面一起学习下Scrapy的架构,便于更好的使用这个工具. 一.概述 下 ...

  3. Linux栈搜索算法优化随想

    Linux网络协议栈可以准确但仍进行说明,不用说,Netfilter.简单地说,TC够了,但有几个硬伤,本文不构成一个完整的记录,如果是随笔,不可当真. 0.发现物种 Linux堆栈作为一个纯软件实现 ...

  4. ubuntu如何修改terminal终端的主机名（修改/etc/hostname文件）

    有时候安装完Ubuntu系统后,打开命令终端,终端显示的主机名格式比较难看,例如 我最近买的国内某云的VPS. xxx@VM-1560-ubuntu$ xxx@VM-1560-ubuntu$ 对于有洁 ...

  5. PHP中的序列化

    接口 Serializable { abstract public string serialize (void); abstruact public void unserialize (string ...

  6. 根据数据库记录动态生成C#类及其公共属性并动态执行的解决方案

    原文:根据数据库记录动态生成C#类及其公共属性并动态执行的解决方案 问题: C#中,想动态产生这么一个类: public class StatisticsData    {        public ...

  7. HTTP协议学习 - 9 Method Definitions

    # 前言 官方文档简略翻译.9 不是代表第九篇,而是在 RFC2616 中是第九篇.重要加粗,龟速翻译. # Method 9.3 GET The GET method means retrieve ...

  8. 图像滤镜艺术---微软自拍APP滤镜实现合集DEMO

    原文:图像滤镜艺术---微软自拍APP滤镜实现合集DEMO 微软最近推出了自家的美颜app,大家有兴趣可以在苹果商店中下载一下看一看,今天,我们要说的便是这款app中的所有滤镜实现问题. 这款app中 ...

  9. InnoSetup提升系统管理员权限（通过破解方式修改？）

    PrivilegesRequired=admin 1 2 3 4 5   找到```INNO```安装目录下的```SetupLdr.e32```文件(其实就是一个exe程序),将程序中的```Man ...

  10. Android零基础入门第16节：Android用户界面开发概述

    原文:Android零基础入门第16节:Android用户界面开发概述 相信通过前面15期的学习,Android的开发环境已经基本掌握了,如果仍有问题,欢迎到Android零基础入门技术讨论微信群交流 ...