使用VueEcharts把多个图表合为一个

两张图表配置
 

<vueEcharts
            :update-options="{
              notMerge: true,
            }"
            :option="chartOption"
            style="height: 350px"
            autoresize
            ref="chart1"
          />
          <div style="height: 20px"></div>
          <vueEcharts
            :update-options="{
              notMerge: true,
            }"
            :option="chartOption2"
            style="height: 350px"
            autoresize
            ref="chart2"
          />
// 生成 x 轴数据（时间点）
function generateXAxisData() {
  const data = [];
  for (let hour = 6; hour <= 9; hour++) {
    for (let minute = 20; minute < 60; minute++) {
      data.push(`${hour}:${minute.toString().padStart(2, "0")}`);
    }
  }
  return data;
}
// 生成随机数据
function generateRandomData() {
  const data = [];
  for (let i = 0; i < 200; i++) {
    data.push(Math.floor(Math.random() * 100));
  }
  return data;
}
const chartOption = computed(() => {
  return {
    title: {
      text: "",
      left: "center",
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        saveAsImage: {
          pixelRatio: 2,
        },
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      formatter: (params: any) => {
        const time = params[0].axisValue;
        const upload = params[0].data;
        const success = params[1].data;
        const fail = params[2].data;
        return `时间: ${time}<br/>上传: ${upload}<br/>下发成功: ${success}<br/>下发失败: ${fail}`;
      },
    },
    legend: {
      data: ["上传", "下发成功", "下发失败"],
      bottom: 10,
    },
    xAxis: {
      type: "category",
      data: generateXAxisData(),
      axisLabel: {
        formatter: (value: any) => {
          if (value.endsWith(":20")) {
            return value;
          }
          return "";
        },
      },
    },
    yAxis: {
      type: "value",
      name: "数量",
    },
    dataZoom: [
      {
        type: "slider",
        xAxisIndex: 0,
        start: 0,
        end: 100,
        bottom: 30,
      },
    ],
    series: [
      {
        name: "上传",
        type: "line",
        data: generateRandomData(),
        lineStyle: {
          color: "#5470C6",
        },
      },
      {
        name: "下发成功",
        type: "line",
        data: generateRandomData(),
        lineStyle: {
          color: "#91CC75",
        },
      },
      {
        name: "下发失败",
        type: "line",
        data: generateRandomData(),
        lineStyle: {
          color: "#EE6666",
        },
      },
    ],
  };
});


const chartOption2 = computed(() => {
  return {
    title: {
      text: "",
      left: "center",
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        saveAsImage: {
          pixelRatio: 2,
        },
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: (params: any) => {
        const time = params[0].axisValue;
        const upload = params[0].data;
        const success = params[1].data;
        const fail = params[2].data;
        return `时间: ${time}<br/>上传: ${upload}<br/>下发成功: ${success}<br/>下发失败: ${fail}`;
      },
    },
    legend: {
      data: ["上传", "下发成功", "下发失败"],
      bottom: 10,
    },
    xAxis: {
      type: "category",
      data: generateXAxisData(),
      axisLabel: {
        formatter: (value: any) => {
          if (value.endsWith(":20")) {
            return value;
          }
          return "";
        },
      },
    },
    yAxis: {
      type: "value",
      name: "数量",
    },
    dataZoom: [
      {
        type: "slider",
        xAxisIndex: 0,
        start: 0,
        end: 100,
        bottom: 30,
      },
    ],
    series: [
      {
        name: "上传",
        type: "bar",
        data: generateRandomData(),
        itemStyle: {
          color: "#5470C6",
        },
      },
      {
        name: "下发成功",
        type: "bar",
        data: generateRandomData(),
        stack: "stack1",
        itemStyle: {
          color: "#91CC75",
        },
      },
      {
        name: "下发失败",
        type: "bar",
        data: generateRandomData(),
        stack: "stack1",
        itemStyle: {
          color: "#EE6666",
        },
      },
    ],
  };
});

 合并后配置

<vueEcharts
            :update-options="{
              notMerge: true,
            }"
            :option="combinedChartOption"
            style="height: 70vh"
            autoresize
            ref="chart3"
          />
const combinedChartOption = computed(() => {
  const xAxisData = generateXAxisData();
  const randomData1 = generateRandomData();
  const randomData2 = generateRandomData();
  const randomData3 = generateRandomData();

  return {
    title: {
      text: "",
      left: "center",
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        saveAsImage: {
          pixelRatio: 2,
        },
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      formatter: (params: any) => {
        const time = params[0].axisValue;
        const upload = params[0].data;
        const success = params[1].data;
        const fail = params[2].data;
        return `时间: ${time}<br/>上传: ${upload}<br/>下发成功: ${success}<br/>下发失败: ${fail}`;
      },
    },
    legend: {
      data: ["上传", "下发成功", "下发失败"],
      bottom: 10,
    },
    grid: [
      {
        left: "10%",
        right: "10%",
        top: "10%",
        height: "35%",
      },
      {
        left: "10%",
        right: "10%",
        top: "55%",
        height: "35%",
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisData,
        axisLabel: {
          formatter: (value: any) => {
            if (value.endsWith(":20")) {
              return value;
            }
            return "";
          },
        },
        gridIndex: 0,
      },
      {
        type: "category",
        data: xAxisData,
        axisLabel: {
          formatter: (value: any) => {
            if (value.endsWith(":20")) {
              return value;
            }
            return "";
          },
        },
        gridIndex: 1,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        gridIndex: 0,
      },
      {
        type: "value",
        name: "数量",
        gridIndex: 1,
      },
    ],
    dataZoom: [
      {
        type: "slider",
        xAxisIndex: [0, 1],
        start: 0,
        end: 100,
        bottom: 30,
      },
    ],
    series: [
      {
        name: "上传",
        type: "line",
        data: chartY_UploadCount.value,
        lineStyle: {
          color: "#5470C6",
        },
        xAxisIndex: 0,
        yAxisIndex: 0,
      },
      {
        name: "下发成功",
        type: "line",
        data: generateRandomData(),
        lineStyle: {
          color: "#91CC75",
        },
        xAxisIndex: 0,
        yAxisIndex: 0,
      },
      {
        name: "下发失败",
        type: "line",
        data: generateRandomData(),
        lineStyle: {
          color: "#EE6666",
        },
        xAxisIndex: 0,
        yAxisIndex: 0,
      },
      {
        name: "上传",
        type: "bar",
        data: generateRandomData(),
        itemStyle: {
          color: "#5470C6",
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
      {
        name: "下发成功",
        type: "bar",
        data: generateRandomData(),
        stack: "stack1",
        itemStyle: {
          color: "#91CC75",
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
      {
        name: "下发失败",
        type: "bar",
        data: generateRandomData(),
        stack: "stack1",
        itemStyle: {
          color: "#EE6666",
        },
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
    ],
  };
});