echart 多个图表组合在一起（数量不限自动计算每个图表高度）

样式：

Vue文件代码：

<template>
  <div class="chartBox">
    <!-- 公共头部 -->
    <headerCom style="background-color: #010713" />
    <!--  -->
    <div class="contentBox">
      <div
        class="leftTitleBox"
        :style="{
          height: boxHeight - dataZoomHeight - offsetTop + 'px',
          paddingTop: offsetTop + 'px',
        }"
      >
        <div
          v-for="(item, k) in CharacterData"
          :key="k"
          class="itemTitle"
          :style="{
            height: `calc((100% - ${
              (baseSpace / CharacterData.length) *
              2 *
              (CharacterData.length - 1)
            }px) / ${CharacterData.length})`,
          }"
        >
          {{ item.title }}
        </div>
      </div>
      <div id="GChartBox"></div>
    </div>
  </div>
</template>

<script>
import headerCom from "@/views/equipmentNew/module/header.vue";
import * as echarts from "echarts";
let dataList = [];
const __item = [
  ["2000-06-05 12:01:56", 116],
  ["2000-06-06 12:01:56", 129],
  ["2000-06-07 12:01:56", 135],
  ["2000-06-08 12:01:56", 86],
  ["2000-06-09 12:01:56", 73],
  ["2000-06-10 12:01:56", 85],
  ["2000-06-11 12:01:56", 73],
  ["2000-06-12 12:01:56", 68],
  ["2000-06-13 12:01:56", 92],
  ["2000-06-14 12:01:56", 130],
  ["2000-06-15 12:01:56", 245],
  ["2000-06-16 12:01:56", 139],
  ["2000-06-17 12:01:56", 115],
  ["2000-06-18 12:01:56", 111],
  ["2000-06-19 12:01:56", 309],
  ["2000-06-20 12:01:56", 206],
  ["2000-06-21 12:01:56", 137],
  ["2000-06-22 12:01:56", 128],
  ["2000-06-23 12:01:56", 85],
  ["2000-06-24 12:01:56", 94],
  ["2000-06-25 12:01:56", 71],
  ["2000-06-26 12:01:56", 106],
  ["2000-06-27 12:01:56", 84],
  ["2000-06-28 12:01:56", 93],
  ["2000-06-29 12:01:56", 85],
  ["2000-06-30 12:01:56", 73],
  ["2000-07-01 12:01:56", 83],
  ["2000-07-02 12:01:56", 125],
  ["2000-07-03 12:01:56", 107],
  ["2000-07-04 12:01:56", 82],
  ["2000-07-05 12:01:56", 44],
  ["2000-07-06 12:01:56", 72],
  ["2000-07-07 12:01:56", 106],
  ["2000-07-08 12:01:56", 107],
  ["2000-07-09 12:01:56", 66],
  ["2000-07-10 12:01:56", 91],
  ["2000-07-11 12:01:56", 92],
  ["2000-07-12 12:01:56", 113],
  ["2000-07-13 12:01:56", 107],
  ["2000-07-14 12:01:56", 131],
  ["2000-07-15 12:01:56", 111],
  ["2000-07-16 12:01:56", 64],
  ["2000-07-17 12:01:56", 69],
  ["2000-07-18 12:01:56", 88],
  ["2000-07-19 12:01:56", 77],
  ["2000-07-20 12:01:56", 83],
  ["2000-07-21 12:01:56", 111],
  ["2000-07-22 12:01:56", 57],
  ["2000-07-23 12:01:56", 55],
  ["2000-07-24 12:01:56", 60],
];
for (let i = 0, len = 20; i < len; i++) {
  if (i < len - 1) {
    dataList = [...dataList, ...__item];
  } else {
    __item.forEach((item, index, arr) => {
      dataList.push([item[0], 50]);
    });
  }
}
export default {
  components: { headerCom },
  data() {
    return {
      boxHeight: 0,
      dataZoomHeight: 100,
      offsetTop: 30, // 距离顶部多少像素
      baseSpace: 120, // 间隔基数
      CharacterData: [
        {
          title: "图表1",
          data: dataList,
        },
        {
          title: "图表2",
          data: dataList,
        },
        {
          title: "图表3",
          data: dataList,
        },
        {
          title: "图表4",
          data: dataList,
        },
        {
          title: "图表5",
          data: dataList,
        },
        // {
        //   title: "图表6",
        //   data: dataList,
        // },
        // {
        //   title: "图表7",
        //   data: dataList,
        // },
        // {
        //   title: "图表8",
        //   data: dataList,
        // },
        // {
        //   title: "图表9",
        //   data: dataList,
        // },
        // {
        //   title: "图表10",
        //   data: dataList,
        // },
      ],
    };
  },
  mounted() {
    this.boxHeight = $("#GChartBox").height();
    this.initChart();
  },
  methods: {
    initChart() {
      let dom = document.getElementById("GChartBox");
      let myChart = echarts.init(dom);

      let option;

      // 处理数据
      const xAxisIndex = [];
      const xAxis = [];
      const yAxis = [];
      const grid = [];
      const series = [];
      this.CharacterData.forEach((item, index, arr) => {
        //设置 dataZoom
        xAxisIndex.push(index);
        // 设置 x 坐标数据
        xAxis.push({
          data: [],
          // show:
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.5)",
            },
          },
          axisTick: {
            show: index == arr.length - 1, // 最后一个表显示 x 轴参数,
          },
          axisLabel: {
            show: index == arr.length - 1, // 最后一个表显示 x 轴参数,
          },
          gridIndex: index,
        });

        // 设置 series 数据
        series.push({
          type: "line",
          showSymbol: false,
          lineStyle: {
            width: 1,
          },
          name: item.title,
          data: [],
          xAxisIndex: index,
          yAxisIndex: index,
        });

        const itemList = item.data;
        for (let i = 0, len = itemList.length; i < len; i++) {
          // 设置 x 坐标 data 数据
          xAxis[index].data.push(itemList[i][0]);
          // 设置 series data 数据
          series[index].data.push(itemList[i][1]);
        }
        // 设置 y 坐标数据
        yAxis.push({
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,.15)",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.5)",
            },
          },
          axisTick: {
            show: true, // 最后一个表显示 x 轴参数,
          },
          gridIndex: index,
        });

        // 设置 grid 数据
        const viewBox = this.boxHeight - this.dataZoomHeight - this.offsetTop;
        // 计算间隔相差
        const space = this.baseSpace / arr.length;
        // 计算 每个图表的高度
        const chartItemHeight =
          (viewBox - space * (arr.length - 1)) / arr.length;
        let _top, _bottom;
        _top = this.offsetTop + (space + chartItemHeight) * index;
        _bottom = this.boxHeight - (_top + chartItemHeight);

        grid.push({
          left: 100,
          top: _top,
          bottom: _bottom,
          right: 0,
        });
      });

      option = {
        tooltip: {
          trigger: "axis",
          borderWidth: 0,
          borderColor: "#ccc",
          padding: 10,
          backgroundColor: "rgba(66, 65, 65, 1)",
          textStyle: {
            color: "#000",
          },
          formatter: function (params) {
            // console.log(params);
            // 排序
            params.sort((a, b) => a.axisIndex - b.axisIndex);

            let html = `<div style="color:#fff;padding: 0 10px 10px 10px">时间：${params[0].name}</div>`;
            params.forEach((item, index, arr) => {
              html += `
                <div style="color:#fff;display: flex;flex-flow: row nowrap;align-items: center;padding:10px;border-top:1px solid rgba(255,255,255,.2)">
                  <div style="width:10px;height:10px;background:${item.color};border-radius:10px;margin-right:10px"></div>
                  <div>
                    <p style="color:#fff;">类型：${item.seriesName}</p>
                    <p style="color:#fff;">数值：${item.value}</p>
                  </div>
                </div>
              `;
            });

            return html;
          },
          // position: function (pos, params, el, elRect, size) {
          //   const obj = {
          //     top: 10,
          //   };
          //   obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          //   return obj;
          // },
          // extraCssText: "width: 230px",
          axisPointer: {
            // type: "cross",
            lineStyle: {
              color: "red",
              type: "solid",
            },
            label: {
              show: true,
              backgroundColor: "transparent",
              formatter: (params) => {
                if (params.axisIndex == this.CharacterData.length - 1) {
                  return params.value;
                }
              },
            },
          },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 60,
            end: 100,
            xAxisIndex: xAxisIndex,
          },
        ],
        axisPointer: {
          link: [
            {
              xAxisIndex: "all",
            },
          ],
        },
        xAxis: xAxis,
        yAxis: yAxis,
        grid: grid,
        series: series,
      };

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.flexCenter {
  display: flex;
  align-items: center;
}
.chartBox {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  .contentBox {
    padding: 10px;
    height: calc(1080px - 85px);
    box-sizing: border-box;
    background: #090f26;
    @extend .flexCenter;
    align-items: flex-start;
    .leftTitleBox {
      width: 100px;
      @extend .flexCenter;
      flex-flow: column nowrap;
      justify-content: space-between;
      .itemTitle {
        width: 100%;
        color: rgba(255, 255, 255, 0.6);
        @extend .flexCenter;
        align-items: center;
        justify-content: flex-end;
      }
    }
    #GChartBox {
      width: calc(100% - 200px);
      height: 100%;
    }
  }
}
</style>