整理了一下大概有两种做法来实现在同一个页面中显示多个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. Font Awesome Text 使用方法

    <!-- basic text--> <com.beardedhen.androidbootstrap.FontAwesomeText android:layout_width=&q ...

  2. WPF与缓动(四) 弧形缓动

    原文:WPF与缓动(四) 弧形缓动    WPF与缓动(四)  弧形缓动                                                                 ...

  3. WPF异常捕获，并使程序不崩溃！

    原文:WPF异常捕获,并使程序不崩溃! 在.NET中,我们使用try-catch-finally来处理异常.但,当一个Exception抛出,抛出Exception的代码又没有被try包围时,程序就崩 ...

  4. Arch linux操作系统安装教程

    一.Arch linux Arch Linux是一款基于x86-64架构的Linux发行版.系统主要由自由和开源软件组成,支持社区参与.系统设计以KISS原则(保持简单和愚蠢)为总体指导原则,注重代码 ...

  5. debian8 root无法远程登录解决办法

    改一下root 密码,应该就能本地登录了. 改/etc/ssh/sshd.conf,然后重启ssh就能远程登录了:PermitRootLogin yesPermitEmptyPasswords no

  6. PHP模拟POST提交数据并获得返回值之CURL方法（使用PHP extension，然后使用php_curl.dll，很不错）

    今天公司做个东西,需要条用同事的接口,我的代码和他的代码不在同一个域下,但是都是子域. a.ifensi.com与b.ifensi.com的关系. 我需要传递一个关联数组过去,他那边给我返回一个jso ...

  7. js 看图识国家

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  8. .NET与Java互通AES算法加密解密

    /// <summary>AES加密</summary> /// <param name="text">明文</param> /// ...

  9. html send mail

    <html> <body> <script> var formattedBody = "FirstLine \n Second Line \n Third ...

  10. C#基础加强篇----委托、Lamada表达式和事件（上）

    1.委托 C#的委托相当于C/C++中的函数指针.函数指针用指针获取一个函数的入口地址,实现对函数的操作. 委托与C/C++中的函数指针不同在于,委托是面向对象的,是引用类型,对委托的使用要先定义后实 ...