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

  1. 在同一个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>
  1. 创建多个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图表的更多相关文章

  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. EPI_H/EPI_V（边缘保持指数，matlab 矢量化编程）

    EPI: edge preservation index,衡量对原始图像的操作(目标图像)对图像边缘的保持能力. EPI_H:horizontal ,水平方向: EPI_V:vertical,垂直方向 ...

  2. 信小程序支付(C#后台+前台)

    今天为大家带来比较简单的支付后台处理 首先下载官方的c#模板(WxPayAPI),将模板(WxPayAPI)添加到服务器上,然后在WxPayAPI项目目录中添加两个“一般处理程序” (改名为GetOp ...

  3. Android面HTTP协议发送get要求

    /** * 采纳get办法要求 * * @param username * @param password * @return null表示求得的路径有问题,text返回请求得到的数据 */ publ ...

  4. java堆 （转）

     Java栈和堆 ----这两个概念未知很长一段时间,终于找到了一个很好的文本.使用和共享 1. 堆(stack)堆(heap)他们是Java使用Ram本地存储的数据. 与C++不同,Java主动管理 ...

  5. Matlab随笔之插值与拟合（下）

    原文:Matlab随笔之插值与拟合(下) 1.二维插值之插值节点为网格节点 已知m x n个节点:(xi,yj,zij)(i=1…m,j=1…n),且xi,yi递增.求(x,y)处的插值z. Matl ...

  6. mysql常见操作汇总 专题

    mysql中in多个字段 1. 基本用法 SELECT * FROM USER WHERE , , ); 2. 多个字段同时使用 SELECT * FROM USER WHERE (, ),(, ), ...

  7. WPF查找父元素子元素

    原文:WPF查找父元素子元素 /// <summary>        /// WPF中查找元素的父元素        /// </summary>        /// &l ...

  8. 读BeautifulSoup官方文档之与bs有关的对象和属性(2)

    上一节说到tag, 这里接着讲, tag有个属性叫做string, tag.string其实就是我们要掌握的四个对象中的第二个 ---- NavigableString,  它代表的是该tag内的te ...

  9. 更改开机默认不显示explorer.exe，直接启动自己写的EXE程序方法

    原文:更改开机默认不显示explorer.exe,直接启动自己写的EXE程序方法 更改开机默认不显示explorer.exe,直接启动自己写的EXE程序的函数: bool UpdateWinlogon ...

  10. 【C++】小心使用文件读写模式：回车（'\r'） 换行（'\n'）问题的一次纠结经历

    原来没有仔细注意C++读写文件的二进制模式和文本模式,这次吃了大亏.(平台:windows  VS2012) BUG出现: 写了一个程序A,生成一个文本文件F保存在本地,然后用程序B读取此文件计算MD ...