整理了一下大概有两种做法来实现在同一个页面中显示多个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. 【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur]

    原文:[HLSL学习笔记]WPF Shader Effect Library算法解读之[DirectionalBlur] 方位模糊是一个按照指定角度循环位移并叠加纹理,最后平均颜色值并输出的一种特效. ...

  2. 终于，期待已久的 Java 9 正式发布了！

    经过4次跳票,历经曲折的 Java 9 正式版终于发布了! 你可以通过这里下载 Java 9 正式版.JDK9 提供超过 150 项新功能特性,包括备受期待的模块化系统.可交互的 REPL 工具 js ...

  3. mac 安装使用Liteide

    1.下载go 官网下载地址(需要FQ)golang 中国镜像网站下载golangtc 下载go1.5.1.darwin-amd64.tar.gz包,解压得到一个Go目录,把go目录移动到你想要的路径下 ...

  4. WPF编游戏系列 之九 物品清单再优化

    原文:WPF编游戏系列 之九 物品清单再优化        在"第三篇"和"第四篇"中通过用户控件和数据绑定功能对物品清单进行一些优化减少了部分C#代码,但感觉 ...

  5. 第0001题 : 产生随机数(顺便读random模块官方文档)

    看这个之前我准备先看一下random模块的官方文档... 在整个随机模块中,  最基础的就是random, 它产生一个 [0.0, 1.0)的浮点数. 这个模块下所有的函数实际上是绑定在一个叫做ran ...

  6. Java 访问修饰符详解

    访问修饰符定义了类.属性和方法的访问权限,Java 中包含四种,访问权限从小到大为 private.default.protected 和 public. public,公共修饰符,被其修饰的类.属性 ...

  7. Win8 Metro(C#)数字图像处理--2.72图像噪声

    原文:Win8 Metro(C#)数字图像处理--2.72图像噪声  [函数名称]   噪声函数WriteableBitmap NoiseProcess(WriteableBitmap src,  ...

  8. Android零基础入门第34节：Android中基于监听的事件处理

    原文:Android零基础入门第34节:Android中基于监听的事件处理 上一期我们学习了Android中的事件处理,也详细学习了Android中基于监听的事件处理,同时学会了匿名内部类形式,那么本 ...

  9. Upgrade a Non-CDB To a PDB on CDB

    .Stop the cluster database and start database on one node with read noly [oracle@raca1 admin]$ srvct ...

  10. [转]Android 如何有效的解决内存泄漏的问题

    Android 如何有效的解决内存泄漏的问题   前言:最近在研究Handler的知识,其中涉及到一个问题,如何避免Handler带来的内存溢出问题.在网上找了很多资料,有很多都是互相抄的,没有实际的 ...