整理了一下大概有两种做法来实现在同一个页面中显示多个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. 如何构造请求处理对象链（Pipeline）

    在开发中,我们经常会遇到这样一个场景:传入一个对象,经过不同的节点对这个对象做不同的操作,比如ASP.NET Core 中的pipeline,IIS中的HTTPpipeline等.在这类问题中,往往我 ...

  2. 离散时间信号常见函数的实现（matlab）

    1. 单位样本序列 δ(n−n0)={1,n=n00,n≠n0 function [x, n] = impseq(n0, n1, n2) n = n1:n2; x = [n == n0]; 2. 单位 ...

  3. Mac安装jupyter(原ipython)方法

    用了Mac之后非常不习惯,很多东西都要查才能完成=-=之前Python用的sublime和ide,今天看教程安利了一个jupyter 记录下用Mac安装jupyter的过程: 1.像其他安装Mac自带 ...

  4. cocos2d 滚动背景 举 无限

    void Bird::update(float time){ auto bg=this->getChildByTag(200); auto bg1=this->getChildByTag( ...

  5. Bootstrap按钮组 按钮工具栏 嵌套

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  6. jquery好友面板切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. delphi dom动态创建节点方法

    在一次测试demo中 需要动态的创建xml节点并添加,实现方法如下: var NewItem:IXMLDOMElement; NewItem:=ConfigDoc.createElement('ite ...

  8. workerman源码分析之启动过程

    PHP一直以来以草根示人,它简单,易学,被大量应用于web开发,非常可惜的是大部分开发都在简单的增删改查,或者加上pdo,redis等客户端甚至分布式,以及规避语言本身的缺陷.然而这实在太委屈PHP了 ...

  9. WPF svg 转 xmal

    原文:WPF svg 转 xmal 今天wpf里面要用矢量图,美工出的是svg格式的,需要将svg格式的转换为xaml 1.第一个尝试是安装Inkscape,这个软件可以直接将svg另存为xaml,但 ...

  10. 写给非专业人士看的 *** 简介（同时也解释了GFW ）

    写给非专业人士看的 *** 简介 这个文章来源于一个朋友在***的过程中,搞不清楚 *** 的配置问题,在这里我想按照我对 *** 的理解简单梳理一下,以便一些非专业人士也能了解 long long ...