在同一页面中显示多个echart图表

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

在同一个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>

创建多个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图表

猜你喜欢