整理了一下大概有两种做法来实现在同一个页面中显示多个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. asp.net (webapi) core 2.1 跨域配置

    原文:asp.net (webapi) core 2.1 跨域配置 官方文档 ➡️ https://docs.microsoft.com/zh-cn/aspnet/core/security/cors ...

  2. WPF 4 日期选择器（DatePicker）

    原文:WPF 4 日期选择器(DatePicker)      前一篇<WPF 4 日历控件(Calendar)> 中我们对日历控件的使用方式有了基本了解,本篇将继续介绍WPF 4 中另一 ...

  3. CSS，让100%的宽度，自动减10，让100%的高度，自动减10，可以加减乘除

    CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{ width: calc(100% - 10px); height: calc(100% - 10p ...

  4. android studio 3.0+发布签名apk注意的情况

    在build.gradle for module文件中添加 lintOptions { checkReleaseBuilds false abortOnError false } 这样避免失败

  5. Win8 Metro(C#)数字图像处理--2.60部分彩色保留算法

    原文:Win8 Metro(C#)数字图像处理--2.60部分彩色保留算法  [函数名称]   部分彩色保留函数       WriteableBitmap PartialcolorProcess ...

  6. 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  7. 三星860 evo 250g 开启AHCI模式读写对比

    主板比较老,只支持sata2接口 换用三星860evo后跑分对比

  8. Java 几个有用的命令 - All Options, Memory Options, GC Options, System Properties, Thread Dump, Heap Dump

    jcmd  ##Refer to http://www.cnblogs.com/tang88seng/p/4497725.html java -XX:+PrintFlagsFinal -version ...

  9. mysql8解压版安装

    1.下载 下载mysql8 2.安装 ① 解压到需要安装的目录,然后新建一个my.ini(位于解压目录下,与bin目录在同一个目录下) # For advice on how to change se ...

  10. QT5 屏幕旋转90度

    主要思路是将所有项目界面加载到QGraphicsScene,再进行旋转操作.直接上代码#include <QApplication>#include <QGraphicsView&g ...